body{margin:0;font-family:Segoe UI,sans-serif;background:linear-gradient(135deg,#0e1621,#1c2635);color:white;direction:rtl}
#app{display:flex;height:100vh}
#sidebar{width:250px;background:#17212b;padding:15px;box-sizing:border-box}
#sidebar h2{text-align:center;color:#7fb3ff;font-weight:normal}
.user{background:#1e2a38;margin:6px 0;padding:8px;border-radius:8px;font-size:14px}
#chat{flex:1;display:flex;flex-direction:column}
#top{background:#2b5278;padding:10px;text-align:center}
#messages{flex:1;overflow-y:auto;padding:15px;background:rgba(0,0,0,.15)}
.msg{max-width:70%;margin:8px 0;padding:10px;border-radius:10px}
.me{background:#2b5278;margin-left:auto}
.other{background:#182533;margin-right:auto}
.time{font-size:11px;opacity:.6;margin-top:4px}
#sendBox{display:flex;gap:6px;background:#17212b;padding:10px}
#msg{flex:1;padding:10px;border:none;border-radius:6px;background:#0e1621;color:white}
button{background:#2b5278;border:none;color:white;padding:10px;border-radius:6px;cursor:pointer}
#typing{font-size:12px;opacity:.7;margin:4px 12px}
#emojiBox{position:absolute;bottom:70px;right:10px;background:#1e2a38;padding:8px;border-radius:8px;display:none}
.emoji{font-size:20px;padding:4px;cursor:pointer}
@media(max-width:700px){#sidebar{display:none}}