#wp-ai-chatbot { position: fixed; z-index:9999; font-family: Arial; }
#wp-ai-chatbot.bottom-left { bottom:20px; left:20px; }
#wp-ai-chatbot.bottom-right { bottom:20px; right:20px; }

#wp-ai-chatbot-icon img { width:50px; cursor:pointer; border-radius:50%; }
#wp-ai-chatbot-box { width:300px; max-height:400px; background:#fff; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.3); display:flex; flex-direction:column; overflow:hidden; }
#wp-ai-chatbot-header { background:#0073aa; color:#fff; padding:5px 10px; display:flex; justify-content:space-between; align-items:center; }
#wp-ai-chatbot-header button { background:none; border:none; color:#fff; font-size:18px; cursor:pointer; }
#wp-ai-chatbot-messages { flex:1; padding:10px; overflow-y:auto; }
.msg { margin:5px 0; padding:8px 12px; border-radius:10px; max-width:80%; }
.msg.user { background:#0073aa; color:#fff; align-self:flex-end; }
.msg.bot { background:#f1f1f1; color:#000; align-self:flex-start; }
.msg.bot.error { background:#ffcccc; color:#900; }
.msg.bot.welcome-msg { background:#dff0d8; color:#3c763d; }

#wp-ai-chatbot-input-wrap { display:flex; border-top:1px solid #ccc; }
#wp-ai-chatbot-input { flex:1; border:none; padding:8px; }
#wp-ai-chatbot-send { padding:8px 12px; background:#0073aa; color:#fff; border:none; cursor:pointer; }
/* Chatbot header avatar */
#wp-ai-chatbot-header {
    display: flex;
    align-items: center;
    gap: 8px; /* space between avatar and name */
    padding: 8px 12px;
    background: #0073aa;
    color: #fff;
    font-weight: bold;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

#wp-ai-chatbot-header img.chatbot-header-avatar {
    width: 32px;   /* small size */
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

#wp-ai-chatbot-header .chatbot-header-name {
    font-size: 14px;
}