/* WebDragon Chatbot — front-end widget.
   Everything themeable is a custom property set inline by PHP, so this file
   stays static and cacheable. Declarations are !important where a theme would
   otherwise reach in and restyle a generic button or textarea. */

.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;
}

/* --- theme armour -------------------------------------------------------
   Client themes style bare button/a/input elements, sometimes with
   !important. Anything that decides whether the widget is legible is pinned
   here; anything cosmetic is left to lose gracefully. */

.wdcb button,
.wdcb a,
.wdcb input,
.wdcb textarea{
  -webkit-appearance:none !important;
  appearance:none !important;
  /* Themes cut buttons into shapes with clip-path (a racing-style skew is a
     popular one). It reshapes our round launcher and, because clip-path also
     clips descendants, swallows the badge sitting outside it. */
  -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;
  /* The launcher's badge sits outside the button box; a theme's
     `overflow:hidden` on buttons clips it away. */
  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; }
/* Decorative shine and telemetry pseudo-elements themes attach to buttons. */
.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;
}

/* --- launcher ---------------------------------------------------------- */

.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; }

/* --- nudge bubble ------------------------------------------------------ */

.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; }

/* --- panel ------------------------------------------------------------- */

.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 is pinned because themes routinely set `button{display:block}`,
     which left-aligns the label inside the pill and throws off its height. */
  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;
}

/* --- small screens ----------------------------------------------------- */

@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; }
}

/* Product links the bot sends: shown as a button-ish chip, not a raw URL. */
.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; }

/* --- product cards ------------------------------------------------------ */

.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); }

/* --- inline contact form ------------------------------------------------ */

.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;
}