/* HAYDEE AI Teacher - Isolated CSS */
.haydee-chat-container {
    max-width: 600px;
    margin: 20px auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    background: #fff;
    box-sizing: border-box;
}
.haydee-chat-area { height: 350px; overflow-y: auto; background: #f9f9f9; padding: 10px; margin-bottom: 10px; border: 1px solid #eee; }

.haydee-input-area { display: flex; gap: 5px; margin-bottom: 10px; }
#haydee-user-input { flex-grow: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }

.haydee-controls { display: flex; gap: 10px; align-items: center; }
.haydee-loading { font-size: 0.9em; color: #666; margin-bottom: 5px; }
.message { margin-bottom: 10px; padding: 8px; border-radius: 5px; }
.user-message { background: #e1f5fe; text-align: right; }
.ai-message { background: #fff3e0; }
button { padding: 8px 15px; cursor: pointer; background-color: #007bff; color: white; border: none; border-radius: 4px; }