/* =========================
   Base
========================= */
* { box-sizing: border-box; }

body{
  margin: 0;
  font-family: tahoma, sans-serif;
  background: #0b1220;
  color: #e5e7eb;
}

a{ color:#93c5fd; text-decoration:none; }


/* =========================
   Layout
========================= */
.app{
  display: grid;
  grid-template-columns: 320px 1fr;
  height: 100vh;
}

.sidebar{
  background:#0a1020;
  border-left:1px solid #132040;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:auto; /* اسکرول می‌خوره */
}

.chat{
  display:flex;
  flex-direction:column;
  background:#0b1220;
  height: 100vh;
}


/* =========================
   Sidebar pieces
========================= */
.brand{
  font-weight:700;
  font-size:18px;
}

.me{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid #223056;
  border-radius:12px;
  background:#070b14;
}

.avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#38bdf8;
  color:#06121b;
  font-weight:700;
}

.name{ font-weight:700; }
.logout{ font-size:12px; color:#94a3b8; }

.rooms .section{
  font-size:12px;
  color:#94a3b8;
  margin-bottom:8px;
}

.room{
  width:100%;
  text-align:right;
  padding:10px;
  border-radius:12px;
  border:1px solid #223056;
  background:#070b14;
  color:#e5e7eb;
  cursor:pointer;
}
.room.active{ border-color:#38bdf8; }

.hint{
  font-size:12px;
  color:#94a3b8;
  margin-top:6px;
}


/* =========================
   Topbar + Messages
========================= */
.topbar{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  border-bottom:1px solid #132040;
  background:#081024;
}

.status{ font-size:12px; color:#94a3b8; }

.messages{
  flex: 1;
  overflow: auto;
  padding: 16px 16px 96px; /* جا برای نوار ارسال پایین */
  display:flex;
  flex-direction:column;
  gap:10px;
}


/* =========================
   Message bubble
========================= */
.bubble{
  max-width:72%;
  padding:10px 12px;
  border-radius:14px;
  line-height:1.7;
  position:relative;
}

.bubble.me{
  align-self:flex-start;
  background:#1f3b5b;
  border:1px solid #2c4a70;
}

.bubble.other{
  align-self:flex-end;
  background:#0a1a2f;
  border:1px solid #132f4d;
}

.meta{
  margin-top:6px;
  font-size:11px;
  color:#9ca3af;
  display:flex;
  gap:8px;
  align-items:center;
}

.user{
  color:#38bdf8;
  font-weight:700;
}

.time{ opacity:.85; }


/* =========================
   Composer (bottom bar)
   - همیشه پایین فیکس
========================= */
.composer{
  position: sticky;
  bottom: 0;
  z-index: 50;

  padding:12px;
  border-top:1px solid #132040;
  background: rgba(8,16,36,0.92);
  backdrop-filter: blur(6px);
}

.sendForm,
#sendForm{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap !important;
}

#msg{
  flex:1;
  padding:12px;
  border-radius:14px;
  border:1px solid #223056;
  background:#070b14;
  color:#fff;
  outline:none;
}

#sendForm button{
  padding:12px 16px;
  border:none;
  border-radius:14px;
  background:#38bdf8;
  color:#071018;
  font-weight:700;
  cursor:pointer;
}


/* =========================
   Emoji + File
========================= */
#emojiBtn{
  width:44px;
  padding:10px;
  border:none;
  border-radius:14px;
  background:#0b223a;
  color:#e5e7eb;
  cursor:pointer;
  border:1px solid #223056;
}

.fileBtn{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#0b223a;
  border:1px solid #223056;
  color:#e5e7eb;
  cursor:pointer;
}

.emojiPanel{
  margin-top:10px;
  padding:10px;
  border:1px solid #223056;
  border-radius:12px;
  background:#070b14;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-height:160px;
  overflow:auto;
}

.emojiPanel button{
  border:none;
  background:#0b223a;
  border:1px solid #223056;
  color:#fff;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
}


/* =========================
   Attachments
========================= */
.attach{ margin-top:8px; }

