body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
#chat { background: linear-gradient(180deg, #f8fafc, #ffffff); padding: 1rem; }

/* Typing indicator animation with text */
.typing-text {
  font-weight: 500;
  color: #4b5563;
  font-size: 12px;
}

.typing-dots {
  display: inline-block;
}

.typing-dots .dot {
  display: inline-block;
  font-weight: bold;
  font-size: 12px;
  margin-right: 2px;
  opacity: 0;
  transition: opacity 0.1s ease;
}

/* Mobile chatbot fixes */
      @media (max-width: 640px) {
        #chatbot-popup {
          max-width: calc(100vw - 1rem) !important;
          width: calc(100vw - 1rem) !important;
          left: 50% !important;
          transform: translateX(-50%) scale(0) !important;
        }
        #chatbot-popup:not(.hidden) {
          transform: translateX(-50%) scale(1) !important;
        }
        #chatbot-button {
          bottom: 1rem !important;
          right: 1rem !important;
        }
      }
      /* Prevent body scroll when chatbot is open on mobile */
      body.chatbot-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
      }
      /* Smooth scrolling for chat messages */
      #chat::-webkit-scrollbar {
        width: 4px;
      }
      #chat::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
      }
      #chat::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
      }
      #chat::-webkit-scrollbar-thumb:hover {
        background: #555;
      }
      /* Typing dots animation with text - controlled by JavaScript */
      .typing-dots .dot {
        display: inline-block;
        color: #667eea;
        font-size: 12px;
        line-height: 1;
        margin-right: 2px;
        opacity: 0;
        transition: opacity 0.1s ease;
      }