.chatbot-icon {
  position: fixed; right: 20px; bottom: 98px; width: 72px; height: 72px;
  border: 3px solid #f5c542; border-radius: 50%; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 30% 25%, #7a5ad6 0%, #4a2fa0 55%, #2e1a70 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(30,16,80,.55), inset 0 2px 6px rgba(255,255,255,.35);
  transition: transform .25s ease, box-shadow .25s ease; z-index: 1000;
  animation: float 3s ease-in-out infinite;
}
.chatbot-icon:hover { transform: scale(1.1) rotate(-4deg); box-shadow: 0 12px 28px rgba(30,16,80,.7), inset 0 2px 6px rgba(255,255,255,.35); animation-play-state: paused; }
.chatbot-icon svg { width: 44px; height: 44px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.chatbot-icon::before {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid #f5c542; animation: pulse 2.2s infinite; pointer-events: none;
}
.chatbot-icon .online-dot {
  position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #b9a4ff; border: 2px solid #fff; box-shadow: 0 0 6px #b9a4ff;
}
.chatbot-icon .eye { animation: blink 4s infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }


.chat-window {
  position: fixed; right: 24px; bottom: 176px; width: 340px; height: 430px;
  background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.35);
  display: none; flex-direction: column; overflow: hidden; z-index: 1001;
  font: 14px "Segoe UI", sans-serif;
}
.chat-window.open { display: flex; }
.chat-header { background: #4a2fa0; color: #fff; padding: 12px 14px; font-weight: 600; display: flex; justify-content: space-between; }
.chat-header button { background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; }
.chat-messages { flex: 1; overflow-y: auto; padding: 12px; background: #f5f3fa; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 80%; padding: 8px 12px; border-radius: 12px; line-height: 1.35; }
.msg.bot { background: #fff; align-self: flex-start; border: 1px solid #e0dcee; }
.msg.user { background: #4a2fa0; color: #fff; align-self: flex-end; }
.chat-form { display: flex; border-top: 1px solid #ddd; }
.chat-form input { flex: 1; border: none; padding: 12px; font-size: 14px; outline: none; }
.chat-form button { border: none; background: #4a2fa0; color: #fff; padding: 0 16px; cursor: pointer; }

.msg { white-space: pre-line; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 95%; }
.chip {
  border: 1px solid #4a2fa0; background: #fff; color: #2e1a70; border-radius: 16px;
  padding: 6px 12px; font: 600 13px "Segoe UI", sans-serif; cursor: pointer; text-decoration: none;
}
.chip:hover { background: #4a2fa0; color: #fff; }
.chip.disabled { border-color: #bbb; color: #888; cursor: default; background: #f0f0f0; }
.chip.disabled:hover { background: #f0f0f0; color: #888; }
.chat-window { height: 520px; width: 360px; }

/* department KPI cards (compact) */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.card {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  background: #fff; border: 1px solid #d5cdea; border-top: 3px solid #4a2fa0; border-radius: 8px;
  padding: 10px 2px; cursor: pointer; font-family: "Segoe UI", sans-serif;
  box-shadow: 0 1px 3px rgba(0,0,0,.1); transition: transform .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 3px 8px rgba(74,47,160,.3); }
.card-icon { font-size: 22px; line-height: 1; }
.card-name { font-weight: 700; font-size: 12px; color: #2e1a70; line-height: 1.1; }
.dept-kpis { display: flex; gap: 8px; align-self: flex-start; }
.dept-kpis div {
  display: flex; flex-direction: column; align-items: center; min-width: 70px; padding: 6px 10px;
  background: #fff; border: 1px solid #d5cdea; border-top: 3px solid #4a2fa0; border-radius: 8px;
  font-size: 11px; color: #666;
}
.dept-kpis b { font-size: 18px; color: #4a2fa0; }

/* long Hindi / Malayalam text must wrap instead of scrolling sideways */
.chat-messages { overflow-x: hidden; }
.msg { overflow-wrap: anywhere; }
.chip { max-width: 100%; white-space: normal; text-align: left; }
.dept-kpis { flex-wrap: wrap; }
.chat-form input { min-width: 0; }

/* language bar: switch language at any point */
.lang-bar { display: flex; gap: 6px; padding: 6px 10px; background: #ebe7f5; border-bottom: 1px solid #d5cdea; }
.lang-bar button {
  flex: 1; border: 1px solid #4a2fa0; background: #fff; color: #2e1a70; border-radius: 12px;
  padding: 3px 4px; font: 600 12px "Segoe UI", sans-serif; cursor: pointer;
}
.lang-bar button.active, .lang-bar button:hover { background: #4a2fa0; color: #fff; }

/* header buttons: clear chat and close */
.header-actions { display: flex; gap: 4px; align-items: center; }
.chat-header button { width: 28px; height: 28px; border-radius: 50%; line-height: 1; padding: 0; }
.chat-header button:hover { background: rgba(255,255,255,.2); }
#chat-reset { font-size: 20px; }

/* the photo a citizen attached, shown in the chat */
.msg.photo-msg { padding: 6px; }
.photo-msg img { display: block; max-width: 100%; max-height: 190px; border-radius: 8px; cursor: zoom-in; background: #fff; }
.photo-name { font-size: 11px; opacity: .85; margin-top: 4px; overflow-wrap: anywhere; }

/* voice input: microphone button between the text box and Send */
.chat-form .mic { background: #fff; color: #4a2fa0; padding: 0 12px; border-left: 1px solid #e3dff0; display: flex; align-items: center; }
.chat-form .mic[hidden] { display: none; }
.chat-form .mic svg { width: 22px; height: 22px; }
.chat-form .mic:hover { background: #ece8f6; }
.chat-form .mic.listening { background: #c62828; color: #fff; animation: listening 1.2s ease-in-out infinite; }
@keyframes listening { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(255,255,255,.0); } 50% { box-shadow: inset 0 0 0 3px rgba(255,255,255,.55); } }

/* voice replies: speaker button in the header (on / muted) */
#chat-speaker[hidden] { display: none; }
#chat-speaker svg { width: 18px; height: 18px; }
#chat-speaker .spk-off, #chat-speaker[aria-pressed="false"] .spk-on { display: none; }
#chat-speaker[aria-pressed="false"] .spk-off { display: block; opacity: .8; }