:root{
  --saw-chat-blue:#0A1F44;
  --saw-chat-navy:#061A38;
  --saw-chat-gold:#D8A54C;
  --saw-chat-gold-dark:#B8872E;
  --saw-chat-cream:#F8F5EC;
  --saw-chat-gray:#667085;
}
.saw-chatbot,
.saw-chatbot *{box-sizing:border-box}
.saw-chatbot{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:9999;
  font-family:"Poppins","Inter","Segoe UI",Arial,sans-serif;
}
.saw-chatbot-button{
  position:relative;
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  border:1px solid rgba(216,165,76,.75);
  border-radius:22px;
  color:#fff;
  background:
    radial-gradient(circle at 30% 18%,rgba(216,165,76,.25),transparent 34%),
    linear-gradient(145deg,var(--saw-chat-blue),var(--saw-chat-navy));
  box-shadow:0 24px 58px rgba(6,26,56,.34);
  cursor:pointer;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.saw-chatbot-button:hover,
.saw-chatbot-button:focus-visible{
  transform:translateY(-4px) scale(1.03);
  border-color:var(--saw-chat-gold);
  box-shadow:0 30px 76px rgba(6,26,56,.42);
  outline:0;
}
.saw-chatbot-button:after{
  content:"Ask SAW GOLD";
  position:absolute;
  right:78px;
  top:50%;
  transform:translate(10px,-50%);
  min-width:max-content;
  padding:.62rem .84rem;
  border-radius:999px;
  color:var(--saw-chat-blue);
  background:#fff;
  border:1px solid rgba(216,165,76,.38);
  box-shadow:0 16px 42px rgba(10,31,68,.14);
  font-size:.78rem;
  font-weight:900;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease;
}
.saw-chatbot-button:hover:after,
.saw-chatbot-button:focus-visible:after{
  opacity:1;
  visibility:visible;
  transform:translate(0,-50%);
}
.saw-chatbot-pulse{
  position:absolute;
  inset:-9px;
  border-radius:28px;
  border:1px solid rgba(216,165,76,.42);
  animation:sawChatPulse 2.8s ease-in-out infinite;
}
.saw-chatbot-button-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(255,255,255,.06);
}
.saw-chatbot-button-icon img{
  width:38px;
  height:38px;
  object-fit:contain;
}
.saw-chatbot-button-label{display:none}

.saw-chatbot-window{
  position:fixed;
  right:24px;
  bottom:24px;
  width:430px;
  max-width:calc(100vw - 28px);
  height:700px;
  max-height:calc(100vh - 28px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:34px;
  color:var(--saw-chat-blue);
  background:
    radial-gradient(circle at 12% 18%,rgba(216,165,76,.14),transparent 28%),
    linear-gradient(180deg,#FFFCF5 0%,var(--saw-chat-cream) 100%);
  border:1px solid rgba(216,165,76,.58);
  box-shadow:0 30px 96px rgba(6,26,56,.34);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(26px) scale(.965);
  transition:opacity .32s ease,transform .32s ease,visibility .32s ease;
}
.saw-chatbot.is-open .saw-chatbot-window{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.saw-chatbot.is-open .saw-chatbot-button{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:scale(.9);
}

.saw-chatbot-header{
  position:relative;
  min-height:104px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.12rem 1.32rem;
  color:#fff;
  background:
    radial-gradient(circle at 18% 0,rgba(216,165,76,.17),transparent 34%),
    linear-gradient(135deg,#061A38 0%,#0A1F44 56%,#082955 100%);
}
.saw-chatbot-header:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,.08),transparent 38%);
  pointer-events:none;
}
.saw-chatbot-header:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:5px;
  background:linear-gradient(90deg,var(--saw-chat-gold),var(--saw-chat-gold-dark),transparent);
}
.saw-chatbot-brand{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:1.05rem;
  min-width:0;
}
.saw-chatbot-logo{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:18px;
  background:linear-gradient(145deg,#0B244E,#071936);
  border:2px solid rgba(216,165,76,.82);
  box-shadow:0 18px 38px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.10);
}
.saw-chatbot-logo img{
  width:46px;
  height:46px;
  object-fit:contain;
}
.saw-chatbot-brand strong{
  display:block;
  color:#fff;
  font-size:1.2rem;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-.035em;
  text-transform:none;
}
.saw-chatbot-brand small{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin-top:.45rem;
  color:rgba(255,255,255,.76);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:-.01em;
}
.saw-chatbot-brand small span{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#22C55E;
  box-shadow:0 0 0 5px rgba(34,197,94,.18);
}
.saw-chatbot-close{
  position:relative;
  z-index:1;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  font-size:1.1rem;
  transition:background .22s ease,color .22s ease,transform .22s ease;
}
.saw-chatbot-close:hover,
.saw-chatbot-close:focus-visible{
  transform:translateY(-2px);
  background:var(--saw-chat-gold);
  color:var(--saw-chat-blue);
  outline:0;
}

