#message-container {
    /* Fixed height - adjust this value to fit your design */
    height: 400px; /* or 60vh, 500px, whatever works best */
    
    /* Enable vertical scrolling */
    overflow-y: auto;
    overflow-x: hidden;
    
    /* Keep existing text styles */
    font-size: 0.75rem; /* text-xs */
    line-height: 1rem;
    
    /* Optional: Add some padding and styling */
    padding: 0.5rem;
    
    /* Optional: Custom scrollbar for cyberpunk theme */
    scrollbar-width: thin;
    scrollbar-color: #24f29c #000;
  }
  
  /* Webkit scrollbar styling for Chrome/Safari */
  #message-container::-webkit-scrollbar {
    width: 8px;
  }
  
  #message-container::-webkit-scrollbar-track {
    background: #000;
  }
  
  #message-container::-webkit-scrollbar-thumb {
    background: #24f29c;
    border-radius: 4px;
  }
  
  #message-container::-webkit-scrollbar-thumb:hover {
    background: #1fb87a;
  }
  
  /* Alternative responsive approach */
  @media (min-width: 768px) {
    #message-container {
      font-size: 0.875rem; /* md:text-sm */
      line-height: 1.25rem;
    }
  }
  
  /* Keep the container from growing */
  .message-container-wrapper {
    flex-shrink: 0; /* Prevents the container from shrinking */
  }