/* English Teacher AI Custom Styles */
.etai-container {
    font-family: 'Inter', sans-serif; /* Use Inter font */
}

.etai-content-wrapper {
    min-height: 500px; /* Minimum height for the app container */
    display: flex;
    flex-direction: column;
}

/* Custom scrollbar for conversation display */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

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

/* Ensure messages align correctly within flex container */
#etai-conversation-messages {
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack messages vertically */
    align-items: flex-start; /* Default alignment for messages */
}

#etai-conversation-messages .self-end {
    align-self: flex-end; /* Align user messages to the right */
}

#etai-conversation-messages .self-start {
    align-self: flex-start; /* Align model messages to the left */
}

/* Clear floats are not strictly necessary with flexbox, but harmless. */
#etai-conversation-messages::after {
    content: "";
    display: table;
    clear: both;
}

@media (min-width: 768px) {
    .etai-content-wrapper {
        min-width: 600px;
    }
}