.chat-box {
  height: 400px;
  overflow-y: auto;
  background: #f8f9fa;
  padding: 10px;
}

.msg {
  margin: 8px 0;
  align-items: flex-end;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.bubble {
  max-width: 70%;
  padding: 10px 15px;
  border-radius: 15px;
  font-size: 14px;
  line-height: 1.4;
}

.bot-msg .bubble {
  background: #e9ecef;
  border-bottom-left-radius: 0;
}

.user-msg .bubble {
  background: #d1e7dd;
  border-bottom-right-radius: 0;
}
.typing-indicator .bubble {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #e9ecef;
  border-bottom-left-radius: 0;
}

.dot {
  width: 8px;
  height: 8px;
  background: #6c757d;
  border-radius: 50%;
  display: inline-block;
  animation: blink 1.4s infinite both;
}

.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
  0% { opacity: .2; transform: translateY(0); }
  20% { opacity: 1; transform: translateY(-3px); }
  40% { opacity: .2; transform: translateY(0); }
}