#anything-llm-chat {
  /* On mobile, "too big" often means it should be shorter. 
     80vh means it will take up 80% of the device's screen height, which is great for mobile.
     You can also use a fixed pixel value like 450px. */
  max-height: 70vh !important;
  /* On small screens, we can remove the side margin to use more space */
  margin-right: 0 !important; 
  margin-bottom: 0 !important;
  
  /* Make it truly full-width on mobile */
  max-width: 100% !important; 
  
  /* Remove rounded corners on mobile so it fits edge-to-edge */
  border-radius: 0 !important; 
}

/* 2. Desktop Style (for larger screens) */
/* This media query applies ONLY when the screen is 768px wide or wider. */
@media (min-width: 768px) {
  #anything-llm-chat {
    /* On desktop, "too small" means we can give it a larger, fixed height. */
    max-height: 80vh !important;
    /* We also restore the original desktop styles from your HTML classes */
    max-width: 400px !important;
    margin-right: 1rem !important;  /* The equivalent of md:mr-4 */
    margin-bottom: 1rem !important; /* The equivalent of mb-4 */
    border-radius: 1rem !important; /* The equivalent of rounded-2xl */
  }
}

#anything-llm-chat {
    --white: #000000 !important;
    --dark: #fff !important;
   }
  #anything-llm-embed-chat-button {
    --dark: none !important;
  }
  #anything-llm-chat a[href^="mailto:"] svg {
  color: #7A7D7E; /* Use the same color as the other icons, or replace with your desired color */
}
#anything-llm-chat .allm-text-\[14px\].allm-font-sans {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: 14px !important;
  color: inherit !important;
 /* Add more properties if needed */
}