.smk-chatbot-widget{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:9999;
  font-family:'Inter', system-ui, -apple-system, sans-serif;
}

/* Tombol Aksi Mengambang */
.smk-chatbot-fab{
  height:56px;
  min-width:56px;
  padding:0 18px;
  border-radius:999px;
  border:none;
  background:linear-gradient(135deg,#16a34a 0%,#10b981 100%);
  color:#ffffff;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  box-shadow:0 8px 32px rgba(22,163,74,0.35), 0 2px 8px rgba(0,0,0,0.1);
  display:flex;
  align-items:center;
  gap:8px;
  transition:all 0.3s ease;
}

.smk-chatbot-fab:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 12px 40px rgba(22,163,74,0.4), 0 4px 12px rgba(0,0,0,0.15);
}

.smk-chatbot-fab i{
  font-size:20px;
}

.smk-chatbot-widget[data-open="1"] .smk-chatbot-fab{
  display:none !important;
}

/* Kontainer Panel */
.smk-chatbot-panel{
  display:none;
  width:380px;
  max-width:calc(100vw - 40px);
  margin-bottom:16px;
  border-radius:24px;
  border:1px solid #e2e8f0;
  background:#ffffff;
  box-shadow:0 25px 80px rgba(0,0,0,0.15), 0 10px 30px rgba(0,0,0,0.1);
  overflow:hidden;
  animation:chatbot-slide-up 0.3s ease-out;
}

