.ar-chatbot, .ar-chatbot * { box-sizing: border-box; }
.ar-chatbot { -webkit-tap-highlight-color: transparent; }

.ar-chatbot{
  --ar-btn-bg: #111;
  --ar-btn-fg: #fff;
  --ar-panel-bg: #fff;
  --ar-soft: rgba(0,0,0,.10);
  --ar-shadow: rgba(0,0,0,.22);

  position: fixed !important;
  bottom: 18px !important;
  z-index: 999999 !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

.ar-chatbot[data-side="left"]{ left: 18px !important; right: auto !important; }
.ar-chatbot[data-side="right"]{ right: 18px !important; left: auto !important; }

.ar-chatbot__fab{
  width: 58px !important;
  height: 58px !important;
  border-radius: 999px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 14px 35px rgba(0,0,0,.20) !important;
  background: var(--ar-btn-bg) !important;
  color: var(--ar-btn-fg) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  transition: transform .15s ease, box-shadow .15s ease;
}

.ar-chatbot__fab:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 45px rgba(0,0,0,.26) !important;
}

.ar-chatbot__panel{
  width: 360px !important;
  height: 520px !important;
  background: var(--ar-panel-bg) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 50px var(--ar-shadow) !important;
  overflow: hidden !important;
  display: none;
  margin-bottom: 12px !important;
  border: 1px solid var(--ar-soft) !important;
  transform-origin: bottom left;
}

.ar-chatbot.is-open .ar-chatbot__panel{
  display: flex !important;
  flex-direction: column !important;
}

.ar-chatbot.is-open .ar-chatbot__fab{
  display: none !important;
}

.ar-chatbot__header{
  padding: 14px 14px 12px 14px !important;
  background: #0f0f10 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.ar-chatbot__title{
  font-weight: 650 !important;
  font-size: 14px !important;
}

.ar-chatbot__subtitle{
  font-size: 12px !important;
  opacity: .85 !important;
  margin-top: 2px !important;
}

.ar-chatbot__close{
  border: none !important;
  background: transparent !important;
  color: #fff !important;
  cursor: pointer !important;
  font-size: 18px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
}

.ar-chatbot__close:hover{
  background: rgba(255,255,255,.12) !important;
}

.ar-chatbot__messages{
  padding: 14px !important;
  overflow: auto !important;
  flex: 1 !important;
  background: #fafafa !important;
}

.ar-chatbot__msg{
  display: flex !important;
  margin: 10px 0 !important;
}

.ar-chatbot__msg--user{ justify-content: flex-end !important; }
.ar-chatbot__msg--assistant{ justify-content: flex-start !important; }

.ar-chatbot__bubble{
  max-width: 82% !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  background: #fff !important;
}

.ar-chatbot__msg--user .ar-chatbot__bubble{
  background: #111 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.08) !important;
}

.ar-chatbot__composer{
  display: flex !important;
  gap: 10px !important;
  padding: 12px !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
  background: #fff !important;
}

.ar-chatbot__input{
  flex: 1 !important;
  height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  outline: none !important;
  background: #fff !important;
  color: #111 !important;
}

.ar-chatbot__send{
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  border: none !important;
  cursor: pointer !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

@media (max-width: 480px){
  .ar-chatbot{ left: 12px !important; right: 12px !important; bottom: 12px !important; }
  .ar-chatbot__panel{ width: auto !important; height: min(78vh, 560px) !important; }
  .ar-chatbot__fab{ width: 56px !important; height: 56px !important; }
}