.chat-container {
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f8f8f8;
    padding: 15px;
    overflow-y: scroll;
    height: 500px;
    margin-bottom: 15px;
}

.message {
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 5px;
}

.user-message {
    background-color: #e6e6e6;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.gpt-message {
    background-color: transparent;
    color: #42626e;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
.user-message, .gpt-message {
    font-size: 0.8em; 
}

.suggested-link {
    font-size: 0.9em;
}

.nobr {
    display: block;
    white-space: nowrap
}

.gpt-message h1 {
    font-size: 1.2em !important;
    margin-bottom: 0 !important;
}

.gpt-message h2 {
    font-size: 1.15em !important;
    margin-bottom: 0 !important;
}

.gpt-message h3 {
    font-size: 1.1em !important;
    margin-bottom: 0 !important;
}

.gpt-message h4 {
    font-size: 1.0em !important;
    margin-bottom: 0 !important;
}

.gpt-message ul,
.gpt-message li,
.gpt-message ol,
.gpt-message p {
    margin-bottom: 0 !important;
}

.message.gpt-message {
    display: flex;
    align-items: flex-start; /* Align avatar and message at the top */
    gap: 10px; /* Space between avatar and message */
}

.message-avatar {
    display: none !important;
    flex-shrink: 0; /* Prevents shrinking */
}

.message-content {
    flex-grow: 1; /* Allows message to take remaining space */
    min-width: 0; /* Prevents overflow */
    word-break: break-word; /* Ensures text wraps properly */
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    border: 0;
    border-radius: 0.25em;
}