.wdcb-wrap {
position: relative; border: 1px solid #e5e7eb;
border-radius: 16px;
max-width: 480px;
margin: 0 auto;
display: flex;
flex-direction: column;
height: 520px;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: #f9fafb;
}
.wdcb-header {
padding: 12px 16px;
background: #111827;
color: #fff;
font-weight: 600;
}
.wdcb-messages {
flex: 1;
padding: 12px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
}
.wdcb-msg {
max-width: 70%;
padding: 10px 14px;
border-radius: 18px;
font-size: 15px;
line-height: 1.4;
word-wrap: break-word;
white-space: pre-wrap;
}
.wdcb-msg.me {
align-self: flex-end;
background: #007aff;
color: #fff;
border-bottom-right-radius: 4px;
}
.wdcb-msg.them {
align-self: flex-start;
background: #e5e5ea;
color: #000;
border-bottom-left-radius: 4px;
}
.wdcb-form {
display: flex;
gap: 8px;
padding: 10px;
border-top: 1px solid #e5e7eb;
background: #fff;
}
.wdcb-form input {
flex: 1;
padding: 10px 12px;
border-radius: 20px;
border: 1px solid #d1d5db;
font-size: 15px;
}
.wdcb-form button {
padding: 10px 16px;
border: none;
border-radius: 20px;
background: #007aff;
color: #fff;
font-weight: 500;
cursor: pointer;
}
.wdcb-form button:hover { opacity: 0.9; } .wdcb-lead-overlay {
position: absolute;
inset: 0;
background: rgba(17, 24, 39, 0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 50;
}
.wdcb-lead-card {
width: 92%;
max-width: 380px;
background: #fff;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(0,0,0,.15);
padding: 16px;
display: grid;
gap: 10px;
}
.wdcb-lead-title {
font-weight: 700;
font-size: 16px;
}
#wdcb-lead-name,
#wdcb-lead-email,
#wdcb-lead-project {
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 10px;
}
#wdcb-lead-project { resize: vertical; }
#wdcb-lead-start {
padding: 10px 14px;
border: none;
border-radius: 10px;
background: #007aff;
color: #fff;
cursor: pointer;
}
#wdcb-lead-start:hover { opacity: .95; } .wdcb-msg-row {
display: flex;
align-items: flex-end;
margin-bottom: 6px;
} .wdcb-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
background: #d1d5db; color: #000;
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
margin: 0 6px;
} .wdcb-msg-row.me {
justify-content: flex-start;
}
.wdcb-msg-row.me .wdcb-avatar {
order: 0;
background: #a0aec0; }
.wdcb-msg-row.me .wdcb-msg {
order: 1;
background: #e5e5ea;
color: #000;
align-self: flex-start;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 18px;
} .wdcb-msg-row.them {
justify-content: flex-end;
}
.wdcb-msg-row.them .wdcb-avatar {
order: 1;
background: #2563eb; color: #fff;
}
.wdcb-msg-row.them .wdcb-msg {
order: 0;
background: #007aff;
color: #fff;
align-self: flex-end;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 18px;
} .wdcb-msg {
max-width: 65%;
padding: 8px 12px;
border-radius: 18px;
font-size: 15px;
line-height: 1.4;
}