#chatouterDiv {
    display: flex;
    flex-direction: column;
    height: 80%;
    width: 100%;
    margin: 0 auto;
}
#chatbox {
    flex-grow: 1;
    overflow-y: auto;
    border: 0px solid #cccccc;
    padding: 0px;
}
.agent {
    display: inline-block;
    background-color: #737373;
    border-radius: 5px;
    padding: 10px;
    margin: 20px;
    position: relative;
    max-width: 70%;
}
.agent::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    left: -10px;
    border-right: 10px solid #737373;
    top: 7px;
}
.user {
    display: inline-block;
    background-color: #ef4444;
    border-radius: 5px;
    padding: 10px;
    margin: 20px;
    position: relative;
    max-width: 70%;
    float: right;
    clear: both;
}
.user::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;                                                                                                                                                                                                                                            
    right: -10px;                                                                                                                                                                                                                                                                     
    border-left: 10px solid #ef4444;                                                                                                                                                                                                                                                  
    top: 7px;                                                                                                                                                                                                                                                                         
}                                                                                                                                                                                                                                                                                     
.user-message {
    display: block; /* Stack user messages vertically */
    margin: 10px 20px; /* Provide some spacing around messages */
    clear: both; /* Clear floats */
}

.chat-image {
    max-width: 100%; /* Ensure the image doesn't overflow the chat box */
    border-radius: 5px; /* Rounded corners for the images */
    margin: 5px 0; /* Margin around the images */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Optional: Adds a shadow effect for depth */
}

/* Add a style for image messages sent by the user */
.user .chat-image {
    float: right; /* Align user images to the right */
}

/* Add a style for image messages sent by the agent */
.agent .chat-image {
    float: left; /* Align agent images to the left */
}

.clear {                                                                                                                                                                                                                                                                              
    clear: both;                                                                                                                                                                                                                                                                      
}                                                                                                                                                                                                                                                                                     

/* Mention tags (inserted by Tribute or rendered manually) */
.mention {
  display: inline-flex;
  align-items: center;
  background-color: #b91c1c; /* red-700 */
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 2px 8px;
  border-radius: 9999px;
  margin-right: 4px;
  white-space: nowrap;
}

.mention:hover {
  background-color: #ef4444; /* red-500 */
}

.tribute-container {
  background-color: #111827 !important; /* Tailwind bg-neutral-900 */
  border: 1px solid #374151 !important; /* border-neutral-700 */
  border-radius: 0.5rem !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  max-width: 320px;
  overflow: hidden;
  z-index: 1000;
}

.tribute-container ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tribute-container li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #d1d5db; /* Tailwind text-gray-300 */
  cursor: pointer;
  background-color: #111827;
}

.tribute-container li.highlight {
  background-color: #ef4444 !important; /* Tailwind red-500 */
  color: white !important;
  font-weight: 600;
}

.tribute-container img {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
}

[data-placeholder]:empty:before {
  content: attr(data-placeholder);
  color: #9ca3af; /* Tailwind gray-400 */
  pointer-events: none;
}