/* Positioning */
#chatbot {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2000;
  font-family: "Inter", sans-serif;
}

/* Toggle button (robot head only, no circle) */
#chatbot-toggle {
  background: none;
  border: none;
  font-size: 42px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: transform 0.2s ease;
}
#chatbot-toggle:hover { transform: scale(1.2); }

/* Chat window */
#chatbot-window {
  position: absolute;
  bottom: 60px;
  right: 0;
  width: 280px;   /* reduced width */
  height: 380px;  /* reduced height */
  background: #0f1523;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
  overflow: hidden;

  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(.95);
  transition: all .3s ease;
}
#chatbot-window.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Header with close button */
.chatbot-header {
  background: #0d1320;
  color: #9afcff;
  padding: 10px 14px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.chatbot-header button {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #ff4fb0;
}

/* Messages area */
#chatbot-messages {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.message {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: .9rem;
  line-height: 1.4;
}
.message.bot {
  background: #1a2238;
  color: #e9f2ff;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.message.user {
  background: #00eaff;
  color: #001018;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

/* Typing dots */
.typing-indicator {
  display: inline-flex;
  gap: 3px;
}
.typing-indicator span {
  width: 6px;
  height: 6px;
  background: #9afcff;
  border-radius: 50%;
  animation: blink 1.2s infinite;
}
.typing-indicator span:nth-child(2){animation-delay:.2s}
.typing-indicator span:nth-child(3){animation-delay:.4s}
@keyframes blink { 0%,80%,100%{opacity:.3} 40%{opacity:1} }

/* Input area */
.chatbot-input {
  display: flex;
  border-top: 1px solid rgba(255,255,255,.1);
}
.chatbot-input input {
  flex: 1;
  background: #0d1320;
  border: none;
  padding: 10px;
  color: #fff;
  font-size: .9rem;
}
.chatbot-input input:focus{outline:none}
.chatbot-input button {
  background: #00eaff;
  border: none;
  padding: 0 16px;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 0 0 16px 0;
}

/* Quick replies */
.quick-replies {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.quick-replies button {
  background: #0d1320;
  border: 1px solid rgba(255,255,255,.2);
  color: #9afcff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: .8rem;
  cursor: pointer;
  transition: all .2s;
}
.quick-replies button:hover {
  background: #00eaff;
  color: #001018;
}