#support-chatbot-toggle {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, #00478d 0%, #005eb8 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 71, 141, .35);
  transition: transform .2s, box-shadow .2s;
}
#support-chatbot-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(0, 71, 141, .45); }
#support-chatbot-toggle .material-symbols-outlined { font-size: 28px; transition: transform .25s; }
#support-chatbot.open #support-chatbot-toggle .icon-open  { display: none; }
#support-chatbot:not(.open) #support-chatbot-toggle .icon-close { display: none; }

#support-chatbot-panel {
  display: none; flex-direction: column;
  position: absolute; bottom: 68px; right: 0;
  width: 380px; height: 520px; max-height: calc(100vh - 100px);
  background: #fff; border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .15);
  overflow: hidden;
  animation: supportChatbotSlideUp .25s ease-out;
}
#support-chatbot.open #support-chatbot-panel { display: flex; }

@keyframes supportChatbotSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.support-chatbot-header {
  background: linear-gradient(135deg, #00478d 0%, #005eb8 100%);
  color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.support-chatbot-header .material-symbols-outlined { font-size: 28px; }
.support-chatbot-header-text { flex: 1; }
.support-chatbot-header-text h3 { margin: 0; font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700; }
.support-chatbot-header-text p  { margin: 2px 0 0; font-size: 11px; opacity: .8; }
#support-chatbot-close {
  background: none; border: none; color: #fff; cursor: pointer; padding: 4px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
#support-chatbot-close:hover { background: rgba(255,255,255,.15); }

#support-chatbot-messages {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  background: #f3faff;
}
#support-chatbot-messages::-webkit-scrollbar { width: 5px; }
#support-chatbot-messages::-webkit-scrollbar-thumb { background: #c2c6d4; border-radius: 4px; }

.support-chatbot-msg {
  max-width: 85%; padding: 10px 14px; font-size: 13px; line-height: 1.5;
  word-wrap: break-word; animation: supportChatbotSlideUp .2s ease-out;
}
.support-chatbot-msg.bot {
  align-self: flex-start; background: #fff; color: #1a1c22;
  border-radius: 14px 14px 14px 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.support-chatbot-msg.user {
  align-self: flex-end; background: #00478d; color: #fff;
  border-radius: 14px 14px 4px 14px;
}
.support-chatbot-msg a { color: #005eb8; text-decoration: underline; }
.support-chatbot-msg.user a { color: #b3d4ff; }

#support-chatbot-replies {
  padding: 8px 16px 6px; display: flex; flex-wrap: wrap; gap: 6px;
  flex-shrink: 0; max-height: 160px; overflow-y: auto;
}
.support-chatbot-reply-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; font-size: 12px; font-family: 'Inter', sans-serif;
  border: 1.5px solid #005eb8; border-radius: 20px;
  background: #fff; color: #005eb8; cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.support-chatbot-reply-btn:hover { background: #005eb8; color: #fff; }
.support-chatbot-reply-btn .material-symbols-outlined { font-size: 16px; }

.support-chatbot-form {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-top: 1px solid #e4e8f0; flex-shrink: 0; background: #fff;
}
#support-chatbot-input {
  flex: 1; border: 1.5px solid #d0d5dd; border-radius: 20px; padding: 8px 14px;
  font-size: 13px; font-family: 'Inter', sans-serif; outline: none;
  transition: border-color .15s;
}
#support-chatbot-input:focus { border-color: #005eb8; }
#support-chatbot-input::placeholder { color: #9ca3af; }
.support-chatbot-send {
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, #00478d 0%, #005eb8 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.support-chatbot-send:hover { opacity: .9; }
.support-chatbot-send .material-symbols-outlined { font-size: 18px; }

@media (max-width: 480px) {
  #support-chatbot { bottom: 14px !important; right: 14px !important; }
  #support-chatbot-toggle { width: 50px; height: 50px; }
  #support-chatbot-toggle .material-symbols-outlined { font-size: 24px; }
  #support-chatbot-panel {
    width: calc(100vw - 28px); height: calc(100vh - 140px);
    bottom: 62px; right: 0;
  }
}