.chat-component {
  max-width: 900px; 
  width: 99%; 
  margin: 0 auto; 
  margin-top: 20px;
  overflow: hidden; 
}

.header-buttons {
  display: flex;
  gap: 10px;
}

.chat-container {
  display: flex;
  flex-direction: column;
  margin: 2px auto;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  height: 95vh;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f0f0f0;
  padding: 5px 10px;
  border-bottom: 1px solid #ccc;
  flex-shrink: 0; /* Prevent header from shrinking */  
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.message-form {
  padding: 10px;
  border-top: 1px solid #ccc;
  flex-shrink: 0;
  width: 100%;
}

.scrollable {
  -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: #888 #f1f1f1; /* For Firefox */
}

/* For Webkit browsers like Chrome/Safari */
.scrollable::-webkit-scrollbar {
  width: 5px;
}

.scrollable::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.scrollable::-webkit-scrollbar-thumb {
  background: #888;
}

.scrollable::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.chat-container h1 {
  font-size: 2em;
  line-height: 0.5;
} 

.chat-container h2 {
  font-size: 1.5em;
  line-height: 0.5;
} 

/* Styles for mobile devices with vertical screen orientation */
@media (max-width: 920px), (orientation: portrait) {
    .chat-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 8px;
        overflow: hidden;
        height: 80vh;
    }

    .chat-container h1 {
      font-size: 1.5em;
      line-height: 1.1;
    } 
    
    .chat-container h2 {
      font-size: 1.2em;
      line-height: 1;
    } 
}

/* Target Safari on iPhone */
@media only screen
  and (max-device-width: 1500px)
  and (orientation: portrait) {
    /* CSS rules specific to Safari on iPhone in portrait mode */
    .chat-component {
      margin-top: 50px;
    }

}
