/* ============================================================
   XYLEM — Lead-Capture Chatbot Widget
   Uses the site's existing palette variables (--primary, --dark,
   --orange, --light, --text-dark, --border, --success) so it always
   tracks the live theme. No new brand colors are introduced.
   ============================================================ */

.xy-chat-launcher{
  position:fixed;
  bottom:28px;             /* WhatsApp button now sits bottom-left */
  right:28px;
  width:58px;
  height:58px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary) 0%,var(--dark) 100%) !important;
  border-color:transparent !important;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  cursor:pointer;
  box-shadow:0 6px 22px rgba(10,42,77,.35);
  z-index:9997;
  transition:transform .2s ease,box-shadow .2s ease;
  padding:0;
}
/* Note: the site's own global button reset (css/modern-ocean-colors.css) forces
   background/color on every <button> and <button>:hover with !important. This
   widget's controls are real <button> elements, so every color property below
   that needs to differ from that reset also carries !important, deliberately,
   to stay independent of load order. */
.xy-chat-launcher:hover{
  background:linear-gradient(135deg,var(--primary) 0%,var(--dark) 100%) !important;
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 10px 26px rgba(10,42,77,.42);
}
.xy-chat-launcher svg{ width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.xy-chat-launcher .xy-chat-close-ic{ display:none; }
.xy-chat-launcher.open .xy-chat-open-ic{ display:none; }
.xy-chat-launcher.open .xy-chat-close-ic{ display:block; }

.xy-chat-dot{
  position:absolute; top:-2px; right:-2px;
  width:16px;height:16px;border-radius:50%;
  background:var(--orange);
  border:2px solid #fff;
  box-shadow:0 0 0 rgba(63,169,245,.55);
  animation:xyChatPulse 2.2s infinite;
}
@keyframes xyChatPulse{
  0%{ box-shadow:0 0 0 0 rgba(63,169,245,.55); }
  70%{ box-shadow:0 0 0 10px rgba(63,169,245,0); }
  100%{ box-shadow:0 0 0 0 rgba(63,169,245,0); }
}

.xy-chat-teaser{
  position:fixed;
  bottom:36px;
  right:96px;
  max-width:230px;
  background:#fff;
  color:var(--text-dark);
  font-size:13px;
  line-height:1.45;
  padding:12px 14px;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(10,42,77,.18);
  z-index:9996;
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.xy-chat-teaser.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.xy-chat-teaser::after{
  content:'';
  position:absolute; right:14px; bottom:-6px;
  width:12px;height:12px;background:#fff;
  transform:rotate(45deg);
  box-shadow:2px 2px 4px rgba(10,42,77,.06);
}
.xy-chat-teaser button{
  position:absolute; top:4px; right:6px;
  background:none !important;border:none !important;color:#9AA9B8 !important;font-size:14px;cursor:pointer;line-height:1;padding:4px;
}
.xy-chat-teaser button:hover{ background:none !important;color:#5C7089 !important; }

.xy-chat-window{
  position:fixed;
  bottom:100px;
  right:28px;
  width:368px;
  max-width:calc(100vw - 32px);
  height:min(560px, calc(100vh - 200px));
  background:#fff;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(10,42,77,.28);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  z-index:9998;
  opacity:0;
  transform:translateY(16px) scale(.98);
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.xy-chat-window.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

@media (max-width:480px){
  .xy-chat-window{
    bottom:0; right:0; left:0; top:0;
    width:100%; max-width:100%; height:100%;
    border-radius:0;
  }
  .xy-chat-launcher{ bottom:24px; right:20px; }
  .xy-chat-teaser{ right:20px; bottom:92px; max-width:200px; }
}

.xy-chat-head{
  background:linear-gradient(135deg,var(--dark) 0%,var(--primary) 100%);
  color:#fff;
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  flex:none;
}
.xy-chat-head-avatar{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  font-size:19px;flex:none;
}
.xy-chat-head-txt{ flex:1; min-width:0; }
.xy-chat-head-txt strong{ display:block;font-size:14.5px;font-weight:700; }
.xy-chat-head-txt span{
  display:flex;align-items:center;gap:5px;
  font-size:11.5px;color:rgba(255,255,255,.8);margin-top:2px;
}
.xy-chat-head-txt span::before{
  content:'';width:7px;height:7px;border-radius:50%;background:#3ED598;
  box-shadow:0 0 0 2px rgba(62,213,152,.25);
}
.xy-chat-head-close{
  background:rgba(255,255,255,.12) !important;
  border:none !important;color:#fff !important;width:28px;height:28px;border-radius:50%;
  cursor:pointer;font-size:15px;line-height:1;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.xy-chat-head-close:hover{ background:rgba(255,255,255,.22) !important; }

.xy-chat-body{
  flex:1;
  overflow-y:auto;
  padding:16px;
  background:var(--light);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.xy-chat-body::-webkit-scrollbar{ width:6px; }
.xy-chat-body::-webkit-scrollbar-thumb{ background:#CBD8E6;border-radius:3px; }

.xy-msg{
  max-width:84%;
  padding:10px 13px;
  border-radius:14px;
  font-size:13.5px;
  line-height:1.55;
  white-space:pre-line;
  word-wrap:break-word;
  animation:xyMsgIn .22s ease;
}
@keyframes xyMsgIn{ from{ opacity:0;transform:translateY(6px); } to{ opacity:1;transform:translateY(0); } }
.xy-msg-bot{
  align-self:flex-start;
  background:#fff;
  color:var(--text-dark);
  border-bottom-left-radius:4px;
  box-shadow:0 1px 3px rgba(10,42,77,.08);
}
.xy-msg-user{
  align-self:flex-end;
  background:var(--primary);
  color:#fff;
  border-bottom-right-radius:4px;
}
.xy-msg-error{
  align-self:flex-start;
  background:#FDECEC;
  color:#B42318;
  border:1px solid #F7D2CF;
  border-bottom-left-radius:4px;
}

.xy-typing{
  align-self:flex-start;
  background:#fff;
  padding:12px 15px;
  border-radius:14px;
  border-bottom-left-radius:4px;
  box-shadow:0 1px 3px rgba(10,42,77,.08);
  display:flex;
  gap:4px;
}
.xy-typing span{
  width:6px;height:6px;border-radius:50%;background:#AEBBC9;
  animation:xyTypingBounce 1.1s infinite;
}
.xy-typing span:nth-child(2){ animation-delay:.15s; }
.xy-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes xyTypingBounce{
  0%,60%,100%{ transform:translateY(0);opacity:.5; }
  30%{ transform:translateY(-4px);opacity:1; }
}

.xy-chips{
  align-self:stretch;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:2px;
}
.xy-chip{
  background:#fff !important;
  border:1.5px solid var(--primary) !important;
  color:var(--primary) !important;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12.5px;
  font-weight:600;
  padding:8px 13px;
  border-radius:20px;
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.xy-chip:hover{ background:var(--primary) !important; color:#fff !important; border-color:var(--primary) !important; }
.xy-chip:disabled{ opacity:.5;cursor:default; }

.xy-chat-foot{
  flex:none;
  border-top:1px solid var(--border);
  padding:10px 12px;
  display:flex;
  gap:8px;
  align-items:flex-end;
  background:#fff;
}
.xy-chat-input{
  flex:1;
  border:1.5px solid var(--border);
  border-radius:20px;
  padding:10px 15px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13.5px;
  color:var(--text-dark);
  resize:none;
  max-height:80px;
  outline:none;
  transition:border-color .15s ease;
}
.xy-chat-input:focus{ border-color:var(--primary); }
.xy-chat-send{
  width:38px;height:38px;flex:none;
  border-radius:50%;
  background:var(--primary) !important;
  border:none;color:#fff !important;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}
.xy-chat-send:hover{ background:var(--orange-dark) !important; }
.xy-chat-send:disabled{ opacity:.45;cursor:default; }
.xy-chat-send svg{ width:17px;height:17px; }

.xy-chat-foot.xy-chat-foot-hidden{ display:none; }

.xy-chat-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:2px 0 0;
}
.xy-chat-btn{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12.5px;
  font-weight:700;
  padding:9px 14px;
  border-radius:9px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:none;
}
.xy-chat-btn-wa{ background:#25D366 !important;color:#fff !important; }
.xy-chat-btn-wa:hover{ background:#1FB855 !important; }
.xy-chat-btn-ghost{ background:var(--light) !important;color:var(--text-dark) !important;border:1px solid var(--border) !important; }
.xy-chat-btn-ghost:hover{ background:#fff !important; }

.xy-chat-note{
  font-size:11px;
  color:#8A9AAB;
  text-align:center;
  padding:4px 0 0;
}