@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap");
#clickit-chat {
width: 360px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.10);
font-family: 'DM Sans', Arial, sans-serif;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
border: 1px solid rgba(31,78,216,0.10);
} .clickit-header {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, #1a3fc4 0%, #0f2a8a 100%);
color: #fff;
padding: 14px 16px;
cursor: pointer;
position: relative;
overflow: hidden;
min-height: 0;
}
.clickit-header::before {
content: '';
position: absolute;
top: -30px; right: -30px;
width: 100px; height: 100px;
background: rgba(255,255,255,0.06);
border-radius: 50%;
}
.clickit-header-info {
display: flex;
align-items: center;
gap: 12px;
}
.clickit-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.35);
object-fit: cover;
flex-shrink: 0;
background: #2554e0;
}
.clickit-avatar-placeholder {
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.35);
background: linear-gradient(135deg,#4a7fff,#1a3fc4);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.clickit-header-text strong {
display: block;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.01em;
}
.clickit-header-text span {
font-size: 12px;
opacity: 0.80;
font-weight: 400;
}
.clickit-status-dot {
display: inline-block;
width: 8px; height: 8px;
background: #4ade80;
border-radius: 50%;
margin-right: 5px;
animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
0%,100% { opacity:1; transform:scale(1); }
50%      { opacity:0.6; transform:scale(1.2); }
}
.clickit-toggle {
font-size: 18px;
opacity: 0.75;
transition: transform 0.3s;
user-select: none;
} .clickit-body {
padding: 16px 14px 8px;
height: 320px;
overflow-y: auto;
scroll-behavior: smooth;
background: #f8f9ff;
}
.clickit-body::-webkit-scrollbar { width: 4px; }
.clickit-body::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 4px; } .msg {
margin-bottom: 12px;
display: flex;
flex-direction: column;
animation: fadeSlideIn 0.25s ease-out;
}
@keyframes fadeSlideIn {
from { opacity:0; transform:translateY(8px); }
to   { opacity:1; transform:translateY(0); }
} .msg.ai {
align-items: flex-start;
}
.msg.ai .msg-row {
display: flex;
align-items: flex-end;
gap: 8px;
}
.msg.ai .msg-avatar {
width: 28px; height: 28px;
border-radius: 50%;
border: 1.5px solid #c7d2fe;
object-fit: cover;
flex-shrink: 0;
margin-bottom: 2px;
}
.msg.ai .msg-avatar-icon {
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(135deg,#4a7fff,#1a3fc4);
display:flex; align-items:center; justify-content:center;
font-size:14px; flex-shrink:0; margin-bottom:2px;
}
.msg.ai .bubble {
background: #ffffff;
color: #1e293b;
border-radius: 18px 18px 18px 4px;
padding: 10px 14px;
font-size: 14px;
line-height: 1.55;
box-shadow: 0 2px 8px rgba(31,78,216,0.08);
border: 1px solid #e2e8f0;
max-width: 82%;
}
.msg.ai .msg-name {
font-size: 11px;
color: #6b7280;
margin-left: 36px;
margin-bottom: 4px;
font-weight: 500;
} .msg.user {
align-items: flex-end;
}
.msg.user .bubble {
background: linear-gradient(135deg,#1f4ed8,#1a3fc4);
color: #ffffff;
border-radius: 18px 18px 4px 18px;
padding: 10px 14px;
font-size: 14px;
line-height: 1.55;
max-width: 80%;
box-shadow: 0 2px 8px rgba(31,78,216,0.25);
} .typing-indicator {
display: flex;
align-items: flex-end;
gap: 8px;
margin-bottom: 12px;
animation: fadeSlideIn 0.25s ease-out;
}
.typing-indicator .msg-avatar-icon {
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(135deg,#4a7fff,#1a3fc4);
display:flex; align-items:center; justify-content:center;
font-size:14px; flex-shrink:0;
}
.typing-indicator .bubble {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 18px 18px 18px 4px;
padding: 12px 16px;
display: flex;
gap: 5px;
box-shadow: 0 2px 8px rgba(31,78,216,0.08);
}
.typing-dot {
width: 7px; height: 7px;
background: #94a3b8;
border-radius: 50%;
animation: bounce-dot 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes bounce-dot {
0%,80%,100% { transform:translateY(0); opacity:0.5; }
40%         { transform:translateY(-5px); opacity:1; }
} .clickit-separator {
height: 1px;
background: linear-gradient(to right, transparent, #e2e8f0, transparent);
margin: 0 14px;
} .clickit-input-area {
display: flex;
align-items: center;
padding: 10px 12px;
gap: 8px;
background: #fff;
}
#clickit-input {
flex: 1;
padding: 10px 14px;
border: 1.5px solid #e2e8f0;
border-radius: 24px;
outline: none;
font-family: 'DM Sans', Arial, sans-serif;
font-size: 14px;
background: #f8f9ff;
color: #1e293b;
transition: border-color 0.2s;
}
#clickit-input:focus {
border-color: #1f4ed8;
background: #fff;
}
#clickit-input::placeholder { color: #94a3b8; }
.clickit-send-btn {
width: 38px; height: 38px;
border-radius: 50%;
background: linear-gradient(135deg,#1f4ed8,#1a3fc4);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.15s, box-shadow 0.15s;
box-shadow: 0 2px 8px rgba(31,78,216,0.30);
}
.clickit-send-btn:hover { transform:scale(1.08); box-shadow:0 4px 14px rgba(31,78,216,0.40); }
.clickit-send-btn:active { transform:scale(0.96); }
.clickit-send-btn svg { display:block; } .cta-wrap { margin-top: 10px; display:flex; flex-direction:column; gap:6px; }
.cta {
padding: 9px 16px;
background: #1f4ed8;
color: #fff;
border: none;
border-radius: 10px;
cursor: pointer;
font-family: 'DM Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 500;
text-align: left;
transition: background 0.2s, transform 0.15s;
}
.cta:hover { background:#1639b3; transform:translateY(-1px); }
.cta.secondary { background: #25d366; }
.cta.secondary:hover { background:#1da555; } #clickit-chat.minimized .clickit-body,
#clickit-chat.minimized .clickit-input-area,
#clickit-chat.minimized .typing-indicator,
#clickit-chat.minimized .clickit-separator {
display: none;
}
#clickit-chat.minimized {
border-radius: 16px;
} #clickit-fab {
position: fixed;
bottom: 20px;
right: calc(20px + 2cm);
z-index: 99999;
display: none;
}
#clickit-fab-btn {
width: 58px; height: 58px;
border-radius: 50%;
background: linear-gradient(135deg,#1f4ed8,#0f2a8a);
border: none;
cursor: pointer;
box-shadow: 0 6px 24px rgba(31,78,216,0.40);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s, box-shadow 0.2s;
}
#clickit-fab-btn:hover { transform:scale(1.08); box-shadow:0 8px 30px rgba(31,78,216,0.50); }
#clickit-fab-badge {
position: absolute;
top: -2px; right: -2px;
background: #ef4444;
color: #fff;
border-radius: 50%;
width: 20px; height: 20px;
font-size: 11px;
font-weight: 600;
display: flex; align-items:center; justify-content:center;
font-family: 'DM Sans', Arial, sans-serif;
border: 2px solid #fff;
}  .clickit-avatar {
width: 44px !important;
height: 44px !important;
object-fit: cover;
object-position: 50% 8% !important;
background: #1a3fc4 !important;
border-radius: 50% !important;
} .msg-avatar {
width: 28px !important;
height: 28px !important;
object-fit: cover;
object-position: 50% 8% !important;
border-radius: 50% !important;
background: #1a3fc4 !important;
}.cmplz-video.cmplz-iframe-styles{background-color:transparent}.cmplz-video.cmplz-hidden{visibility:hidden !important}.cmplz-blocked-content-notice{display:none}.cmplz-placeholder-parent{height:inherit}.cmplz-optin .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optin .cmplz-wp-video .cmplz-blocked-content-notice,.cmplz-optout .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optout .cmplz-wp-video .cmplz-blocked-content-notice{display:block}.cmplz-blocked-content-container,.cmplz-wp-video{animation-name:cmplz-fadein;animation-duration:600ms;background:#FFF;border:0;border-radius:3px;box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15);display:flex;justify-content:center;align-items:center;background-repeat:no-repeat !important;background-size:cover !important;height:inherit;position:relative}.cmplz-blocked-content-container.gmw-map-cover,.cmplz-wp-video.gmw-map-cover{max-height:100%;position:absolute}.cmplz-blocked-content-container.cmplz-video-placeholder,.cmplz-wp-video.cmplz-video-placeholder{padding-bottom:initial}.cmplz-blocked-content-container iframe,.cmplz-wp-video iframe{visibility:hidden;max-height:100%;border:0 !important}.cmplz-blocked-content-container .cmplz-custom-accept-btn,.cmplz-wp-video .cmplz-custom-accept-btn{white-space:normal;text-transform:initial;cursor:pointer;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:200px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-custom-accept-btn:focus,.cmplz-wp-video .cmplz-custom-accept-btn:focus{border:1px dotted #cecece}.cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-wp-video .cmplz-blocked-content-notice{white-space:normal;text-transform:initial;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:300px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links{display:block;margin-bottom:10px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links a,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links a{color:#fff}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body{display:block}.cmplz-blocked-content-container div div{display:none}.cmplz-wp-video .cmplz-placeholder-element{width:100%;height:inherit}@keyframes cmplz-fadein{from{opacity:0}to{opacity:1}}