@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
#dc-chatbot,
#dc-chatbot * {
box-sizing: border-box !important;
font-family: 'Poppins', sans-serif !important;
-webkit-tap-highlight-color: transparent;
}
#dc-chatbot {
position: fixed !important;
right: 22px !important;
bottom: 62px !important;
z-index: 2147483000 !important;
font-size: 14px !important;
line-height: 1.4 !important;
}
.lcd-floating-actions {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.lcd-floating-button {
border: 0 !important;
border-radius: 999px !important;
background: linear-gradient(135deg, var(--lcd-primary), #d6007b) !important;
color: #fff !important;
min-height: 58px !important;
padding: 10px 18px 10px 10px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
box-shadow: 0 18px 45px rgba(247,37,154,.36) !important;
cursor: pointer !important;
font-weight: 700 !important;
appearance: none !important;
-webkit-appearance: none !important;
}
.lcd-floating-dot {
width: 38px !important;
height: 38px !important;
border-radius: 50% !important;
background: rgba(255,255,255,.18) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: 700 !important;
color: #fff !important;
}
.lcd-floating-dot svg,
.lcd-brand-icon svg {
display: block !important;
}
.lcd-floating-text {
font-weight: 700 !important;
color: #fff !important;
white-space: nowrap !important;
}
.lcd-panel {
display: none !important;
width: 380px !important;
max-width: calc(100vw - 28px) !important;
max-height: calc(100vh - 28px) !important;
max-height: calc(100dvh - 28px) !important;
background: #f7f7f8 !important;
border: 1px solid rgba(255,255,255,.72) !important;
border-radius: 26px !important;
box-shadow: 0 22px 70px rgba(0,0,0,.35) !important;
overflow: hidden !important;
}
#dc-chatbot.lcd-open .lcd-panel { display: block !important; }
#dc-chatbot.lcd-open .lcd-floating-actions { display: none !important; }
.lcd-header {
background: rgba(43,43,47,.98) !important;
padding: 16px 18px !important;
border-bottom: 3px solid var(--lcd-primary) !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.lcd-brand-icon {
width: 42px !important;
height: 42px !important;
border-radius: 50% !important;
background: linear-gradient(135deg,var(--lcd-primary),#d6007b) !important;
color:#fff !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-weight:700 !important;
font-size:18px !important;
flex: 0 0 auto !important;
}
.lcd-brand-text { flex: 1 !important; min-width: 0 !important; }
.lcd-title { color:#fff !important; font-size:18px !important; line-height:1.1 !important; font-weight:700 !important; }
.lcd-subtitle { color:rgba(255,255,255,.74) !important; font-size:12px !important; margin-top:4px !important; font-weight:400 !important; }
.lcd-close {
width:34px !important;
height:34px !important;
border:0 !important;
border-radius:50% !important;
background:rgba(255,255,255,.10) !important;
color:#fff !important;
font-size:24px !important;
line-height:30px !important;
cursor:pointer !important;
padding: 0 !important;
}
.lcd-body {
padding: 16px 16px 18px !important;
max-height: calc(100vh - 128px) !important;
max-height: calc(100dvh - 128px) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.lcd-top-whatsapp {
display: block !important;
background:#25D366 !important;
color:#fff !important;
text-align:center !important;
text-decoration:none !important;
border-radius:14px !important;
padding:11px 12px !important;
margin: 0 0 14px !important;
font-weight:700 !important;
}
.lcd-progress {
height: 4px !important;
background: #eee !important;
border-radius: 99px !important;
margin-bottom: 16px !important;
overflow: hidden !important;
}
.lcd-progress span {
display: block !important;
height: 100% !important;
width: 20% !important;
background: var(--lcd-primary) !important;
border-radius: 99px !important;
transition: width .25s ease !important;
}
.lcd-message { margin: 10px 0 !important; }
.lcd-user {
margin: 10px 0 10px auto !important;
width: fit-content !important;
max-width: 88% !important;
background:linear-gradient(135deg,var(--lcd-primary),#f52aa0) !important;
color:#fff !important;
border-radius:999px !important;
padding:10px 16px !important;
font-weight:600 !important;
box-shadow:0 10px 26px rgba(247,37,154,.24) !important;
}
.lcd-step-card {
position:relative !important;
background:var(--lcd-dark) !important;
color:#fff !important;
border-radius:18px !important;
padding:18px 16px 16px !important;
margin:22px 0 16px !important;
border-left:5px solid var(--lcd-primary) !important;
box-shadow:0 12px 35px rgba(0,0,0,.14) !important;
}
.lcd-step-label {
display:inline-block !important;
background:rgba(247,37,154,.25) !important;
border:1px solid rgba(247,37,154,.5) !important;
color:#fff !important;
border-radius:999px !important;
padding:4px 10px !important;
font-size:11px !important;
font-weight:700 !important;
margin-bottom:10px !important;
}
.lcd-step-card h3 {
margin:0 !important;
color:#fff !important;
font-size:17px !important;
line-height:1.35 !important;
font-weight:700 !important;
}
.lcd-options { display:grid !important; gap:9px !important; }
.lcd-option {
width:100% !important;
text-align:left !important;
border:1px solid rgba(247,37,154,.24) !important;
background:#fff !important;
color:#202026 !important;
border-radius:14px !important;
padding:12px 14px !important;
cursor:pointer !important;
font-size:14px !important;
font-weight:600 !important;
appearance: none !important;
-webkit-appearance: none !important;
touch-action: manipulation !important;
}
.lcd-form { display:none !important; gap:10px !important; }
.lcd-form.lcd-form-visible { display:grid !important; }
.lcd-form input,
.lcd-form textarea {
width:100% !important;
border:1px solid rgba(0,0,0,.12) !important;
background:#fff !important;
border-radius:12px !important;
padding:12px 14px !important;
color:#222 !important;
font-size:16px !important;
outline:none !important;
appearance: none !important;
-webkit-appearance: none !important;
}
.lcd-form textarea { min-height:88px !important; resize:vertical !important; }
.lcd-consent {
display:flex !important;
align-items:flex-start !important;
gap:8px !important;
font-size:11px !important;
color:#555 !important;
line-height:1.35 !important;
}
.lcd-consent input {
width:auto !important;
margin-top:2px !important;
appearance: checkbox !important;
-webkit-appearance: checkbox !important;
}
.lcd-submit,
.lcd-whatsapp {
border:0 !important;
border-radius:12px !important;
background:linear-gradient(135deg,var(--lcd-primary),#d6007b) !important;
color:#fff !important;
padding:13px 14px !important;
text-align:center !important;
text-decoration:none !important;
font-weight:700 !important;
cursor:pointer !important;
font-size:14px !important;
}
.lcd-whatsapp {
background:#25D366 !important;
display:block !important;
}
.lcd-form-status {
font-size:12px !important;
color:#333 !important;
min-height:18px !important;
}
@media (max-width: 767px) {
#dc-chatbot {
right: 12px !important;
bottom: calc(52px + env(safe-area-inset-bottom)) !important;
left: auto !important;
top: auto !important;
}
.lcd-floating-actions {
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
}
.lcd-floating-button {
width: auto !important;
min-width: 0 !important;
height: 58px !important;
min-height: 58px !important;
padding: 10px 16px 10px 10px !important;
border-radius: 999px !important;
justify-content: center !important;
}
.lcd-floating-text {
display: inline-block !important;
font-size: 14px !important;
}
.lcd-panel {
position: fixed !important;
right: 8px !important;
left: 8px !important;
bottom: calc(52px + env(safe-area-inset-bottom)) !important;
width: auto !important;
max-width: none !important;
max-height: calc(100vh - 96px) !important;
max-height: calc(100dvh - 96px - env(safe-area-inset-bottom)) !important;
border-radius: 22px !important;
}
.lcd-body {
max-height: calc(100vh - 188px) !important;
max-height: calc(100dvh - 188px - env(safe-area-inset-bottom)) !important;
padding: 14px !important;
}
.lcd-header { padding: 14px 16px !important; }
.lcd-step-card h3 { font-size: 16px !important; }
.lcd-option { padding: 12px 13px !important; }
} .lcd-body {
touch-action: pan-y !important;
}
.lcd-option,
.lcd-floating-button,
.lcd-close {
user-select: none !important;
-webkit-user-select: none !important;
} .lcd-form-actions{
display:flex !important;
gap:10px !important;
flex-wrap:wrap !important;
}
.lcd-reset{
flex:1 !important;
border:1px solid rgba(0,0,0,.12) !important;
background:#fff !important;
color:#222 !important;
border-radius:12px !important;
padding:13px 14px !important;
text-align:center !important;
font-weight:700 !important;
cursor:pointer !important;
font-size:14px !important;
}
.lcd-submit{
flex:1 !important;
} #dc-chatbot button,
#dc-chatbot input,
#dc-chatbot textarea,
#dc-chatbot a {
font: inherit !important;
}
#dc-chatbot button {
outline: none !important;
text-transform: none !important;
}
#dc-chatbot svg {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
overflow: visible !important;
} @supports not (bottom: env(safe-area-inset-bottom)) {
@media (max-width: 767px) {
#dc-chatbot {
bottom: 52px !important;
}
.lcd-panel {
bottom: 52px !important;
}
}
} @supports not (height: 100dvh) {
.lcd-panel {
max-height: calc(100vh - 28px) !important;
}
.lcd-body {
max-height: calc(100vh - 128px) !important;
}
@media (max-width: 767px) {
.lcd-panel {
max-height: calc(100vh - 96px) !important;
}
.lcd-body {
max-height: calc(100vh - 188px) !important;
}
}
}