/* minimal styles; adjust to taste */
#chat-conversation-header {
    text-align: center;
    background: #f4f4f4;
    height: 20px;
    align-content: center;
    box-shadow: 0px 3px 6px #88888852;
    position: relative;
    font-weight: 600;
    color: #001036;
}
.realtime-chat-overlay { position: fixed; right: 20px; bottom: 20px; z-index: 9999; font-family: Arial, sans-serif; }
.realtime-chat-toggle { background: #0074d9; color: #fff; padding: 8px 12px; border-radius: 4px; cursor: pointer; }
.realtime-chat-window { width: 500px; height: 400px; background: #fff; border: 1px solid #ccc; display:flex; box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.realtime-chat-left { width: 35%; border-right:1px solid #eee; overflow:auto; }
.realtime-chat-right { width: 65%; display:flex; flex-direction:column; }
.realtime-chat-users { padding: 8px; }
.chat-user { padding: 8px; border-bottom:1px solid #f0f0f0; cursor:pointer; }
.chat-user.online { background:#eaffea; }
.chat-message { margin:8px; padding:6px 10px; border-radius:6px; max-width:80%; }
.msg-in { background:#f1f1f1; align-self:flex-start; }
.msg-out { background:#d9f1ff; align-self:flex-end; text-align:right; }
.conversation-messages { flex:1; overflow:auto; padding:8px; display:flex; flex-direction:column; }
.conversation-input { display:flex; padding:8px; border-top:1px solid #eee; }
.conversation-input input { flex:1; padding:8px; margin-right:6px; }

.badge {
  background: red;
  color: #fff;
  padding: 2px 6px;
  font-size: 11px;
  border-radius: 12px;
  margin-left: 6px;
}
.chat-user { position: relative; padding-right: 40px; }
.chat-user .badge { position: absolute; right: 8px; top: 8px; background:red; color:#fff; padding:2px 6px; border-radius:10px; font-size:11px; }
.chat-user .online-dot { width:10px; height:10px; border-radius:50%; position:absolute; left:6px; top:6px; }
.chat-user.online .online-dot { background: #2ecc71; box-shadow: 0 0 6px rgba(46,204,113,0.6); }
.chat-user.offline .online-dot { background: #ccc; opacity:0.6; }

.chat-message { margin:6px; padding:8px; border-radius:6px; max-width:80%; display:block; }
.msg-in .meta { color:#666; font-size:11px; margin-top:4px; }
.msg-out { background:#e6f7ff; margin-left:auto; }
.msg-in { background:#f2f2f2; }
.status { margin-left:6px; font-weight:bold; }
#chat-typing { font-style:italic; color:#666; margin:6px 0; display:none; }
#chat-global-badge { background:#d9534f; color:#fff; padding:3px 6px; border-radius:12px; display:none; }