.messages-area {
    height: 88vh;
    overflow-y: scroll;
    scroll-behavior: smooth;
    padding-bottom: 50px;  /* needed to avoid superimpose with lower navbar */
}

/* message area style specifically for screens 600px or smaller, so taht the scrolling ends exactly at the navbar */
@media (max-width: 600px) {
    .messages-area {
      height: 75vh; /* Adjust height for small screens */
      /* Additional styling adjustments for small screens */
      padding-bottom: 50px;  /* needed to avoid superimpose with lower navbar */
    }
  }

.suggestion-message-box {
    padding: 10px;
    /* border: 1px solid #ccc; */
    border: 2px solid #212529;
    border-radius: 5px;
    background-color: #f8f9fa;
    cursor: pointer;
    text-align: center;
    margin-bottom: 10px; /* Space between boxes */
}

.option-btn {
  background-color: #f8f9fa; /* Light background (similar to Bootstrap light) */
  border: 2px solid #212529; /* Dark border */
  color: #212529;            /* Dark text */
}
.option-btn:hover {
  background-color: #e2e6ea; /* Slightly darker on hover */
  border-color: #1d1d1d;     /* Darker border on hover */
}