:root{
  --bg0:#070a14;
  --bg1:#0b1020;
  --card:#121a31;
  --muted:#9aa4c6;
  --text:#e8ecff;
  --accent:#7c5cff;
  --accent2:#00d4ff;
  --danger:#ff4d6d;
  --ok:#30d158;
  --border: rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  --radius2: 24px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* Light theme (add .theme-light on <html>) */
.theme-light{
  --bg0:#eef2ff;
  --bg1:#f6f7fb;
  --card:#ffffff;
  --muted:#5b677d;
  --text:#0f172a;
  --accent:#4f46e5;
  --accent2:#0891b2;
  --danger:#dc2626;
  --ok:#16a34a;
  --border: rgba(15,23,42,.16);
  --shadow: 0 12px 32px rgba(2,6,23,.10);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--font);
  background: radial-gradient(1200px 600px at 70% -10%, rgba(124,92,255,.28), transparent 55%),
              radial-gradient(900px 500px at 0% 0%, rgba(0,212,255,.18), transparent 50%),
              var(--bg0);
  color:var(--text);
}
a{color:var(--accent2); text-decoration:none}
a:hover{text-decoration:underline}
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px;
  background: rgba(10,14,28,.75);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--border);
}
.theme-light .topbar{background: rgba(255,255,255,.68)}
.brand{font-weight:800; letter-spacing:.2px}
.container{max-width:1200px; margin:0 auto; padding:16px}
.btn{
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 12px;
  border-radius: 14px;
  cursor:pointer;
  transition: .15s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.09)}
.btn:active{transform: translateY(0px)}
.btn-primary{
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(0,212,255,.75));
  border-color: rgba(255,255,255,.14);
}
.btn-ghost{background: transparent}
.btn-small{padding:8px 10px; border-radius: 12px; font-size: 13px}
.flash{padding:10px 12px; border-radius:14px; border:1px solid var(--border); background: rgba(255,255,255,.06); margin: 10px 0}
.flash-ok{border-color: rgba(48,209,88,.35)}
.flash-err{border-color: rgba(255,77,109,.35)}
.auth-card{
  max-width: 420px;
  margin: 48px auto;
  padding: 24px;
  border-radius: var(--radius2);
  background: rgba(18,26,49,.82);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.auth-card h1{margin: 6px 0 14px}
.auth-card .btn{width:100%; justify-content:center;}
.theme-light .auth-card{background: rgba(255,255,255,.88)}
label{display:block; margin-top: 10px; color: var(--muted); font-size: 14px}
input, textarea, select{
  width:100%;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(8,12,24,.55);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}
.theme-light input, .theme-light textarea, .theme-light select{
  background: rgba(255,255,255,.86);
}
button, .btn, .icon-btn{touch-action: manipulation;}
textarea{resize:none}
input:focus, textarea:focus, select:focus{border-color: rgba(124,92,255,.55)}
.auth-foot{margin-top: 12px; color: var(--muted)}
.card{
  padding: 18px;
  border-radius: var(--radius2);
  background: rgba(18,26,49,.7);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  overflow:auto;
}
.theme-light .card{background: rgba(255,255,255,.85)}
.muted{color: var(--muted)}
.small{font-size: 12px}

/* Keep chat layout fixed; scroll only inside sidebar/messages */
body.chat-page{height: 100dvh; overflow: hidden;}
body.chat-page .container{height: calc(100dvh - 58px); overflow: hidden; padding: 12px;}

.layout{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 14px;
  height: 100%;
  min-height: 0;
}
.sidebar{
  background: rgba(18,26,49,.72);
  border:1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 12px;
  overflow:auto;
  min-height: 0;
}
.theme-light .sidebar{background: rgba(255,255,255,.75)}
.chat{
  background: linear-gradient(180deg, rgba(18,26,49,.70), rgba(18,26,49,.52));
  border:1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height: 0;
}
.theme-light .chat{background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78))}
.me{
  display:flex; gap:10px; align-items:center;
  padding: 10px;
  border-radius: 18px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
}
.me-avatar img{
  width:44px; height:44px;
  border-radius: 14px;
  border:1px solid var(--border);
  object-fit:cover;
  background: rgba(255,255,255,.06);
}
.badge{
  display:inline-block;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border:1px solid rgba(124,92,255,.35);
  color: #dcd5ff;
  background: rgba(124,92,255,.15);
}
.section{margin-top: 14px}
.section-title{
  font-weight: 800;
  margin: 8px 4px;
  font-size: 13px;
  color: #d8ddff;
  opacity: .95;
}
.theme-light .section-title{color: var(--text)}
.inline{display:grid; gap: 8px}
.room-list{display:grid; gap:8px}
.room{
  text-align:right;
  width:100%;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  cursor:pointer;
  color: var(--text);
}
.room:hover{background: rgba(255,255,255,.08)}
.room.active{
  border-color: rgba(124,92,255,.55);
  background: rgba(124,92,255,.18);
}
.room.private{border-color: rgba(0,212,255,.25)}
.create-room, .start-private{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 8px;
}
.chat-header{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(10,14,28,.55);
  backdrop-filter: blur(10px);
}
.chat-title{display:flex; flex-direction:column; gap:2px}
#roomTitle{font-weight:900}
.pins{
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  background: rgba(255,255,255,.04);
}
.pins-title{font-weight: 800; margin-bottom: 8px}
.pin-item{
  display:flex; gap:10px;
  padding: 10px 12px;
  border:1px dashed rgba(255,255,255,.18);
  border-radius: 16px;
  margin-bottom: 8px;
  background: rgba(255,255,255,.03);
}
.pin-item:last-child{margin-bottom:0}
.pin-item img{width:26px; height:26px; border-radius: 10px; object-fit:cover; border:1px solid var(--border)}
.messages{
  flex:1;
  overflow:auto;
  padding: 14px;
  background: var(--user-bg, var(--bg1));
  position: relative;
  min-height: 0;
  overscroll-behavior: contain;
}