@keyframes chatbot-slide-up{
  from{
    opacity:0;
    transform:translateY(20px) scale(0.95);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* Kontainer Utama Chat */
.smk-chatbot{
  display:flex;
  flex-direction:column;
  height:480px;
  max-height:70vh;
}

/* Kepala/Header */
.smk-chatbot-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  background:linear-gradient(135deg,#16a34a 0%,#10b981 100%);
  color:white;
}

.smk-chatbot-head-left{
  display:flex;
  align-items:center;
  gap:12px;
}

.smk-chatbot-avatar{
  width:40px;
  height:40px;
  border-radius:12px;
  background:rgba(255,255,255,0.2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

.smk-chatbot-head-info{
  display:flex;
  flex-direction:column;
}

.smk-chatbot-title{
  font-weight:700;
  font-size:16px;
  color:white;
}

.smk-chatbot-status{
  font-size:12px;
  color:rgba(255,255,255,0.8);
  display:flex;
  align-items:center;
  gap:6px;
}

.smk-chatbot-status::before{
  content:'';
  width:8px;
  height:8px;
  background:#86efac;
  border-radius:50%;
  animation:pulse-dot 2s infinite;
}

@keyframes pulse-dot{
  0%,100%{opacity:1;}
  50%{opacity:0.5;}
}

.smk-chatbot-close{
  appearance:none;
  border:none;
  background:rgba(255,255,255,0.15);
  cursor:pointer;
  font-size:16px;
  line-height:1;
  padding:8px 10px;
  border-radius:10px;
  color:white;
  transition:all 0.2s;
}

.smk-chatbot-close:hover{
  background:rgba(255,255,255,0.25);
  transform:scale(1.05);
}

/* Area Pesan */
.smk-chatbot-messages{
  padding:20px;
  overflow-y:auto;
  flex:1;
  background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Gelembung Pesan */
.smk-chatbot-msg{
  max-width:85%;
  padding:12px 16px;
  border-radius:18px;
  font-size:14px;
  line-height:1.5;
  animation:msg-fade-in 0.3s ease-out;
}

@keyframes msg-fade-in{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

.smk-chatbot-msg.bot{
  align-self:flex-start;
  background:#f1f5f9;
  color:#334155;
  border-bottom-left-radius:6px;
}

.smk-chatbot-msg.user{
  align-self:flex-end;
  background:linear-gradient(135deg,#16a34a 0%,#10b981 100%);
  color:white;
  border-bottom-right-radius:6px;
}

/* Indikator Mengetik */
.smk-chatbot-typing{
  display:flex;
  gap:4px;
  padding:16px;
  align-self:flex-start;
}

.smk-chatbot-typing span{
  width:8px;
  height:8px;
  background:#cbd5e1;
  border-radius:50%;
  animation:typing-bounce 1.4s infinite ease-in-out;
}

.smk-chatbot-typing span:nth-child(1){animation-delay:0s;}
.smk-chatbot-typing span:nth-child(2){animation-delay:0.2s;}
.smk-chatbot-typing span:nth-child(3){animation-delay:0.4s;}

@keyframes typing-bounce{
  0%,80%,100%{transform:translateY(0);}
  40%{transform:translateY(-6px);}
}

/* Tombol Balas Cepat */
.smk-chatbot-quick-replies{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0 20px 16px;
  background:#ffffff;
}

.smk-chatbot-quick-btn{
  padding:8px 14px;
  border-radius:20px;
  border:1.5px solid #e2e8f0;
  background:white;
  color:#475569;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:all 0.2s;
}

.smk-chatbot-quick-btn:hover{
  border-color:#16a34a;
  color:#16a34a;
  background:#f0fdf4;
}

/* Form Input */
.smk-chatbot-form{
  display:flex;
  gap:10px;
  padding:16px 20px;
  border-top:1px solid #e2e8f0;
  background:#ffffff;
}

.smk-chatbot-input{
  flex:1;
  border-radius:14px;
  border:2px solid #e2e8f0;
  padding:12px 16px;
  font-size:14px;
  outline:none;
  transition:all 0.2s;
  background:#f8fafc;
}

.smk-chatbot-input:focus{
  border-color:#16a34a;
  background:white;
  box-shadow:0 0 0 4px rgba(22,163,74,0.1);
}

.smk-chatbot-input::placeholder{
  color:#94a3b8;
}

.smk-chatbot-send{
  width:48px;
  height:48px;
  border-radius:14px;
  border:none;
  background:linear-gradient(135deg,#16a34a 0%,#10b981 100%);
  color:#ffffff;
  font-size:18px;
  cursor:pointer;
  transition:all 0.2s;
  display:flex;
  align-items:center;
  justify-content:center;
}

.smk-chatbot-send:hover{
  transform:scale(1.05);
  box-shadow:0 4px 12px rgba(22,163,74,0.3);
}

.smk-chatbot-send:active{
  transform:scale(0.95);
}

/* Responsif Mobile — lebih baik */
@media(max-width:480px){
  .smk-chatbot-widget{
    right:0;
    bottom:0;
    left:0;
  }
  
  .smk-chatbot-panel{
    width:100vw;
    max-height:100vh;
    border-radius:0;
    margin-bottom:0;
    border:0;
    max-width:100vw;
  }
  
  .smk-chatbot{
    height:100vh;
    max-height:100vh;
  }
  
  .smk-chatbot-fab{
    height:52px;
    min-width:52px;
    padding:0 14px;
    position:fixed;
    bottom:16px;
    right:16px;
  }
  
  .smk-chatbot-fab span{
    display:none;
  }
  
  .smk-chatbot-messages{
    padding:16px;
    flex:1;
  }
  
  .smk-chatbot-msg{
    max-width:92%;
    font-size:15px;
    padding:12px 14px;
  }

  .smk-chatbot-form{
    padding:12px 16px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .smk-chatbot-input{
    padding:14px 16px;
    font-size:16px; /* mencegah zoom iOS */
  }
  
  .smk-chatbot-head{
    padding:14px 16px;
    padding-top:calc(14px + env(safe-area-inset-top, 0px));
  }

  .smk-chatbot-quick-questions{
    padding:0 16px 12px;
  }
}

@media(min-width:481px) and (max-width:768px){
  .smk-chatbot-panel{
    width:360px;
    max-width:calc(100vw - 32px);
  }
  
  .smk-chatbot{
    height:440px;
    max-height:70vh;
  }
}