@media (max-width: 480px) {
  html {
    font-size: 15px;
  }
  .header {
    padding: 0.75rem;
  }
  .chat-container {
    padding: 85px 0.75rem 6rem; 
    gap: 1.5rem;
  }
  .input-container {
    padding: 0.75rem;
  }
  .message-bubble {
    max-width: 90%;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
  }
  .text-input {
    font-size: 0.9375rem;
  }
  .logo-icon,
  .search-toggle,
  .share-toggle,
  .theme-toggle {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.5rem;
  }
  .modal-content, .share-content {
    padding: 16px;
    max-width: 90%;
  }
}