.supportChatWidget{position:fixed;right:18px;bottom:18px;z-index:1200}

.supportChatFab{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  width:46px;
  height:46px;
  padding:0;
  border:0;
  border-radius:50%;
  background:linear-gradient(135deg,#b8c59a,#8b9a63);
  color:#1f2618;
  box-shadow:0 10px 22px rgba(62,74,42,.18);
  cursor:pointer;
}

.supportChatFabAvatar{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  flex:0 0 34px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
  overflow:hidden !important;
  border:2px solid rgba(62,74,42,.18);
  background:#eef2e3;
  aspect-ratio:1 / 1;
}

.supportChatThought{
  position:absolute;
  right:58px;
  bottom:6px;
  max-width:300px;
  padding:.85rem .7rem;
  background:#f3f5ec;
  color:#1f2618;
  border:1px solid rgba(62,74,42,.16);
  border-radius:16px;
  box-shadow:0 10px 24px rgba(62,74,42,.14);
  font-size:.82rem;
  line-height:1.3;
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}

.supportChatThought::after{
  content:"";
  position:absolute;
  right:-8px;
  bottom:14px;
  width:14px;
  height:14px;
  background:#f3f5ec;
  border-right:1px solid rgba(62,74,42,.16);
  border-bottom:1px solid rgba(62,74,42,.16);
  transform:rotate(-45deg);
}

.supportChatThought.is-visible{
  opacity:1;
  transform:translateY(0);
}

.supportChatPanel{
  position:absolute;
  right:0;
  bottom:64px;
  width:min(92vw,390px);
  height:min(72vh,560px);
  background:#e6e9d8;
  border:1px solid rgba(62,74,42,.16);
  border-radius:20px;
  box-shadow:0 18px 46px rgba(62,74,42,.16);
  display:none;
  overflow:hidden;
}
.supportChatPanel.is-open{display:flex;flex-direction:column}

.supportChatHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1rem .85rem;
  background:linear-gradient(135deg,#c4d0a7,#97a66e);
  color:#1f2618;
}
.supportChatHeaderMain{
  display:flex !important;
  align-items:center !important;
  gap:.75rem !important;
  min-width:0;
  flex:1 1 auto;
}
.supportChatHeaderText{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.supportChatHeader strong{display:block;line-height:1.1}
.supportChatHeader small{display:block;opacity:.82;margin-top:.2rem;line-height:1.2}
.supportChatHeaderMain .supportChatAvatar{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
  flex:0 0 42px !important;
  border:2px solid rgba(62,74,42,.22);
  background:#eef2e3;
  overflow:hidden !important;
  aspect-ratio:1 / 1;
}
.supportChatHeader img{width:auto;height:auto}
.supportChatClose{
  border:0;
  background:transparent;
  color:#1f2618;
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
  flex:0 0 auto;
}

.supportChatMessages{
  flex:1;
  overflow:auto;
  padding:1rem;
  background:linear-gradient(180deg,#eef2e3,#e6e9d8);
}
.supportChatMsg{display:flex;margin-bottom:.85rem}
.supportChatMsg.is-user{justify-content:flex-end}
.supportChatBubble{
  max-width:86%;
  padding:.78rem .9rem;
  border-radius:16px;
  background:#dce4c8;
  color:#1f2618;
  white-space:pre-wrap;
  line-height:1.45;
  border:1px solid rgba(62,74,42,.08);
}
.supportChatMsg.is-user .supportChatBubble{
  background:#c8d69a;
  color:#1f2618;
  font-weight:600;
}
.supportChatBubble.is-typing{opacity:.75;font-style:italic}

.supportChatForm{
  border-top:1px solid rgba(62,74,42,.10);
  padding:.85rem;
  background:#dde4ce;
}
.supportChatForm textarea{
  width:100%;
  resize:none;
  border-radius:14px;
  border:1px solid rgba(62,74,42,.16);
  padding:.85rem .95rem;
  background:#f3f5ec;
  color:#1f2618;
  outline:none;
}
.supportChatForm textarea:focus{
  border-color:#7e8b5a;
  box-shadow:0 0 0 3px rgba(126,139,90,.12);
}
.supportChatActions{
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  margin-top:.75rem;
}
.supportChatGhost,.supportChatSend{
  border:0;
  border-radius:12px;
  padding:.78rem 1rem;
  font-weight:700;
  cursor:pointer;
}
.supportChatGhost{
  background:#edf2e3;
  color:#2f3b1c;
  border:1px solid rgba(62,74,42,.10);
}
.supportChatSend{
  background:#8b9a63;
  color:#f8faf2;
  flex:1;
}

@media (max-width:640px){
  .supportChatWidget{right:12px;bottom:12px}
  .supportChatFab{
    width:42px;
    height:42px;
  }
  .supportChatFabAvatar{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    flex:0 0 30px !important;
  }
  .supportChatThought{
    right:50px;
    bottom:2px;
    max-width:180px;
    font-size:.85rem;
    padding:.6rem .75rem;
  }
  .supportChatPanel{width:min(96vw,390px);height:min(76vh,560px)}
  .supportChatHeaderMain .supportChatAvatar{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    min-height:38px !important;
    max-height:38px !important;
    flex:0 0 38px !important;
  }
}