* { box-sizing: border-box; font-family: system-ui, Arial; }
body { margin: 0; background: #f5f6f8; }
#topbar { height: 48px; background: #1f2937; color: #fff; display:flex; align-items:center; justify-content:space-between; padding: 0 12px; }
#me { opacity: 0.85; font-size: 14px; }

#contactsPane { position: fixed; top:48px; right:0; width: 280px; height: calc(100vh - 48px); background:#fff; border-left:1px solid #e5e7eb; box-shadow: -4px 0 16px rgba(0,0,0,0.05); transition: transform .2s; }
#contactsPane:not(.open) { transform: translateX(240px); }
#contactsHeader, #groupsHeader { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-bottom:1px solid #eee; font-weight:600; }
#togglePane { border:0; background:#f0f2f5; width:28px; height:28px; border-radius:6px; cursor:pointer; }
#contacts, #groups { overflow:auto; height: calc(50% - 42px); }
.item { display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer; border-bottom:1px solid #f3f4f6; }
.item:hover { background:#f9fafb; }
.avatar { width:28px; height:28px; border-radius:50%; background:#ddd; }
.name { flex:1; }
.presence { width:8px; height:8px; border-radius:50%; background:#94a3b8; }
.online { background:#10b981; }

#dock { position: fixed; bottom: 8px; left:8px; right:300px; display:flex; gap:8px; flex-wrap:wrap; }

.chatbox { width: 320px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.06); display:flex; flex-direction:column; overflow:hidden; }
.cb-header { background:#f3f4f6; padding:8px 10px; display:flex; gap:8px; align-items:center; }
.cb-title { font-weight:600; font-size:14px; flex:1; }
.cb-actions button { border:0; background:transparent; cursor:pointer; font-size:16px; }
.cb-log { height:220px; overflow:auto; padding:8px; background:#fafafa; }
.msg { margin:6px 0; }
.msg.me { text-align:right; }
.msg .bubble { display:inline-block; padding:6px 8px; border-radius:10px; background:#e5e7eb; max-width:80%; word-break: break-word; }
.msg.me .bubble { background:#d1fae5; }
.cb-input { display:flex; gap:6px; padding:8px; border-top:1px solid #eee; align-items:center; }
.cb-input input[type="text"] { flex:1; padding:8px; border:1px solid #e5e7eb; border-radius:8px; }
.cb-input input[type="file"] { display:none; }
.typing { font-size:12px; opacity:.7; padding:0 8px 6px; height:16px; }

/* new additions */
#contactsHeader input#contactSearch { flex:0 0 110px; padding:6px 8px; border:1px solid #e5e7eb; border-radius:6px; font-size:13px; }
#contactsHeader { gap:6px; }

.emoji-pop { position:absolute; bottom:52px; right:8px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:8px; width:240px; max-height:180px; overflow:auto; box-shadow:0 10px 24px rgba(0,0,0,.1); }
.emoji-pop.hidden { display:none; }
.emoji-pop button { border:0; background:transparent; font-size:20px; padding:6px; cursor:pointer; }
.cb-input { position:relative; }
.presence.offline { background:#94a3b8; }

#jitsiContainer { position:fixed; bottom:0; left:0; right:300px; height:40vh; background:#000; display:none; border-top:2px solid #111; }