:root{
  --ckca-primary:#111111;
  --ckca-paper:#efefef;
  --ckca-ink:#111111;
  --ckca-muted:#5c5c5c;
  --ckca-line:#111111;
}

.ckca-floating,
.ckca-inline{
  font-family:Arial, Helvetica, sans-serif;
  letter-spacing:-.01em;
}

.ckca-floating{
  position:fixed;
  right:26px;
  bottom:26px;
  z-index:99999;
}

.ckca-bubble{
  border:1.5px solid #111;
  background:#111;
  color:#fff;
  border-radius:16px;
  padding:14px 18px;
  font-size:15px;
  font-weight:900;
  line-height:1;
  box-shadow:8px 8px 0 rgba(0,0,0,.16);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.ckca-bubble:before{content:'CS';display:inline-grid;place-items:center;width:30px;height:30px;margin-right:10px;border:1px solid #fff;border-radius:50%;font-size:11px;vertical-align:middle}
.ckca-bubble:hover{transform:translate(-2px,-2px);box-shadow:11px 11px 0 rgba(0,0,0,.18)}

.ckca-panel{
  width:390px;
  max-width:calc(100vw - 28px);
  background:#efefef;
  color:#111;
  border:1.5px solid #111;
  border-radius:0;
  box-shadow:12px 12px 0 rgba(0,0,0,.18);
  overflow:hidden;
  display:none;
}
.ckca-panel.open{display:block}
.ckca-inline .ckca-panel{display:block;width:100%;max-width:720px;box-shadow:none}

.ckca-head{
  background:#efefef;
  color:#111;
  padding:18px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1.5px solid #111;
}
.ckca-head strong{
  font-size:14px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:900;
}
.ckca-head strong:before{
  content:'CS';
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1.5px solid #111;
  border-radius:50%;
  margin-right:11px;
  font-size:11px;
  letter-spacing:0;
  vertical-align:middle;
}
.ckca-close{
  background:#111;
  border:1.5px solid #111;
  color:#fff;
  width:34px;
  height:34px;
  border-radius:50%;
  font-size:20px;
  line-height:28px;
  cursor:pointer;
}

.ckca-body{padding:18px 18px 20px;background:#efefef}
.ckca-msg{
  padding:13px 14px;
  border-radius:0;
  margin:10px 0;
  line-height:1.45;
  font-size:14px;
  border:1.5px solid #111;
}
.ckca-msg.agent{background:#fff;color:#111}
.ckca-msg.user{background:#111;color:#fff;margin-left:38px}

.ckca-lead{
  margin-top:14px;
  border-top:1.5px solid #111;
  padding-top:14px;
}
.ckca-lead input,
.ckca-ask input{
  width:100%;
  box-sizing:border-box;
  margin:7px 0;
  padding:13px 12px;
  border-radius:0;
  border:1.5px solid #111;
  background:#fff;
  color:#111;
  font-size:14px;
  outline:none;
}
.ckca-lead input:focus,
.ckca-ask input:focus{box-shadow:inset 0 0 0 2px #111}
.ckca-lead input::placeholder,
.ckca-ask input::placeholder{color:#6a6a6a}

.ckca-lead button,
.ckca-ask button{
  padding:13px 16px;
  border:1.5px solid #111;
  border-radius:0;
  background:#111;
  color:#fff;
  font-weight:900;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.08em;
  transition:background .18s ease, color .18s ease;
}
.ckca-lead button{width:100%;margin-top:6px}
.ckca-lead button:hover,
.ckca-ask button:hover{background:#fff;color:#111}

.ckca-log{
  max-height:330px;
  overflow:auto;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:#111 #ddd;
}
.ckca-ask{
  display:flex;
  gap:8px;
  margin-top:12px;
  padding-top:12px;
  border-top:1.5px solid #111;
}
.ckca-ask input{margin:0;min-width:0}
.ckca-ask button{width:auto;white-space:nowrap}

@media (max-width:600px){
  .ckca-floating{right:14px;bottom:14px}
  .ckca-panel{width:calc(100vw - 28px)}
  .ckca-head{padding:14px}
  .ckca-body{padding:14px}
  .ckca-ask{display:block}
  .ckca-ask button{width:100%;margin-top:8px}
}

.ckca-chat{display:flex;flex-direction:column;height:420px;min-height:0}
.ckca-log{flex:1;max-height:none;display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto;padding-bottom:8px}
.ckca-quick{display:flex;gap:6px;flex-wrap:wrap;border-top:1.5px solid #111;padding-top:10px;margin-top:8px}
.ckca-quick button{border:1.5px solid #111;background:#fff;color:#111;padding:8px 10px;border-radius:999px;font-size:12px;font-weight:800;cursor:pointer}
.ckca-quick button:hover{background:#111;color:#fff}
.ckca-msg.agent:contains('Thinking'){}