.saw-chatbot-intro{
  flex:0 0 auto;
  padding:.86rem 1.1rem .52rem;
}
.saw-chatbot-badge{
  display:inline-flex;
  align-items:center;
  gap:.62rem;
  padding:.54rem .82rem;
  margin-bottom:.56rem;
  border-radius:999px;
  color:rgba(10,31,68,.82);
  background:#fff;
  border:1px solid rgba(216,165,76,.38);
  box-shadow:0 12px 30px rgba(10,31,68,.05);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.saw-chatbot-badge i{color:var(--saw-chat-gold-dark);font-size:1rem}
.saw-chatbot-welcome-card{
  position:relative;
  padding:.95rem .95rem .9rem;
  overflow:hidden;
  border-radius:28px;
  text-align:center;
  background:#fff;
  border:1px solid rgba(10,31,68,.06);
  box-shadow:0 20px 54px rgba(10,31,68,.10);
  animation:sawChatMessage .38s ease both;
}
.saw-chatbot-welcome-card:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  background:linear-gradient(90deg,transparent,var(--saw-chat-gold),transparent);
}
.saw-chatbot-welcome-card h3{
  margin:0;
  color:var(--saw-chat-blue);
  font-size:1.34rem;
  line-height:1.1;
  font-weight:900;
  letter-spacing:-.045em;
  text-transform:none;
}
.saw-chatbot-welcome-card h3 span{color:var(--saw-chat-gold-dark)}
.saw-chatbot-divider{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.26rem;
  margin:1rem 0 .92rem;
  margin:.5rem 0 .48rem;
}
.saw-chatbot-divider i{
  display:block;
  height:2px;
  border-radius:999px;
  background:var(--saw-chat-gold);
}
.saw-chatbot-divider i:nth-child(1){width:42px}
.saw-chatbot-divider i:nth-child(2){width:30px;background:var(--saw-chat-gold-dark)}
.saw-chatbot-divider i:nth-child(3){width:10px}
.saw-chatbot-welcome-card p{
  max-width:330px;
  margin:0 auto .55rem;
  color:#42516A;
  font-size:.76rem;
  line-height:1.48;
  font-weight:500;
}
.saw-chatbot-welcome-card strong{
  display:block;
  color:var(--saw-chat-blue);
  font-size:.86rem;
  font-weight:900;
}

