#chatBox { height:300px; overflow-y:auto; border:1px solid #d1d5db; border-radius:10px; padding:12px; background:#f9fafb; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; margin-bottom:12px; }
.chat-user { background:#e0f2fe; padding:8px 12px; border-radius:12px; margin-bottom:8px; text-align:left; }
.chat-ai { background:#fef3c7; padding:8px 12px; border-radius:12px; margin-bottom:8px; text-align:left; }

#userMessage { padding:10px; border-radius:8px; border:1px solid #d1d5db; font-size:15px; flex:1 1 60%; margin-right:8px; }
#sendMessage, #voiceBtn { padding:10px 18px; border-radius:8px; border:none; cursor:pointer; font-weight:600; color:#fff; background:#2563eb; margin-right:4px; transition:0.3s; }
#sendMessage:hover, #voiceBtn:hover { background:#1e40af; }

#userLanguage, #chatPurpose, #userLevel { padding:10px; border-radius:8px; border:1px solid #d1d5db; font-size:15px; margin-right:8px; margin-bottom:12px; }

#pointsDisplay, #levelDisplay, #badgesDisplay { font-weight:600; color:#111827; background:#f3f4f6; padding:6px 12px; border-radius:8px; margin-top:6px; display:inline-block; }

@media screen and (max-width:768px){
    #userMessage { width:100%; margin-bottom:8px; }
    #sendMessage, #voiceBtn { width:48%; margin-bottom:8px; }
    #userLanguage, #chatPurpose, #userLevel { width:100%; margin-bottom:8px; }
}