.attach-img{
  max-width:220px;
  border-radius:12px;
  border:1px solid #223056;
  display:block;
}

.attach-file{
  display:inline-block;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid #223056;
  background:#070b14;
  color:#e5e7eb;
}


/* =========================
   Users list (Contacts)
========================= */
.usersPanel{ margin-top:10px; }

.usersList{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:0;
  overflow:auto;
  max-height:62vh;
  border:1px solid #223056;
  border-radius:14px;
  background:#070b14;

  /* اسکرول مخفی ولی فعال */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.usersList::-webkit-scrollbar{ width:0; height:0; }

.userItem{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid #132040;
  cursor:pointer;
  background:transparent;
}

.userItem:last-child{ border-bottom:none; }
.userItem:hover{ background:#0b223a; }

.userAvatar{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#111827;
  border:1px solid #223056;
  color:#e5e7eb;
  font-weight:700;
  font-size:14px;
}

.userName{
  font-weight:600;
  font-size:14px;
  color:#e5e7eb;
}


/* =========================
   Telegram-like chat list (optional)
   (اگر استفاده نمی‌کنی، می‌تونی کلاً حذفش کنی)
========================= */
.chatList{
  margin-top:10px;
  border:1px solid #223056;
  border-radius:14px;
  background:#070b14;
  overflow:hidden;
}

.chatItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid #132040;
  cursor:pointer;
}
.chatItem:last-child{ border-bottom:none; }
.chatItem:hover{ background:#0b223a; }

.chatAvatar{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#111827;
  border:1px solid #223056;
  font-weight:800;
  color:#e5e7eb;
}

.chatText{ flex:1; min-width:0; }
.chatName{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chatSub{ font-size:12px; color:#94a3b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chatTime{ font-size:11px; color:#94a3b8; }


/* =========================
   Login / Blocked
========================= */
.login input{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid #223056;
  background:#070b14;
  color:#fff;
  outline:none;
}

.login button{
  width:100%;
  margin-top:8px;
  padding:10px;
  border:none;
  border-radius:10px;
  background:#38bdf8;
  color:#071018;
  font-weight:700;
  cursor:pointer;
}

.blocked{
  padding:12px;
  border-radius:12px;
  background:#070b14;
  border:1px solid #223056;
  color:#94a3b8;
  text-align:center;
}


/* =========================
   Mobile
========================= */
@media (max-width: 860px){
  .app{ grid-template-columns: 1fr; }
  .sidebar{ display:none; }
}







/* دکمه منو */
.menuBtn{
  display:none;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid #223056;
  background:#0b223a;
  color:#e5e7eb;
  cursor:pointer;
}

/* پرده تار پشت منو */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  z-index:80;
  display:none;
}

/* موبایل: سایدبار کشویی */
@media (max-width: 860px){
  .app{ grid-template-columns:1fr; }
  .menuBtn{ display:inline-grid; place-items:center; }

  .sidebar{
    display:flex;                 /* دیگه hide نکن */
    position:fixed;
    top:0;
    bottom:0;
    right:0;                      /* چون RTL و منو سمت راست */
    width:320px;
    max-width:88vw;
    z-index:90;
    transform: translateX(110%);  /* بسته */
    transition: transform .22s ease;
    border-left:1px solid #132040;
  }

  body.sidebar-open .sidebar{
    transform: translateX(0);     /* باز */
  }

  body.sidebar-open .overlay{
    display:block;
  }
}










/* استایل برای نشان دادن کاربر آنلاین در لیست کاربران (userItem) */
.userItem.is-online .userName {
    font-weight: bold; /* یا هر استایل دیگری برای تأکید */
    color: green; /* رنگ برای نشان دادن وضعیت آنلاین */
}

/* استایل برای دایره نشانگر در لیست چت (chatItem) */
.chatItem .online-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: green; /* رنگ وضعیت آنلاین */
    margin-left: 5px; /* فاصله از نام چت */
    border: 2px solid white; /* حاشیه برای بهتر دیده شدن روی بکگراند */
}