/* Empty state centered */
#messages:empty::before{
  content: "هنوز پیامی وجود ندارد";
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color: var(--muted);
  padding: 0 16px;
  font-size: 14px;
}

/* In light mode, always keep message area readable even if user picked a dark background */
.theme-light .messages{ background: var(--bg1) !important; }
.msg{
  display:flex;
  gap:10px;
  margin-bottom: 10px;
  align-items:flex-start;
}

/* Telegram-like alignment (me: right, others: left) */
.msg.me{flex-direction: row-reverse;}
.msg.me .avatar{display:none;}
.msg.me .bubble{
  background: linear-gradient(135deg, rgba(124,92,255,.28), rgba(0,212,255,.16));
  border-color: rgba(124,92,255,.45);
}
.msg.me .bubble .user{display:none;}
.msg.me .bubble .meta{justify-content:flex-end;}
.msg.pending{opacity:.75}

.bubble{max-width: 84%;}
.msg.me .bubble{margin-right:auto; max-width: 78%;}
.msg .avatar img{
  width:36px; height:36px;
  border-radius: 14px;
  border:1px solid var(--border);
  object-fit: cover;
  background: rgba(255,255,255,.06);
}
.bubble{
  flex:1;
  padding: 10px 12px;
  border-radius: 18px;
  border:1px solid var(--border);
  background: rgba(18,26,49,.55);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  position:relative;
}
.theme-light .bubble{background: rgba(2,6,23,.04); box-shadow: 0 6px 18px rgba(2,6,23,.08)}
.bubble .meta{
  display:flex; justify-content:space-between; gap:10px;
  margin-bottom: 6px;
  align-items:center;
  font-size: 12px;
  color: var(--muted);
}
.bubble .user{font-weight: 800; color:#f0f2ff}
.theme-light .bubble .user{color: var(--text)}
.bubble .content{
  white-space: pre-wrap;
  line-height: 1.55;
  /* جلوگیری از بیرون‌زدن متن‌های بدون فاصله (مثل سسسسس... یا لینک‌های طولانی) */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.bubble .content a{word-break: break-word}
.bubble .reply{
  border-right: 3px solid rgba(0,212,255,.6);
  padding-right: 10px;
  margin-bottom: 8px;
  color: #cfefff;
  opacity:.95;
}
.bubble .file{
  margin-top: 6px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow:hidden;
}
.bubble .file a{color: var(--accent2); word-break: break-all}
.bubble .file img{
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display:block;
  border:1px solid rgba(255,255,255,.12);
  margin-top: 6px;
  max-height: 260px;
  object-fit: cover;
}
.bubble .actions{
  display:flex; gap:6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.act-icon{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 8px;
  font-size: 16px;
  line-height: 1;
  cursor:pointer;
}
.act-icon.danger{border-color: rgba(255,77,109,.35)}
.act-icon:hover{background: rgba(255,255,255,.08)}
.tag{
  display:inline-block;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  color: var(--muted);
  background: rgba(0,0,0,.12);
}
.tag.pin{border-color: rgba(255,214,10,.35); color: #ffeaa7}
.composer{
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  background: rgba(10,14,28,.6);
  backdrop-filter: blur(10px);
}
.row{display:flex; gap:10px; align-items:stretch}
.composer-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.file-btn{display:inline-flex; gap:8px; align-items:center}
.replybar{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border:1px solid rgba(0,212,255,.25);
  background: rgba(0,212,255,.08);
}
.replybar-title{font-weight:900}
.replybar-preview{color:#d9f8ff; opacity:.95}
.emoji-picker{
  margin-top: 10px;
  padding: 10px;
  border-radius: 16px;
  border:1px solid var(--border);
  background: rgba(18,26,49,.7);
  max-height: 220px;
  overflow:auto;
  display:grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}
.emoji{
  cursor:pointer;
  border-radius: 12px;
  padding: 6px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  text-align:center;
  font-size: 18px;
}
.emoji:hover{background: rgba(255,255,255,.08)}

/* Media sheet (stickers / gifs) */
.media-sheet{position:fixed; left:0; right:0; bottom:0; z-index:95; max-height: 62vh; background: rgba(18,26,49,.96); backdrop-filter: blur(12px); border-top:1px solid var(--border); border-radius: 22px 22px 0 0; overflow:hidden;}
.theme-light .media-sheet{background: rgba(255,255,255,.96)}
.media-sheet-head{display:flex; justify-content:space-between; align-items:center; padding: 10px 12px; border-bottom:1px solid var(--border)}
.tabs{display:flex; gap:8px}
.tab{border:1px solid var(--border); background: rgba(255,255,255,.05); color: var(--text); padding: 8px 12px; border-radius: 999px; cursor:pointer}
.tab.active{border-color: rgba(0,212,255,.35); background: rgba(0,212,255,.10)}
.media-sheet-body{padding: 10px; overflow:auto; max-height: calc(62vh - 54px)}
.media-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px}
.media-item{border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); border-radius: 14px; padding: 4px; cursor:pointer; display:grid; place-items:center}
.media-item:hover{background: rgba(255,255,255,.08)}
.media-item img{max-width:100%; height:auto; border-radius: 12px; display:block}

/* Users list (presence) */
.users-list{display:flex; flex-direction:column; gap:8px}
.user-row{display:flex; gap:10px; align-items:center; padding:10px; border:1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,.04)}
.user-row img{width:34px; height:34px; border-radius: 14px; object-fit:cover; border:1px solid var(--border)}
.user-meta{flex:1; min-width:0}
.user-name{font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.user-sub{display:flex; align-items:center; gap:8px}
.dot{width:8px; height:8px; border-radius:999px; background: rgba(255,255,255,.28); display:inline-block}
.user-row.online .dot{background: var(--ok)}
.user-role{font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background: rgba(255,255,255,.05)}
.user-role.role-admin{border-color: rgba(255,77,109,.35)}
.user-role.role-owner{border-color: rgba(255,214,10,.35)}
.user-role.role-moderator{border-color: rgba(0,212,255,.28)}

/* Role tags in messages */
.tag.role{border-color: rgba(0,212,255,.25); color: #d9f8ff}
.tag.role-admin{border-color: rgba(255,77,109,.35); color: #ffd0d7}
.tag.role-owner{border-color: rgba(255,214,10,.35); color: #fff1b8}

/* Reactions (compact + picker) */
.reactions{margin-top:6px; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.reactions-list{display:flex; flex-wrap:wrap; gap:6px}
.reaction{border:1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text); border-radius: 999px; padding: 2px 8px; cursor:pointer; font-size: 12px}
.reaction.active{border-color: rgba(0,212,255,.35); background: rgba(0,212,255,.10)}
.reaction-plus{border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.02); border-radius: 999px; padding: 2px 8px; cursor:pointer; font-size:12px}
.reaction-plus:hover{background: rgba(255,255,255,.08)}
.reaction-pop{
  position:fixed;
  z-index: 120;
  display:flex;
  gap:6px;
  padding: 8px;
  border-radius: 16px;
  border:1px solid var(--border);
  background: rgba(18,26,49,.92);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}
.theme-light .reaction-pop{background: rgba(255,255,255,.95)}
.reaction-pop button{border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); border-radius: 12px; padding: 6px 8px; cursor:pointer; font-size:18px; line-height:1}
.reaction-pop button:hover{background: rgba(255,255,255,.10)}

/* Search */
.chat-tools{display:flex; align-items:center; gap:10px}
.chat-tools .search{display:flex; align-items:center; gap:6px}
.chat-tools .search input{width:220px; max-width: 40vw; padding:8px 10px; border-radius: 14px; border:1px solid var(--border); background: rgba(255,255,255,.05); color: var(--text)}
.typingbar{padding: 8px 12px; font-size: 12px; color: var(--muted)}

/* Modal */
.modal{position:fixed; inset:0; z-index:60; background: rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding: 14px}
.modal-card{width:min(760px, 100%); max-height: 80vh; overflow:hidden; border-radius: var(--radius2); border:1px solid var(--border); background: rgba(18,26,49,.86); backdrop-filter: blur(12px); box-shadow: var(--shadow)}
.theme-light .modal-card{background: rgba(255,255,255,.92)}
.modal-header{display:flex; justify-content:space-between; align-items:center; padding: 12px 14px; border-bottom:1px solid var(--border)}
.modal-body{padding: 12px 14px; overflow:auto; max-height: calc(80vh - 60px)}
.search-item{padding: 10px 12px; border:1px solid rgba(255,255,255,.10); border-radius: 16px; background: rgba(255,255,255,.03); margin-bottom: 10px; cursor:pointer}
.search-item:hover{background: rgba(255,255,255,.06)}
.search-meta{font-size:12px; color: var(--muted); margin-bottom: 6px}
.search-text{white-space: pre-wrap; line-height:1.55}
.msg.highlight .bubble{outline: 2px solid rgba(0,212,255,.35)}
.table{
  width:100%;
  border-collapse: collapse;
  margin-top: 10px;
  min-width: 700px;
}
.table th, .table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align:right;
  white-space:nowrap;
}
@media (max-width: 980px){
  body.chat-page{overflow:hidden}
  body.chat-page .container{height: calc(100dvh - 58px)}
  .layout{grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100%}
  .sidebar{order:1; max-height: 32vh}
  .chat{order:2; min-height: 0}
}


/* Mobile Telegram-like UI */
.mobile-only{display:none}
.drawer-overlay{position:fixed; inset:0; background: rgba(0,0,0,.55); z-index:80;}
.drawer{position:fixed; top:0; bottom:0; right:0; width: min(88vw, 360px); background: rgba(18,26,49,.92); backdrop-filter: blur(12px); border-left:1px solid var(--border); z-index:90; transform: translateX(110%); transition: transform .18s ease; display:flex; flex-direction:column;}
.theme-light .drawer{background: rgba(255,255,255,.92)}
.drawer.open{transform: translateX(0)}
.drawer.drawer-left{right:auto; left:0; border-left:none; border-right:1px solid var(--border); transform: translateX(-110%)}
.drawer.drawer-left.open{transform: translateX(0)}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding: 12px 14px; border-bottom:1px solid var(--border)}
.drawer-title{font-weight:900}
.drawer-body{padding: 12px 14px; overflow:auto; min-height:0}
.drawer-me{display:flex; gap:10px; align-items:center; padding: 10px; border:1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,.05)}
.drawer-me img{width:46px; height:46px; border-radius: 16px; object-fit:cover; border:1px solid var(--border)}
.drawer-section{margin-top: 14px}
.drawer-section-title{font-weight:900; margin: 6px 2px; font-size: 13px; color: #d8ddff}
.theme-light .drawer-section-title{color: var(--text)}
.icon-btn{border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: var(--text); border-radius: 14px; padding: 8px 10px; cursor:pointer}
.icon-btn:active{transform: translateY(1px)}

/* Online count badge on the mobile header */
#mUsersBtn{position:relative;}
.badge-count{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,212,255,.22);
  color: var(--text);
  font-size: 11px;
  line-height: 18px;
  text-align:center;
}

.online-strip{display:flex; gap:8px; padding: 8px 10px; border-bottom:1px solid var(--border); background: rgba(10,14,28,.52); overflow:auto; overscroll-behavior: contain}
.online-chip{width:40px; height:40px; border-radius: 16px; border:1px solid var(--border); background: rgba(255,255,255,.04); padding:0; display:grid; place-items:center; cursor:pointer; flex: 0 0 auto}
.online-chip img{width:100%; height:100%; border-radius: 16px; object-fit:cover}

.m-header{display:flex; align-items:center; gap:8px; padding: 10px; border-bottom:1px solid var(--border); background: rgba(10,14,28,.70); backdrop-filter: blur(12px)}
.m-subtitle{padding: 6px 12px; border-bottom:1px solid var(--border); background: rgba(10,14,28,.52); color: var(--muted); font-size: 12px}
.m-room{flex:1; min-width:0}
#mRoomSelect{width:100%; padding: 10px 12px; border-radius: 16px; border:1px solid var(--border); background: rgba(255,255,255,.05); color: var(--text)}
.m-actions{display:flex; gap:8px}
.m-search-row{display:flex; gap:8px; padding: 10px; border-bottom:1px solid var(--border); background: rgba(10,14,28,.60)}
.m-search-row input{flex:1; min-width:0; padding: 10px 12px; border-radius: 16px; border:1px solid var(--border); background: rgba(255,255,255,.05); color: var(--text)}

/* Voice */
#voiceBtn.recording{border-color: rgba(255,77,109,.45); background: rgba(255,77,109,.12)}
.audio{width: 100%; margin-top: 8px}

/* Compact voice note */
.voice-wrap{margin-top: 6px; display:flex; align-items:center; gap:10px}
.voice-player{width: 240px; max-width: 100%; height: 34px}
.voice-tag{font-size: 11px; padding: 3px 8px; border-radius: 999px; border:1px solid rgba(255,255,255,.14); color: var(--muted)}

.voice-wrap.compact{gap:0}
.voice-wrap.compact .voice-player{width: 220px; height: 32px}

/* Compact file card */
.file.file-compact{display:flex; flex-direction:column; gap:6px}
.file-compact .file-link{font-size: 13px}
.file-compact .file-preview{margin-top: 0; max-height: 200px}

/* Sticker */
.sticker-img{width: min(180px, 56vw); height:auto; display:block; border-radius: 18px}

@media (max-width: 980px){
  .topbar{display:none}
  body.chat-page{overflow:hidden}
  body.chat-page .container{height: 100dvh; padding:0}
  .layout{grid-template-columns: 1fr; gap:0; height:100%}
  .sidebar{display:none}
  .chat{border-radius:0; border:0; height:100%; box-shadow:none}
  .chat-header{display:none}
  .pins{padding: 8px 10px}
  /* Online strip hidden (we show count as a badge) */
  .online-strip{display:none}

  /* leave room for the fixed composer */
  /*
    باکس ارسال در موبایل fixed است؛ بنابراین باید پایین لیست پیام‌ها به اندازهٔ
    ارتفاع واقعی composer پدینگ داشته باشد تا آخرین پیام زیر باکس ارسال نرود.
    مقدار var(--composer-h) را JS بر اساس ارتفاع composer ست می‌کند.
  */
  .messages{
    padding: 8px;
    padding-bottom: calc(var(--composer-h, 118px) + 12px);
    scroll-padding-bottom: calc(var(--composer-h, 118px) + 12px);
    display:block;
  }

  /* more messages visible */
  .msg{margin-bottom: 6px; gap:8px}
  .msg .avatar img{width:28px; height:28px; border-radius: 12px}
  .bubble{border-radius: 18px; padding: 8px 10px}
  .bubble .meta{margin-bottom: 4px; font-size: 11px}
  .bubble .content{line-height: 1.45}
  /* Keep composer always at the bottom (Telegram-like) even when chat is empty */
  .composer{
    padding: 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:94;
    background: rgba(10,14,28,.70);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
  }
  .composer .row{gap:8px}
  #msgInput{min-height: 42px; max-height: 96px; font-size: 16px; border-radius: 22px;}
  .composer-actions{gap:8px; flex-wrap:nowrap}
  .composer-actions .btn{min-width:44px; min-height:44px; padding:0; border-radius:999px; display:grid; place-items:center; font-size: 18px}
  .file-btn{font-size:0}
  .file-btn::before{content:'📎'; font-size:18px}
  #sendBtn{font-size:0; min-width:46px; min-height:46px; border-radius:999px}
  #sendBtn::before{content:'➤'; font-size:20px}
  #voiceBtn{min-width:46px; min-height:46px}
  .mobile-only{display:flex}
  
  /* Emoji picker as bottom sheet (don't push messages) */
  .emoji-picker{
    position:fixed;
    left:0; right:0;
    bottom: calc(84px + env(safe-area-inset-bottom));
    z-index:96;
    border-radius: 22px 22px 0 0;
    max-height: 36vh;
    grid-template-columns: repeat(8, 1fr)
  }

  /* Prevent unwanted auto-zoom on mobile inputs */
  input, textarea, select{font-size:16px}
}


/* =========================
   Telegram iOS-like Mobile UI
   ========================= */

/* Messages alignment: keep layout LTR, text RTL */
.messages{direction:ltr;}
.msg{justify-content:flex-start; align-items:flex-end;}
.msg.me{justify-content:flex-end; flex-direction:row; }
.msg.me .avatar{display:none;}
.bubble{direction:rtl; max-width: 78%; padding: 24px 12px 8px; border-radius: 18px; background: rgba(255,255,255,.06);}
.msg.me .bubble{background: linear-gradient(180deg, rgba(82,154,255,.55), rgba(65,130,255,.45)); border-color: rgba(120,170,255,.55);}
.msg .bubble{background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.10);}
.bubble .meta{margin:0 0 6px 0; font-size: 12px;}
.bubble .user{font-weight:800;}
.bubble .content{
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  /* جلوگیری از بیرون‌زدن متن‌های بدون فاصله (مثل سسسسس... یا لینک‌های طولانی) */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.bubble .footer{margin-top:6px; display:flex; justify-content:flex-start; gap:8px; align-items:center; color: rgba(255,255,255,.72); font-size: 11px;}
.msg.me .bubble .footer{justify-content:flex-end;}
.bubble .time{opacity:.85}

/* Three dots message menu button */
.msg-menu{
  position:absolute;
  top:6px;
  left:6px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity: .85;
}
.msg.me .msg-menu{left:auto; right:6px;}
.msg-menu:active{transform: translateY(1px);}

/* Menu popover */
.msg-menu-pop{
  position:fixed;
  z-index: 130;
  width: min(260px, calc(100vw - 16px));
  border-radius: 18px;
  border:1px solid var(--border);
  background: rgba(18,26,49,.96);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.theme-light .msg-menu-pop{background: rgba(255,255,255,.96);}
.msg-menu-reactions{
  display:flex;
  gap:6px;
  padding: 10px 10px 8px;
  border-bottom:1px solid var(--border);
  justify-content: space-between;
}
.msg-menu-reactions button{
  flex:1;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 8px 0;
  font-size: 18px;
  line-height:1;
  cursor:pointer;
}
.msg-menu-actions{
  display:flex;
  gap:10px;
  padding: 10px;
  justify-content: space-between;
}
.msg-action{
  flex:1;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 10px 0;
  color: var(--text);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.msg-action .ico{font-size:18px; line-height:1;}
.msg-action .lbl{font-size:11px; opacity:.9;}
.msg-action:hover{background: rgba(255,255,255,.07);}
.msg-action:active{transform: translateY(1px);}
.msg-action:disabled{opacity:.45; cursor:not-allowed;}
.msg-action.danger{color: #ff9aa8;}

/* Composer (Telegram-like) */
.hidden-btn{display:none !important;}
.composer{padding: 10px 10px calc(10px + env(safe-area-inset-bottom));}
.tg-composer{
  display:flex;
  align-items:flex-end;
  gap:10px;
}
.tg-round{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex: 0 0 auto;
}
.tg-send{
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(0,212,255,.75));
  border-color: rgba(255,255,255,.14);
}
.tg-inputwrap{
  position:relative;
  flex:1 1 auto;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 10px 42px 10px 12px;
}
.tg-inputwrap textarea{
  width:100%;
  min-height: 22px;
  max-height: 140px;
  border:0;
  outline:0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}
.tg-emoji-btn{
  position:absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}
@media (max-width: 980px){
  /* compact message spacing like Telegram */
  .messages{
    padding: 10px;
    /* مهم: padding-bottom باید با ارتفاع composer هماهنگ بماند */
    padding-bottom: calc(var(--composer-h, 118px) + 12px);
    scroll-padding-bottom: calc(var(--composer-h, 118px) + 12px);
  }
  .msg{margin-bottom: 8px;}
  .bubble{max-width: 82%;}
  .chat-header{display:none;}
  .sidebar{display:none;}
  .layout{grid-template-columns: 1fr;}
}