/* Chatbot dung chung trang tra cuu benh */
.chatbot {
  position: fixed;
  right: 18px;
  bottom: 88px;
  z-index: 80;
  font-family: var(--sans, system-ui, sans-serif);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* FAB */
.chatbot__fab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .72rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #1a2e05, #365314);
  color: #f0fce0;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(26, 46, 5, .4);
  transition: transform .16s, box-shadow .16s, background .16s;
}
.chatbot__fab:hover {
  background: linear-gradient(135deg, #365314, #4d7c0f);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(26, 46, 5, .45);
}
.chatbot__fab:active { transform: translateY(0); }
.chatbot__fab:focus-visible {
  outline: 3px solid #a3e635;
  outline-offset: 3px;
}
.chatbot__fab-icon {
  display: inline-flex;
  animation: chatbot-pulse 2.4s ease-in-out infinite;
}
.chatbot.is-open .chatbot__fab { display: none; }

@keyframes chatbot-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* Panel */
.chatbot__panel {
  display: none;
  width: min(370px, calc(100vw - 24px));
  height: min(520px, calc(100dvh - 110px));
  margin-bottom: .7rem;
  background: #fff;
  border: 1px solid #d9f99d;
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(26, 46, 5, .28);
  overflow: hidden;
  flex-direction: column;
  transform-origin: bottom right;
}
.chatbot.is-open .chatbot__panel {
  display: flex;
  animation: chatbot-in .18s ease-out;
}
@keyframes chatbot-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.chatbot__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .8rem;
  background: linear-gradient(135deg, #f7fee7, #ecfccb);
  border-bottom: 1px solid #d9f99d;
  flex-shrink: 0;
}
.chatbot__avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #1a2e05;
  color: #a3e635;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  flex-shrink: 0;
}
.chatbot__head-text { flex: 1; min-width: 0; }
.chatbot__head-text strong {
  display: block;
  font-size: .9rem;
  color: #1a2e05;
  line-height: 1.2;
}
.chatbot__status {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  color: #365314;
}
.chatbot__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .5);
  animation: chatbot-online 2s infinite;
}
@keyframes chatbot-online {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .45); }
  70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.chatbot__close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #365314;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.chatbot__close:hover { background: rgba(77, 124, 15, .12); }
.chatbot__close:focus-visible { outline: 2px solid #4d7c0f; outline-offset: 1px; }

/* Messages */
.chatbot__messages {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .8rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: #f7f8f6;
  -webkit-overflow-scrolling: touch;
}
.chatbot__msg {
  max-width: 90%;
  padding: .55rem .72rem;
  border-radius: 14px;
  font-size: .86rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  animation: chatbot-msg-in .14s ease-out;
}
@keyframes chatbot-msg-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.chatbot__msg--bot {
  align-self: flex-start;
  background: #fff;
  border: 1px solid #e4ebe7;
  color: #18241d;
  border-bottom-left-radius: 4px;
}
.chatbot__msg--user {
  align-self: flex-end;
  background: #1a2e05;
  color: #f0fce0;
  border-bottom-right-radius: 4px;
}
.chatbot__msg--error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #7f1d1d;
}
.chatbot__link {
  color: #1a2e05;
  font-weight: 600;
  word-break: break-all;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chatbot__link:hover { color: #4d7c0f; }

/* Gợi ý nhanh */
.chatbot__suggests {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding-top: .15rem;
}
.chatbot__suggests.is-empty { display: none; }
.chatbot__chip {
  padding: .38rem .7rem;
  font-size: .78rem;
  font-weight: 600;
  font-family: inherit;
  color: #1a2e05;
  background: #fff;
  border: 1px solid #cdebcf;
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .12s;
}
.chatbot__chip:hover {
  background: #f7fee7;
  border-color: #4d7c0f;
  transform: translateY(-1px);
}
.chatbot__chip:active { transform: translateY(0); }
.chatbot__chip:focus-visible { outline: 2px solid #4d7c0f; outline-offset: 2px; }

/* Typing indicator */
.chatbot__typing {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: .45rem .65rem;
  background: #fff;
  border: 1px solid #e4ebe7;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.chatbot__typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9db0a5;
  animation: chatbot-bounce 1.1s infinite ease-in-out;
}
.chatbot__typing-dot:nth-child(2) { animation-delay: .15s; }
.chatbot__typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes chatbot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .5; }
  40% { transform: translateY(-4px); opacity: 1; }
}

/* Form */
.chatbot__form {
  display: flex;
  gap: .45rem;
  padding: .6rem;
  border-top: 1px solid #e4ebe7;
  background: #fff;
  flex-shrink: 0;
}
.chatbot__input {
  flex: 1;
  min-width: 0;
  padding: .65rem .8rem;
  font-size: 16px; /* tranh zoom iOS */
  font-family: inherit;
  border: 1px solid #d9f99d;
  border-radius: 12px;
  outline: none;
  color: #18241d;
  background: #fafaf8;
}
.chatbot__input:focus {
  background: #fff;
  border-color: #4d7c0f;
  box-shadow: 0 0 0 3px rgba(77, 124, 15, .12);
}
.chatbot__input::placeholder { color: #8a9a90; }
.chatbot__send {
  padding: 0 1.05rem;
  border: 0;
  border-radius: 12px;
  background: #4d7c0f;
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, opacity .12s;
}
.chatbot__send:hover { background: #365314; }
.chatbot__send:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.chatbot__send:focus-visible { outline: 2px solid #a3e635; outline-offset: 2px; }

/* Mobile: day du man hinh duoi */
@media (max-width: 560px) {
  .chatbot { right: 10px; bottom: 10px; align-items: stretch; width: fit-content; }
  .chatbot__fab { align-self: flex-end; }
  .chatbot__panel {
    width: 100%;
    height: min(480px, calc(100dvh - 88px));
    margin-bottom: .5rem;
  }
  .chatbot__fab-label { font-size: .84rem; display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .chatbot__fab-icon,
  .chatbot__status-dot,
  .chatbot__typing-dot { animation: none; }
  .chatbot.is-open .chatbot__panel,
  .chatbot__msg { animation: none; }
}