.wdcb, .wdcb *{
box-sizing:border-box !important;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif !important;
-webkit-font-smoothing:antialiased;
}
.wdcb{
overflow:visible !important;
--wdcb-brand:#00B87A;
--wdcb-brand-2:#0CEE94;
--wdcb-grad:linear-gradient(135deg,#00B87A,#0CEE94);
--wdcb-fg:#22303F;
--wdcb-card:#fff;
--wdcb-muted:#EEF1F5;
--wdcb-muted-fg:#6B7A8D;
--wdcb-border:#DDE3EA;
position:fixed;
right:20px;
bottom:20px;
z-index:2147483000;
} .wdcb button,
.wdcb a,
.wdcb input,
.wdcb textarea{
-webkit-appearance:none !important;
appearance:none !important; -webkit-clip-path:none !important;
clip-path:none !important;
-webkit-mask:none !important;
mask:none !important;
filter:none !important;
font-family:inherit !important;
text-decoration:none !important;
text-transform:none !important;
letter-spacing:normal !important;
text-shadow:none !important;
box-shadow:none !important; overflow:visible !important;
min-width:0 !important;
max-width:none !important;
min-height:0 !important;
float:none !important;
transform:none;
margin:0;
}
.wdcb, .wdcb *{ overflow-wrap:break-word; } .wdcb button::before,
.wdcb button::after,
.wdcb a::before,
.wdcb a::after,
.wdcb button:hover::before,
.wdcb button:hover::after,
.wdcb a:hover::before,
.wdcb a:hover::after{
content:none !important;
display:none !important;
background:none !important;
} .wdcb .wdcb-fab{
box-sizing:border-box !important;
-webkit-clip-path:none !important;
clip-path:none !important;
width:56px !important; height:56px !important;
min-width:56px !important; min-height:56px !important;
flex:0 0 auto !important;
border-radius:50% !important;
padding:0 !important; margin:0 !important;
background:var(--wdcb-grad); background-image:var(--wdcb-grad) !important;
color:#fff !important; border:none !important; cursor:pointer;
display:flex !important; align-items:center !important; justify-content:center !important;
position:relative !important;
overflow:visible !important;
box-shadow:0 10px 15px -3px rgba(0,0,0,.18), 0 4px 6px -4px rgba(0,0,0,.14) !important;
transition:transform .2s ease;
}
.wdcb .wdcb-fab:hover{ transform:scale(1.05); }
.wdcb .wdcb-fab .wdcb-ico{ width:24px !important; height:24px !important; }
.wdcb .wdcb-fab .wdcb-avatar{
width:38px !important; height:38px !important;
border-radius:50% !important; object-fit:cover; display:block;
max-width:none !important; padding:0 !important; margin:0 !important; border:none !important;
}
.wdcb.is-open .wdcb-fab{ display:none !important; }
.wdcb .wdcb-dot{
position:absolute !important; top:-5px !important; right:-5px !important;
box-sizing:border-box !important;
min-width:20px !important; height:20px !important;
padding:0 5px !important; border-radius:999px !important;
background:#fff !important; color:var(--wdcb-brand) !important;
font-size:11px !important; font-weight:600 !important; line-height:1 !important;
display:flex !important; align-items:center !important; justify-content:center !important;
border:1px solid rgba(0,0,0,.08) !important;
box-shadow:0 2px 6px rgba(0,0,0,.2) !important;
z-index:2 !important;
}
.wdcb-dot.is-hidden{ display:none; } .wdcb-nudge{
position:absolute; right:68px; bottom:10px; white-space:nowrap;
background:var(--wdcb-card); color:var(--wdcb-fg);
border:1px solid var(--wdcb-border); border-radius:999px;
padding:8px 14px; font-size:13px; font-weight:600; line-height:1;
box-shadow:0 8px 24px rgba(16,24,40,.14); cursor:pointer;
opacity:0; transform:translateX(6px); pointer-events:none;
transition:opacity .2s ease, transform .2s ease;
}
.wdcb-nudge::after{
content:""; position:absolute; right:-5px; bottom:12px; width:10px; height:10px;
background:var(--wdcb-card);
border-right:1px solid var(--wdcb-border); border-bottom:1px solid var(--wdcb-border);
transform:rotate(-45deg);
}
.wdcb-nudge.is-on{ opacity:1; transform:translateX(0); pointer-events:auto; }
.wdcb.is-open .wdcb-nudge{ opacity:0; pointer-events:none; } .wdcb-panel{
position:absolute; right:0; bottom:-10px;
width:min(380px, calc(100vw - 40px));
height:min(650px, calc(100vh - 40px));
background:var(--wdcb-card); border:1px solid var(--wdcb-border);
border-radius:16px; box-shadow:0 25px 50px -12px rgba(0,0,0,.25);
display:none; flex-direction:column; overflow:hidden;
}
.wdcb.is-open .wdcb-panel{ display:flex; }
.wdcb-head{
background:var(--wdcb-grad); color:#fff;
padding:12px 16px; flex:0 0 auto;
display:flex; align-items:center; justify-content:space-between;
}
.wdcb-head-left{ display:flex; align-items:center; gap:8px; }
.wdcb-head-avatar{ width:26px; height:26px; border-radius:50%; object-fit:cover; display:block; }
.wdcb-head-title{ font-size:14px; font-weight:600; }
.wdcb .wdcb-head-close{
background:none !important; border:none !important; color:#fff !important; opacity:.8;
cursor:pointer; padding:2px !important; margin:0;
display:flex !important; align-items:center; justify-content:center;
}
.wdcb-head-close:hover{ opacity:1; }
.wdcb-head-close svg{ width:16px; height:16px; }
.wdcb-body{
flex:1 1 auto; min-height:0; overflow-y:auto; padding:12px;
display:flex; flex-direction:column; gap:10px;
}
.wdcb-body::-webkit-scrollbar{ width:6px; }
.wdcb-body::-webkit-scrollbar-thumb{ background:var(--wdcb-border); border-radius:99px; }
.wdcb-row{ display:flex; }
.wdcb-row.is-user{ justify-content:flex-end; }
.wdcb-row.is-bot{ justify-content:flex-start; }
.wdcb .wdcb-msg{
max-width:85%; border-radius:16px; padding:8px 12px;
font-size:14px !important; line-height:1.45 !important;
white-space:pre-wrap; overflow-wrap:anywhere;
}
.wdcb-row.is-user .wdcb-msg{ background:var(--wdcb-brand); color:#fff; border-bottom-right-radius:4px; }
.wdcb-row.is-bot .wdcb-msg{ background:var(--wdcb-muted); color:var(--wdcb-fg); border-bottom-left-radius:4px; }
.wdcb-row.is-error .wdcb-msg{ background:#FDECEC; color:#8A2E2E; border-bottom-left-radius:4px; }
.wdcb-typing{
background:var(--wdcb-muted); border-radius:16px; border-bottom-left-radius:4px;
padding:10px 13px; display:inline-flex; gap:4px; align-self:flex-start;
}
.wdcb-typing span{
width:5px; height:5px; border-radius:50%; background:var(--wdcb-muted-fg);
opacity:.5; animation:wdcbBounce 1.1s ease-in-out infinite;
}
.wdcb-typing span:nth-child(2){ animation-delay:.15s; }
.wdcb-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes wdcbBounce{
0%,60%,100%{ transform:translateY(0); opacity:.5; }
30%{ transform:translateY(-3px); opacity:1; }
}
.wdcb-suggest{
display:flex; flex-wrap:wrap; gap:6px; padding:8px 12px 10px; flex:0 0 auto;
background:var(--wdcb-card); border-top:1px solid var(--wdcb-border);
position:relative; z-index:1;
}
.wdcb .wdcb-chip{ display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border:1px solid var(--wdcb-brand) !important;
border-width:1px !important;
background:var(--wdcb-card) !important;
color:var(--wdcb-brand) !important;
font-size:11px !important;
line-height:1.2 !important;
padding:6px 12px !important;
border-radius:999px !important;
font-weight:500 !important;
cursor:pointer;
width:auto !important;
height:auto !important;
vertical-align:middle !important;
opacity:.9;
transition:opacity .2s;
}
.wdcb .wdcb-chip:hover{ opacity:1; }
.wdcb-foot{
flex:0 0 auto; display:flex; align-items:center; gap:6px;
padding:10px; border-top:1px solid var(--wdcb-border);
}
.wdcb .wdcb-input{
flex:1 1 auto; resize:none;
border:1px solid var(--wdcb-border) !important;
border-radius:999px !important;
padding:8px 14px !important;
font-size:12px !important;
line-height:1.4 !important;
height:auto !important;
max-height:80px;
outline:none;
color:var(--wdcb-fg) !important;
background:var(--wdcb-card) !important;
}
.wdcb-input:focus{ border-color:var(--wdcb-brand); }
.wdcb .wdcb-send{
flex:0 0 auto; width:34px !important; height:34px !important; border-radius:50% !important;
padding:0 !important; margin:0 !important; border:none !important;
background:var(--wdcb-brand) !important; color:#fff !important;
display:flex !important; align-items:center !important; justify-content:center !important;
cursor:pointer; transition:opacity .2s;
}
.wdcb-send:hover{ opacity:.9; }
.wdcb-send:disabled{ opacity:.4; cursor:not-allowed; }
.wdcb-send svg{ width:14px; height:14px; }
.wdcb-fine{
font-size:10.5px; color:var(--wdcb-muted-fg); text-align:center;
padding:0 12px 10px;
} @media (max-width:480px){
.wdcb{ right:12px; bottom:20px; }
.wdcb-nudge{ font-size:12px; padding:7px 12px; right:62px; }
.wdcb-panel{
width:calc(100vw - 24px);
height:min(560px, calc(100dvh - 96px));
max-height:calc(100dvh - 96px);
right:-4px; bottom:0;
}
.wdcb-head{ padding:14px 16px; }
.wdcb-head-close{ width:44px; height:44px; padding:8px !important; opacity:1; }
} .wdcb .wdcb-link{
display:inline-flex !important;
align-items:center !important;
vertical-align:middle !important;
border-width:0 !important;
margin:4px 4px 0 0;
padding:4px 10px !important;
border-radius:999px !important;
background:var(--wdcb-brand) !important;
color:#fff !important;
font-size:12px !important;
font-weight:600 !important;
border:none !important;
}
.wdcb .wdcb-link:hover{ opacity:.9; color:#fff !important; } .wdcb-cards{
display:flex;
flex-direction:column;
gap:8px;
width:100%;
max-width:85%;
}
.wdcb .wdcb-card{
display:flex !important;
color:var(--wdcb-fg) !important;
align-items:center;
gap:10px;
padding:8px;
border:1px solid var(--wdcb-border);
border-radius:14px;
background:var(--wdcb-card);
text-decoration:none !important;
color:var(--wdcb-fg) !important;
transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.wdcb-card:hover{
border-color:var(--wdcb-brand);
transform:translateY(-1px);
box-shadow:0 6px 16px -8px rgba(16,24,40,.35);
}
.wdcb-card-img{
flex:0 0 auto;
width:56px; height:56px;
border-radius:10px;
object-fit:cover;
display:block;
background:var(--wdcb-muted);
}
.wdcb-card-img.is-empty{ display:block; }
.wdcb-card-info{
flex:1 1 auto;
min-width:0;
display:flex;
flex-direction:column;
gap:2px;
}
.wdcb-card-cat{
font-size:11px;
color:var(--wdcb-muted-fg);
text-transform:uppercase;
letter-spacing:.04em;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.wdcb-card-price{
font-size:15px;
font-weight:700;
color:var(--wdcb-brand);
line-height:1.2;
}
.wdcb-card-out{
font-size:11px;
font-weight:600;
color:#8A2E2E;
}
.wdcb-card-go{
flex:0 0 auto;
font-size:22px;
line-height:1;
color:var(--wdcb-muted-fg);
padding-right:4px;
}
.wdcb-card:hover .wdcb-card-go{ color:var(--wdcb-brand); } .wdcb-lead{
display:flex;
flex-direction:column;
gap:8px;
width:100%;
max-width:85%;
padding:12px;
border:1px solid var(--wdcb-border);
border-radius:16px;
border-bottom-left-radius:4px;
background:var(--wdcb-card);
}
.wdcb-lead-title{
font-size:13px;
font-weight:700;
color:var(--wdcb-fg);
}
.wdcb .wdcb-lead-input{
width:100% !important;
border:1px solid var(--wdcb-border) !important;
border-radius:10px !important;
padding:9px 12px !important;
font-size:13px !important;
line-height:1.3 !important;
height:auto !important;
color:var(--wdcb-fg) !important;
background:var(--wdcb-card) !important;
outline:none;
}
.wdcb-lead-input:focus{ border-color:var(--wdcb-brand); }
.wdcb .wdcb-lead-send{
width:100% !important;
border:none !important;
border-radius:999px !important;
padding:10px 16px !important;
background:var(--wdcb-grad);
background-image:var(--wdcb-grad) !important;
color:#fff !important;
font-size:13px !important;
font-weight:600 !important;
height:auto !important;
cursor:pointer;
transition:opacity .2s;
}
.wdcb-lead-send:hover{ opacity:.92; }
.wdcb-lead-send:disabled{ opacity:.5; cursor:not-allowed; }
.wdcb-lead-err{
font-size:12px;
color:#8A2E2E;
}
.wdcb-lead-err:empty{ display:none; }
.wdcb-lead-note{
font-size:10.5px;
color:var(--wdcb-muted-fg);
line-height:1.35;
}
.wdcb-lead-area{
resize:vertical;
min-height:62px;
max-height:140px;
line-height:1.4;
font-family:inherit !important;
}