:root{
  --bg0:#070a13;
  --bg1:#0b1023;
  --card: rgba(18, 24, 52, .55);
  --stroke: rgba(255,255,255,.10);
  --text:#e9ecff;
  --muted: rgba(233,236,255,.65);
  --accent:#7c5cff;
  --accent2:#22d3ee;
  --danger:#ff4d6d;
  --shadow: 0 30px 80px rgba(0,0,0,.55);
  --r: 20px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body.bg{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% 10%, rgba(124,92,255,.18), transparent 50%),
    radial-gradient(900px 500px at 10% 70%, rgba(34,211,238,.14), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow:hidden;
  overflow-x:hidden;
}

.noise{
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  pointer-events:none;
  opacity:.35;
}

.glass{
  background: var(--card);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--r);
}

a{color:inherit; text-decoration:none}
.link{color:var(--accent2)}
.muted{margin-top:14px; color:var(--muted); font-size:13px}

/* ==== Buttons & Inputs ==== */
.btn{
  border:none; cursor:pointer;
  border-radius: 14px;
  padding: 10px 14px;
  color: var(--text);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn.primary{
  background: linear-gradient(135deg, rgba(124,92,255,.9), rgba(34,211,238,.55));
  border:1px solid rgba(255,255,255,.14);
}
.btn.send{
  width: 110px;
  background: linear-gradient(135deg, rgba(124,92,255,.9), rgba(124,92,255,.35));
  border:1px solid rgba(255,255,255,.14);
}

input, textarea{
  width:100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 12px;
  outline:none;
}
input:focus, textarea:focus{
  border-color: rgba(124,92,255,.65);
  box-shadow: 0 0 0 4px rgba(124,92,255,.14);
}

/* ==== Layout ==== */
.app{
  height:100%;
  display:grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  min-width: 0;
}

/* important to prevent overflow in grid */
.sidebar, .chat{min-width:0}

/* ==== Sidebar ==== */
.sidebar{
  padding: 14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.side-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 12px;
}

.side-title{font-weight:800}

.side-actions{display:flex; gap:8px; align-items:center}

.chip{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:var(--muted);
  font-size: 12px;
}
.chip-accent{
  background: rgba(34,211,238,.10);
  border-color: rgba(34,211,238,.22);
  color: rgba(233,236,255,.85);
}

.searchbox{position:relative; margin-bottom: 12px}

.search-results{
  position:absolute; top: 44px; left:0; right:0;
  background: rgba(8, 10, 22, .96);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow:hidden;
  overflow-x:hidden;
  display:none;
  z-index: 60;
}
.search-item{
  padding: 10px 12px;
  display:flex; flex-direction:column;
  gap:2px;
  cursor:pointer;
}
.search-item:hover{background: rgba(124,92,255,.14)}
.search-item .u{font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.search-item .e{color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.conv-list{
  overflow-y:auto;
  overflow-x:hidden;
  padding-right: 2px;
}

.conv{
  display:flex; gap:10px;
  padding: 10px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;
  background: rgba(255,255,255,.03);
  overflow:hidden;
}
.conv:hover{background: rgba(255,255,255,.05)}
.conv.active{
  border-color: rgba(124,92,255,.35);
  background: rgba(124,92,255,.12);
}

.conv.public-chat{
  border-color: rgba(34,211,238,.12);
  background: rgba(34,211,238,.07);
}
.conv.public-chat.active{
  border-color: rgba(0, 24, 246, 0.78);
  background: rgba(34,211,238,.12);
}

.conv.online{
  border-color: rgba(0, 115, 246, 0.86);
  box-shadow: 0 0 0 1px rgba(34,211,238,.10), 0 8px 30px rgba(34,211,238,.10);
}

.avatar{
  width:42px; height:42px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  flex: 0 0 auto;
}
.avatar-dm{
  background: linear-gradient(135deg, rgba(45, 1, 248, 0.51), rgba(34,211,238,.18));
  font-weight: 900;
}

.conv-meta{min-width:0}
.conv-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.conv-title{font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.conv-time{color:rgba(233,236,255,.55); font-size:12px; white-space:nowrap}
.conv-sub{color:var(--muted); font-size:12px; margin-top: 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ==== Chat ==== */
.chat{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.chat-top{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.chat-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.chat-title{font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chat-sub{color:var(--muted); font-size:12px}

/* Mobile buttons (hidden on desktop) */
.mobile-btn{
  display:none;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: var(--text);
  cursor:pointer;
}

.messages{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding: 16px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

/* ==== Bubble ==== */
.bubble{
  position: relative;
  padding: 10px 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow:visible;
  max-width: 78%;
  width: fit-content;
}

.bubble.me{
  margin-right:auto; /* RTL: mine on left */
  background: rgba(124,92,255,.16);
  border-color: rgba(124,92,255,.30);
}

.bubble:not(.me){
  margin-left:auto; /* others on right */
}

.bubble .text{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.bubble .meta{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  color: var(--muted);
  font-size: 11px;
  margin-top: 6px;
}
.meta-right{display:flex; align-items:center; gap:8px}

/* Reply snippet */
.reply-snippet{
  border-right: 3px solid rgba(124,92,255,.9);
  padding: 10px 10px;
  margin-bottom: 8px;
  background: rgba(124,92,255,.10);
  border-radius: 14px;
  border: 1px solid rgba(124,92,255,.18);
}
.reply-snippet .rsender{font-size:12px; font-weight:900; color: rgba(233,236,255,.92)}
.reply-snippet .rtext{font-size:12px; color: rgba(233,236,255,.70); margin-top:2px}

/* Reply button: visible on mobile, hover on desktop */
.reply-btn{
  position:absolute;
  left: 10px;
  top: 10px;
  border:none;
  width:32px; height:32px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: var(--text);
  cursor:pointer;
  opacity:0;
}
.bubble:hover .reply-btn{opacity:1}
@media (hover: none) and (pointer: coarse){
  .reply-btn{opacity:1}
}

/* Reply bar (composer top) */
.replybar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius: 16px;
  margin-bottom: 10px;
  background: rgba(124,92,255,.12);
  border:1px solid rgba(124,92,255,.25);
}
.replybar-left{display:flex; flex-direction:column; min-width:0}
.replybar-title{font-weight:900; font-size:12px; color: rgba(233,236,255,.9)}
.replybar-text{
  font-size:12px; color: rgba(233,236,255,.65);
  margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.replybar-x{
  width:34px; height:34px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: var(--text);
  cursor:pointer;
}

/* Seen fx: only border/bg change (no ticks) */
.bubble.me.seen-fx{
  border-color: rgba(34, 211, 238, .55);
  background: rgba(34,211,238,.10);
  box-shadow:
    0 0 0 1px rgba(34,211,238,.12),
    0 10px 40px rgba(34,211,238,.10);
}

/* Admin message style */
.bubble.admin-msg{
  background: rgba(255, 196, 0, .08);
  border-color: rgba(255, 196, 0, .22);
}
.admin-name{
  color: rgba(255, 205, 60, .98);
  text-shadow: 0 0 16px rgba(255, 205, 60, .25);
  font-weight: 900;
}

/* Composer */
.composer{
  padding: 12px 12px 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.composer-inner{
  display:flex;
  gap:10px;
  align-items:flex-end;
}
#msgText{resize:none; min-height: 42px; max-height: 120px}
.hint{margin-top:8px; color:var(--muted); font-size: 12px}

/* ==== Mobile drawer sidebar ==== */
.drawer-backdrop{
  display:none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 90;
}

.drawer{
  position: fixed;
  top: 12px;
  bottom: 12px;
  right: 12px; /* RTL: open from right */
  width: min(360px, calc(100vw - 24px));
  z-index: 100;
  transform: translateX(110%);
  transition: transform .18s ease;
}

.drawer.open{transform: translateX(0)}
.drawer-backdrop.open{display:block}

@media (max-width: 900px){
  .app{
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 12px;
  }
  .sidebar{display:none}
  .mobile-btn{display:inline-grid; place-items:center}
  .messages{padding: 12px}
  .bubble{max-width: 90%}
}

/* پیام سیستمی داخل چت (مثل join) */
.system-line{
  align-self: center;
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(233,236,255,.75);
  font-size: 12px;
  text-align: center;
}

/* پیام join: سبز نئونی */
.system-line.system-join{
  border-color: rgba(34, 255, 140, .35);
  background: rgba(34, 255, 140, .10);
  color: rgba(180, 255, 220, .95);
  box-shadow: 0 0 0 1px rgba(34,255,140,.10), 0 10px 40px rgba(34,255,140,.10);
  text-shadow: 0 0 18px rgba(34,255,140,.18);
}

/* لینک نام برای ادمین‌ها */
.name-link{
  color: rgba(233,236,255,.90);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,.18);
}
.name-link:hover{
  border-bottom-color: rgba(34,211,238,.55);
  color: rgba(34,211,238,.95);
}

/* ===== Admin mini action buttons (mute/pin) ===== */
.icon-btn{
  display:inline-grid;
  place-items:center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(233,236,255,.92);
  cursor:pointer;
  font-size: 14px;
  line-height: 1;
}
.icon-btn:hover{border-color: rgba(34,211,238,.35); background: rgba(34,211,238,.08)}
.icon-btn:disabled{opacity:.55; cursor:not-allowed}

.mute-btn.muted{border-color: rgba(255,77,79,.55); background: rgba(255,77,79,.14)}
.pin-btn.pinned{border-color: rgba(255,199,0,.55); background: rgba(255,199,0,.12)}

/* pinned message highlight */
.bubble.pinned{
  box-shadow: 0 0 0 1px rgba(255,199,0,.18), 0 10px 40px rgba(255,199,0,.06);
  position: relative;
}
.bubble.pinned::after{
  content: "📌";
  position: absolute;
  top: -10px;
  right: 10px;
  font-size: 14px;
  opacity: .85;
}

/* Send button muted state */
.btn.send.send-muted{
  background: #ff4d4f !important;
  border-color: #ff4d4f !important;
  color: #fff !important;
  cursor: not-allowed;
}


/* ===== Mini icon buttons (Mute/Pin/Delete) ===== */
.icon-btn{
  width: 22px;
  height: 22px;
  border-radius: 8px;
  font-size: 12px;
}
.icon-btn:hover{border-color: rgba(34,211,238,.35); background: rgba(34,211,238,.08)}
.mute-btn.muted{
  border-color: rgba(255,77,79,.55);
  background: rgba(255,77,79,.18);
  color: #ffb3b4;
}
.pin-btn.pinned{
  border-color: rgba(34,211,238,.55);
  background: rgba(34,211,238,.16);
  color: rgba(233,236,255,.96);
}
.del-btn{
  border-color: rgba(255,77,79,.35);
}
.del-btn:hover{
  border-color: rgba(255,77,79,.75);
  background: rgba(255,77,79,.12);
}

/* ===== Pinned bar (Telegram-like) ===== */
.pinned-bar{
  display:none;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.pinned-bar.show{display:flex;}
.pinned-tag{
  font-size:12px;
  color: rgba(233,236,255,.75);
  padding: 2px 8px;
  border: 1px solid rgba(34,211,238,.35);
  border-radius: 999px;
}
.pinned-text{
  flex:1;
  font-size: 13px;
  color: rgba(233,236,255,.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pinned-bar .pinned-go{
  cursor:pointer;
  color: rgba(34,211,238,.95);
  font-size: 12px;
}

/* ===== Group avatars beside messages ===== */
.msg-row{
  display:flex;
  gap:10px;
  align-items:flex-end;
  margin: 8px 0;
}
.msg-row.me{
  justify-content:flex-end;
}
.avatar-circle{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 700;
  font-size: 13px;
  color: rgba(0,0,0,.85);
  user-select:none;
}
.avatar-circle.admin{
  background: #d4af37; /* gold */
}
.avatar-circle.muted{
  background: #ff4d4f;
  color: #fff;
}
.muted-name{
  color: #ff4d4f !important;
}

/* deleted message look */
.bubble .text.deleted{
  font-style: italic;
  opacity: .75;
}

/* highlight scroll target */
.bubble.flash{
  animation: flash-bg 1.2s ease-out;
}
@keyframes flash-bg{
  0%{ box-shadow: 0 0 0 0 rgba(34,211,238,.0); }
  20%{ box-shadow: 0 0 0 4px rgba(34,211,238,.25); }
  100%{ box-shadow: 0 0 0 0 rgba(34,211,238,.0); }
}

/* unread badge on sidebar */
.unread-badge{
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(34,211,238,.9);
  color: rgba(0,0,0,.9);
  font-size: 12px;
  font-weight: 700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.conv-time-row{
  display:flex;
  align-items:center;
  gap:8px;
}


/* ===== Telegram-like header (no Bootstrap) ===== */
.tg-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(20,24,34,.95), rgba(20,24,34,.75));
  position: sticky;
  top: 0;
  z-index: 5;
}
.tg-left{ display:flex; align-items:center; gap: 12px; min-width: 0; }
.tg-avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  user-select:none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.tg-avatar-group{
  background: rgba(124,92,255,.18);
  border-color: rgba(124,92,255,.35);
}
.tg-avatar-dm{
  background: rgba(255,255,255,.06);
}
.tg-title-wrap{ min-width: 0; }
.tg-title-row{ display:flex; align-items:center; gap: 10px; }
.tg-title{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
  max-width: 52vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tg-subtitle{
  font-size: 12px;
  color: rgba(255,255,255,.60);
  margin-top: 2px;
}
.tg-status-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  box-shadow: 0 0 0 4px rgba(255,255,255,.04);
  flex: 0 0 auto;
}
.tg-status-dot.online{
  background: #2ecc71;
  box-shadow: 0 0 0 4px rgba(46,204,113,.12);
}
.tg-status-dot.offline{
  background: rgba(255,255,255,.25);
}
.tg-actions{ display:flex; align-items:center; gap: 10px; }
.tg-me{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.85);
  font-size: 12px;
  white-space: nowrap;
}

/* ===== Small polish touches ===== */
body.bg{
  background: radial-gradient(1200px 800px at 30% -10%, rgb(1, 22, 24), transparent 60%),
              radial-gradient(900px 700px at 110% 10%, rgba(0, 0, 44, 0.86), transparent 55%),
  #00050e;
  color: rgba(255,255,255,.92);
}
.glass{
  backdrop-filter: blur(10px);
}
.sidebar.glass, .chat.glass{
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.composer{
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(16,21,33,.55), rgba(16,21,33,.85));
}
#msgText:focus{
  outline: none;
  border-color: rgba(124,92,255,.35);
  box-shadow: 0 0 0 4px rgba(124,92,255,.10);
}