/* Ensure consistent box-sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (max-width: 1366px) {
  /* Message Area Styles */
  .message-status {
    font-size: 14px;
  }
  .message {
    font-size: 14px;
  }

  /* Input Area Styles */
  #input-area {
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 0 6px 0;
  }
  
  #skip-btn {
    padding: 5px 20px;
    font-size: 16px;
  }
  
  #send-btn {
    padding: 5px 20px;
    font-size: 14px;
  }
  
  #message-input {
    padding: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
    margin-right: 8px;
    height: 42px; /* Adjusted height */
    box-sizing: border-box;
  }
  
  /* Adjust input wrapper */
  .input-wrapper {
    flex: 1;
    min-width: 0; /* Allow shrinking */
  }
}

@media (max-width: 800px) {
  /* Top Bar Styles */
  #top-bar {
    padding: 10px;
    align-items: center;
  }
  #logo h1 {
    font-size: 2rem;
    font-weight: 500;
    margin: 0;
  }
  #peopleOnline p {
    font-size: 14px;
  }
  #feedback-btn {
    margin: 0;
    padding: 8px;
    background-color: #4caf50; /* Green */
  }

  /* Layout Adjustments */
  #main {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Prevent overall scrolling */
    position: relative; /* Establish containing block for absolute/fixed children */
  }

  /* Message Area */
  #message-area {
    flex: 1 1 auto; /* Take up remaining space */
    overflow-y: auto; /* Enable scrolling for messages */
    padding: 10px 20px; /* Adjust padding as needed */
    /* Remove padding-bottom to prevent unnecessary space */
    /* padding-bottom: 70px; */
  }

  /* Input Area */
  #input-area {
    /* Remove fixed positioning */
    /* position: fixed; */
    /* bottom: 0; */
    /* left: 0; */
    /* width: 100%; */
    /* z-index: 1000; */
    display: flex; /* Arrange children horizontally */
    align-items: center; /* Center vertically */
    padding: 10px 20px; /* Maintain existing padding */
    background-color: #fff; /* Ensure it has a background */
    border-top: 1px solid #ddd; /* Subtle separation */
    /* Ensure it stays at the bottom within flex container */
  }

  /* Adjust Skip Button */
  #skip-btn {
    padding: 5px 20px; /* Reduced padding to save space */
    font-size: 14px;
    margin-right: 8px; /* Space between buttons */
    height: 45px; /* Match input height */
    box-sizing: border-box;
  }

  /* Hide Send Button as per original design */
  #send-btn {
    display: none;
  }

  /* Ensure #message-input remains flexible */
  #message-input {
    flex: 1; /* Allow input to take available space */
    height: 45px; /* Mobile height */
    margin-right: 0; /* Remove right margin on mobile */
    font-size: 16px; /* Slightly larger font for mobile */
  }

  /* File upload button adjustments */
  .upload-button {
    width: 25px;
    height: 25px;
    right: 8px;
  }

  .upload-button svg {
    width: 16px;
    height: 16px;
  }

  /* File message adjustments */
  .file-message {
    max-width: 250px;
  }

  .file-message video {
    max-height: 200px;
  }

  /* Upload progress and toast adjustments */
  .upload-progress {
    width: 250px;
    padding: 15px;
  }

  .upload-toast {
    width: 80%;
    font-size: 14px;
  }

  /* Modal Content */
  .modal-content {
    width: 70%;
  }
}

@media (max-width: 416px) {
  /* Adjustments for Very Small Screens */
  #peopleOnline p {
    margin: 10px 0; /* Corrected margin shorthand */
  }
  #feedback-btn {
    display: none;
  }

  /* Further Adjustments for Input Area */
  #input-area {
    padding: 8px 10px;
  }

  #skip-btn {
    padding: 5px 15px;
    font-size: 12px;
    height: 40px; /* Match input height on smaller screens */
  }

  #message-input {
    font-size: 14px;
    padding: 6px;
    flex: 1; /* Ensure it still flexes */
    height: 40px; /* Slightly smaller height for very small screens */
  }

  /* File upload adjustments for very small screens */
  .upload-button {
    width: 22px;
    height: 22px;
    right: 6px;
  }

  .upload-button svg {
    width: 14px;
    height: 14px;
  }

  .file-message {
    max-width: 200px;
  }

  .file-message video {
    max-height: 150px;
  }

  .upload-progress {
    width: 200px;
    padding: 10px;
  }

  .progress-bar {
    height: 8px;
  }

  .upload-toast {
    width: 90%;
    font-size: 12px;
    padding: 8px 15px;
  }
}