.nav-link {
      position: relative;
      transition: color 0.3s ease;
      padding-bottom: 4px;
    }
    .nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0%;
      height: 2px;
      background-color: #3b82f6;
      transition: width 0.3s ease;
    }
    .nav-link:hover::after {
      width: 100%;
    }
    .nav-link:hover {
      color: #3b82f6;
    }
    /* Scrollbar for chatBox */
    #chatBox::-webkit-scrollbar {
      width: 8px;
    }
    #chatBox::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 4px;
    }
    #chatBox::-webkit-scrollbar-thumb {
      background: #3b82f6;
      border-radius: 4px;
    }
    #chatBox {
      scrollbar-width: thin;
      scrollbar-color: #3b82f6 #f1f1f1;
    }

    /* Typing dots animation */
@keyframes blink {
  0%, 20%, 50%, 80%, 100% { opacity: 1; }
  10%, 30%, 60%, 90% { opacity: 0; }
}
.typing-dots .dots::after {
  content: '';
  animation: blink 1.4s infinite;
}
.typing-dots .dots {
  display: inline-block;
  width: 1ch;
  text-align: left;
}