.saw-chatbot-messages{
  flex:1 1 auto;
  min-height:0;
  max-height:160px;
  overflow-y:auto;
  padding:.35rem 1.25rem .55rem;
  scroll-behavior:smooth;
}
.saw-chatbot-messages:empty{display:none}
.saw-chatbot.has-conversation .saw-chatbot-welcome-card{display:none}
.saw-chatbot-message{
  display:flex;
  margin-bottom:.75rem;
  animation:sawChatMessage .24s ease both;
}
.saw-chatbot-message.user{justify-content:flex-end}
.saw-chatbot-bubble{
  max-width:90%;
  border-radius:20px;
  padding:.8rem .92rem;
  font-size:.8rem;
  line-height:1.58;
  box-shadow:0 12px 26px rgba(10,31,68,.08);
}
.saw-chatbot-message.bot .saw-chatbot-bubble{
  color:var(--saw-chat-blue);
  background:#fff;
  border:1px solid rgba(216,165,76,.24);
  border-left:4px solid var(--saw-chat-gold);
}
.saw-chatbot-message.user .saw-chatbot-bubble{
  color:#fff;
  background:linear-gradient(135deg,var(--saw-chat-blue),#123B70);
  border:1px solid rgba(216,165,76,.18);
}
.saw-chatbot-bubble p{margin:0 0 .62rem}
.saw-chatbot-bubble p:last-child{margin-bottom:0}
.saw-chatbot-bubble a{
  color:var(--saw-chat-gold-dark);
  font-weight:850;
  text-decoration:none;
}

.saw-chatbot-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.42rem;
  margin-top:.7rem;
}
.saw-chatbot-actions a,
.saw-chatbot-actions button{
  display:inline-flex;
  align-items:center;
  gap:.32rem;
  padding:.48rem .68rem;
  border-radius:999px;
  border:1px solid rgba(216,165,76,.36);
  color:var(--saw-chat-blue);
  background:#fff;
  font-size:.7rem;
  font-weight:900;
  text-decoration:none;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.saw-chatbot-actions a:hover,
.saw-chatbot-actions button:hover{
  transform:translateY(-2px);
  background:#FFFCF5;
  border-color:var(--saw-chat-gold);
}
.saw-chatbot-actions .saw-whatsapp{
  color:var(--saw-chat-blue);
  background:linear-gradient(135deg,var(--saw-chat-gold),#C58E2D);
  border-color:transparent;
}

.saw-chatbot-quick-replies{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.5rem;
  padding:.42rem 1.1rem .62rem;
  background:transparent;
}
.saw-chatbot-quick-replies button{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.48rem;
  padding:.52rem .38rem;
  border:1px solid rgba(216,165,76,.48);
  border-radius:999px;
  color:var(--saw-chat-blue);
  background:#fff;
  box-shadow:0 10px 24px rgba(10,31,68,.045);
  font-size:.61rem;
  font-weight:900;
  letter-spacing:-.015em;
  transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.saw-chatbot-quick-replies button:before{
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  color:var(--saw-chat-blue);
  font-size:.95rem;
}
.saw-chatbot-quick-replies button[data-question*="Investment"]:before{content:"\f201"}
.saw-chatbot-quick-replies button[data-question*="Trading"]:before,
.saw-chatbot-quick-replies button[data-question*="Quotation"]:before{content:"\f51e"}
.saw-chatbot-quick-replies button[data-question*="Laboratory"]:before,
.saw-chatbot-quick-replies button[data-question*="Lab"]:before{content:"\f0c3"}
.saw-chatbot-quick-replies button[data-question*="Certificate"]:before{content:"\f058"}
.saw-chatbot-quick-replies button[data-question*="Logistics"]:before{content:"\f0d1"}
.saw-chatbot-quick-replies button[data-question*="Portal"]:before{content:"\f109"}
.saw-chatbot-quick-replies button:hover,
.saw-chatbot-quick-replies button:focus-visible{
  transform:translateY(-3px);
  background:linear-gradient(135deg,var(--saw-chat-gold),#C58E2D);
  border-color:transparent;
  box-shadow:0 16px 34px rgba(216,165,76,.20);
  outline:0;
}

.saw-chatbot-support{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.55rem;
  padding:.05rem 1.1rem .62rem;
}
.saw-chatbot-support a{
  min-height:78px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  padding:.75rem .35rem;
  border-radius:18px;
  color:var(--saw-chat-blue);
  background:#fff;
  border:1px solid rgba(10,31,68,.06);
  box-shadow:0 14px 34px rgba(10,31,68,.08);
  text-decoration:none;
  font-size:.62rem;
  font-weight:850;
  text-align:center;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.saw-chatbot-support a:after{
  content:"Speak With Us";
  display:block;
  color:var(--saw-chat-gray);
  font-size:.54rem;
  font-weight:600;
  line-height:1.2;
}
.saw-chatbot-support a:first-child:after{content:"Chat With Us"}
.saw-chatbot-support a:last-child:after{content:"Send Us A Message"}
.saw-chatbot-support a:hover{
  transform:translateY(-5px);
  border-color:rgba(216,165,76,.42);
  box-shadow:0 18px 42px rgba(10,31,68,.13);
}
.saw-chatbot-support i{
  color:var(--saw-chat-gold-dark);
  font-size:1.22rem;
}
.saw-chatbot-support a:first-child i{color:#25D366;font-size:1.42rem}

.saw-chatbot-input{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:.78rem;
  margin:0 1.1rem;
  padding:.38rem .38rem .38rem .9rem;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(216,165,76,.38);
  box-shadow:inset 0 0 0 5px rgba(216,165,76,.08),0 14px 32px rgba(10,31,68,.06);
}
.saw-chatbot-input input{
  width:100%;
  min-width:0;
  min-height:40px;
  border:0;
  outline:0;
  color:var(--saw-chat-blue);
  background:transparent;
  font-size:.86rem;
  font-weight:500;
}
.saw-chatbot-input input::placeholder{color:#7A8495}
.saw-chatbot-input:focus-within{
  border-color:var(--saw-chat-gold);
  box-shadow:inset 0 0 0 5px rgba(216,165,76,.12),0 16px 42px rgba(216,165,76,.14);
}
.saw-chatbot-input button{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:0;
  border-radius:50%;
  color:var(--saw-chat-blue);
  background:linear-gradient(135deg,var(--saw-chat-gold),#C58E2D);
  box-shadow:0 12px 28px rgba(216,165,76,.28);
  font-size:1.08rem;
  transition:transform .22s ease,box-shadow .22s ease;
}
.saw-chatbot-input button:hover,
.saw-chatbot-input button:focus-visible{
  transform:translateY(-2px) rotate(-8deg);
  box-shadow:0 16px 36px rgba(216,165,76,.34);
  outline:0;
}
.saw-chatbot-note{
  flex:0 0 auto;
  max-width:320px;
  margin:.44rem auto .6rem;
  color:#526078;
  font-size:.72rem;
  line-height:1.45;
  text-align:center;
  font-weight:600;
}
.saw-chatbot-note i{color:var(--saw-chat-blue);margin-right:.28rem}

.saw-chatbot-typing{
  display:inline-flex;
  align-items:center;
  gap:.32rem;
  min-width:58px;
}
.saw-chatbot-typing span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--saw-chat-gold);
  animation:sawChatTyping 1s ease-in-out infinite;
}
.saw-chatbot-typing span:nth-child(2){animation-delay:.15s}
.saw-chatbot-typing span:nth-child(3){animation-delay:.3s}

.saw-chatbot-lead-form,
.saw-chatbot-cert-form{
  display:grid;
  gap:.55rem;
  margin-top:.75rem;
}
.saw-chatbot-lead-form input,
.saw-chatbot-lead-form select,
.saw-chatbot-lead-form textarea,
.saw-chatbot-cert-form input{
  width:100%;
  border:1px solid rgba(10,31,68,.12);
  border-radius:14px;
  padding:.66rem .78rem;
  color:var(--saw-chat-blue);
  background:#F8FAFC;
  font-size:.78rem;
  outline:0;
}
.saw-chatbot-lead-form textarea{min-height:74px;resize:vertical}
.saw-chatbot-lead-form button,
.saw-chatbot-cert-form button{
  border:0;
  border-radius:999px;
  padding:.68rem .9rem;
  color:var(--saw-chat-blue);
  background:linear-gradient(135deg,var(--saw-chat-gold),#C58E2D);
  font-weight:900;
}

@keyframes sawChatPulse{
  0%,100%{opacity:.18;transform:scale(.96)}
  50%{opacity:.75;transform:scale(1.12)}
}
@keyframes sawChatMessage{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes sawChatTyping{
  0%,80%,100%{transform:translateY(0);opacity:.35}
  40%{transform:translateY(-4px);opacity:1}
}

@media(max-height:760px) and (min-width:768px){
  .saw-chatbot-window{height:calc(100vh - 28px)}
  .saw-chatbot-header{min-height:98px;padding:1rem 1.25rem}
  .saw-chatbot-logo{width:56px;height:56px}
  .saw-chatbot-logo img{width:44px;height:44px}
  .saw-chatbot-welcome-card{padding:1.2rem 1rem}
  .saw-chatbot-support a{min-height:88px}
}
@media(max-width:767px){
  .saw-chatbot{
    right:12px;
    bottom:82px;
  }
  .saw-chatbot-button{
    width:62px;
    height:62px;
    border-radius:20px;
  }
  .saw-chatbot-button:after{display:none}
  .saw-chatbot-window{
    right:3vw;
    bottom:82px;
    width:94vw;
    height:82vh;
    max-height:calc(100vh - 96px);
    border-radius:28px;
  }
  .saw-chatbot-header{
    min-height:82px;
    padding:.82rem .9rem;
  }
  .saw-chatbot-logo{
    width:48px;
    height:48px;
    border-radius:16px;
  }
  .saw-chatbot-logo img{
    width:38px;
    height:38px;
  }
  .saw-chatbot-brand{gap:.8rem}
  .saw-chatbot-brand strong{font-size:.95rem}
  .saw-chatbot-brand small{font-size:.66rem}
  .saw-chatbot-close{width:38px;height:38px}
  .saw-chatbot-intro{padding:.72rem .8rem .42rem}
  .saw-chatbot-badge{
    padding:.46rem .65rem;
    font-size:.58rem;
    margin-bottom:.48rem;
  }
  .saw-chatbot-welcome-card{
    padding:.82rem .72rem .76rem;
    border-radius:20px;
  }
  .saw-chatbot-welcome-card h3{font-size:1.16rem}
  .saw-chatbot-divider{margin:.38rem 0 .34rem}
  .saw-chatbot-welcome-card p{
    display:none;
  }
  .saw-chatbot-welcome-card strong{font-size:.75rem}
  .saw-chatbot-messages{padding:.2rem .9rem .45rem}
  .saw-chatbot-quick-replies{
    grid-template-columns:repeat(2,1fr);
    padding:.35rem .8rem .52rem;
    gap:.4rem;
  }
  .saw-chatbot-quick-replies button{
    min-height:36px;
    font-size:.58rem;
    padding:.42rem .3rem;
  }
  .saw-chatbot-support{
    grid-template-columns:repeat(2,1fr);
    padding:.05rem .8rem .52rem;
    gap:.4rem;
  }
  .saw-chatbot-support a{
    min-height:54px;
    border-radius:16px;
    gap:.15rem;
  }
  .saw-chatbot-support a:after{display:none}
  .saw-chatbot-support i{font-size:1.05rem}
  .saw-chatbot-support a:first-child i{font-size:1.18rem}
  .saw-chatbot-input{
    margin:0 .8rem;
    padding:.32rem .32rem .32rem .72rem;
  }
  .saw-chatbot-input input{min-height:38px;font-size:.72rem}
  .saw-chatbot-input button{width:42px;height:42px}
  .saw-chatbot-note{
    margin:.38rem auto .52rem;
    padding:0 .7rem;
    font-size:.58rem;
  }
}
@media(max-width:380px){
  .saw-chatbot-welcome-card p{display:none}
  .saw-chatbot-support a:after{display:none}
  .saw-chatbot-support a{min-height:58px}
}
@media(prefers-reduced-motion:reduce){
  .saw-chatbot *,
  .saw-chatbot *:before,
  .saw-chatbot *:after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}
