@font-face {
  font-family: 'Yekan';
  src: url('/fonts/yekan-regular.eot');
  src: url('/fonts/yekan-regular.eot?#iefix') format('embedded-opentype'),
       url('/fonts/Yekan.woff') format('woff'),
       url('/fonts/yekan-regular.woff') format('woff'),
       url('/fonts/yekan-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
:root {
  --sw: 310px;
  --hh: 58px;
}
/* ══════════════════════════════════════════
   THEMES
══════════════════════════════════════════ */

/* Light (default) */
[data-theme="light"] {
  --bg:#f1f3f4; --bg2:#ffffff; --bg3:#f4f4f5; --bgh:#e8edf3;
  --accent:#2b9bf4; --accent-d:#1a7fd4; --accent-g:rgba(43,155,244,.12);
  --ok:#22c55e; --err:#ef4444;
  --border:#dfe1e5; --border2:#eaecef;
  --t1:#000000; --t2:#707579; --tm:#999ea3;
  --bme:#effdde; --bother:#ffffff;
  --shadow:0 2px 12px rgba(0,0,0,.08); --shadow2:0 4px 24px rgba(0,0,0,.13);
}

/* Dark */
[data-theme="dark"] {
  --bg:#0e1117; --bg2:#1c2333; --bg3:#242f3d; --bgh:#2b3a4d;
  --accent:#2b9bf4; --accent-d:#5ab3f7; --accent-g:rgba(43,155,244,.15);
  --ok:#22c55e; --err:#f87171;
  --border:#2b3a4d; --border2:#344455;
  --t1:#e8edf3; --t2:#8899aa; --tm:#556677;
  --bme:#1a3a2a; --bother:#1c2333;
  --shadow:0 2px 12px rgba(0,0,0,.4); --shadow2:0 4px 24px rgba(0,0,0,.6);
}

/* Ocean (آبی تیره) */
[data-theme="ocean"] {
  --bg:#0a1628; --bg2:#0d2137; --bg3:#112840; --bgh:#163350;
  --accent:#38bdf8; --accent-d:#7dd3fc; --accent-g:rgba(56,189,248,.15);
  --ok:#34d399; --err:#f87171;
  --border:#1e3a52; --border2:#244460;
  --t1:#e0f0ff; --t2:#7aaabb; --tm:#446677;
  --bme:#0d3a2a; --bother:#0d2137;
  --shadow:0 2px 12px rgba(0,0,0,.5); --shadow2:0 4px 24px rgba(0,0,0,.7);
}

/* Forest (سبز) */
[data-theme="forest"] {
  --bg:#0f1f13; --bg2:#162819; --bg3:#1c3020; --bgh:#223a28;
  --accent:#4ade80; --accent-d:#86efac; --accent-g:rgba(74,222,128,.15);
  --ok:#34d399; --err:#f87171;
  --border:#243d2a; --border2:#2c4a32;
  --t1:#e0f0e8; --t2:#7aaa88; --tm:#446655;
  --bme:#1a3a1a; --bother:#162819;
  --shadow:0 2px 12px rgba(0,0,0,.5); --shadow2:0 4px 24px rgba(0,0,0,.7);
}

/* Rose (صورتی ملایم - روشن) */
[data-theme="rose"] {
  --bg:#fff0f3; --bg2:#ffffff; --bg3:#fff5f7; --bgh:#ffe4ea;
  --accent:#f43f5e; --accent-d:#e11d48; --accent-g:rgba(244,63,94,.12);
  --ok:#22c55e; --err:#dc2626;
  --border:#fecdd3; --border2:#ffe4e8;
  --t1:#1a0a0d; --t2:#8b5560; --tm:#c08090;
  --bme:#fce7f3; --bother:#ffffff;
  --shadow:0 2px 12px rgba(244,63,94,.1); --shadow2:0 4px 24px rgba(244,63,94,.18);
}

/* ══════════════════════════════════════════ */



/* ══════════════ */

* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
body { font-family:'Yekan',Tahoma,'Segoe UI',Arial,sans-serif; background:var(--bg); color:var(--t1); height:100dvh; overflow:hidden; display:flex; font-size:14px; }
@media (pointer: coarse) {
  * { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
  input, textarea, [contenteditable] { -webkit-user-select:text !important; user-select:text !important; }
  #img-viewer-img { -webkit-touch-callout:default !important; }
}

/* ── AUTH ─────────────────────────────────────────────── */
#auth-screen { position:fixed; inset:0; background:linear-gradient(135deg,#e8f0fe 0%,#f0f4ff 100%); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
#auth-screen.hidden { display:none; }
.auth-box { width:100%; max-width:380px; background:#fff; border-radius:20px; padding:36px 28px; box-shadow:var(--shadow2); }
.auth-logo { text-align:center; margin-bottom:28px; }
.auth-logo .ico { width:64px; height:64px; background:linear-gradient(135deg,var(--accent-d),var(--accent)); border-radius:18px; display:inline-flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:12px; box-shadow:0 4px 16px rgba(79,142,247,.35); }
.auth-logo h1 { font-size:22px; font-weight:700; color:var(--t1); }
.auth-logo p { color:var(--t2); font-size:12px; margin-top:4px; }
.auth-tabs { display:flex; gap:4px; background:var(--bg3); border-radius:10px; padding:4px; margin-bottom:22px; }
.auth-tab { flex:1; padding:8px; border:none; background:transparent; color:var(--t2); border-radius:7px; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; transition:all .2s; }
.auth-tab.active { background:#fff; color:var(--accent); box-shadow:var(--shadow); }
.fg { margin-bottom:14px; }
.fg label { display:block; font-size:12px; color:var(--t2); margin-bottom:5px; font-weight:600; }
.fg input { width:100%; padding:11px 13px; background:var(--bg3); border:1.5px solid var(--border); border-radius:10px; color:var(--t1); font-family:inherit; font-size:14px; outline:none; transition:border-color .2s,box-shadow .2s; }
.fg input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-g); background:#fff; }
.fg input::placeholder { color:var(--tm); }
.btn-p { width:100%; padding:13px; background:linear-gradient(135deg,var(--accent-d),var(--accent)); border:none; border-radius:10px; color:#fff; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:opacity .15s,transform .1s; box-shadow:0 3px 12px rgba(79,142,247,.4); }
.btn-p:hover { opacity:.92; } .btn-p:active { transform:scale(.98); }
.auth-err { background:#fef2f2; border:1px solid #fecaca; border-radius:8px; padding:10px 13px; color:var(--err); font-size:12px; margin-bottom:14px; display:none; }

/* ── WELCOME ──────────────────────────────────────────── */
#welcome-screen { position:fixed; inset:0; background:linear-gradient(135deg,#e8f0fe,#f0f4ff); display:flex; align-items:center; justify-content:center; z-index:90; padding:20px; }
#welcome-screen.hidden { display:none; }
.welcome-box { width:100%; max-width:400px; background:#fff; border-radius:20px; padding:36px 28px; text-align:center; box-shadow:var(--shadow2); }
.welcome-box .ico { font-size:56px; margin-bottom:16px; }
.welcome-box h2 { font-size:20px; margin-bottom:8px; color:var(--t1); }
.welcome-box p { color:var(--t2); font-size:13px; line-height:1.8; margin-bottom:20px; }
.welcome-id { background:var(--accent-g); border:1.5px solid var(--accent); border-radius:12px; padding:14px; margin-bottom:20px; }
.welcome-id small { color:var(--accent-d); font-size:11px; display:block; margin-bottom:4px; font-weight:600; }
.welcome-id strong { color:var(--accent-d); font-size:22px; font-weight:700; }
.welcome-steps { text-align:right; margin-bottom:24px; }
.welcome-steps li { color:var(--t2); font-size:13px; padding:7px 0; border-bottom:1px solid var(--border2); list-style:none; }

/* ── APP ──────────────────────────────────────────────── */
#app { display:flex; width:100%; height:100dvh; }
#app.hidden { display:none; }

/* ── SIDEBAR ──────────────────────────────────────────── */
#sidebar { width:var(--sw); background:var(--bg2); border-left:1px solid var(--border); display:flex; flex-direction:column; height:100%; flex-shrink:0; transition:transform .3s; }
.sb-head { height:var(--hh); padding:0 14px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); background:#fff; }
.sb-head h2 { font-size:16px; font-weight:700; color:var(--t1); }
.head-acts { display:flex; gap:4px; }
.ibtn { width:34px; height:34px; border:none; background:transparent; color:var(--t2); border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; transition:background .15s,color .15s; }
.ibtn-label { background:var(--accent-g); border:1px solid rgba(79,142,247,.4); color:var(--accent-d); cursor:pointer; font-size:11px; font-weight:700; padding:6px 10px; border-radius:20px; transition:background .15s; font-family:inherit; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
.ibtn-label:hover { background:rgba(79,142,247,.2); }
.ibtn:hover { background:var(--bgh); color:var(--accent); }
.sb-search { padding:10px 12px; border-bottom:1px solid var(--border2); background:#fff; }
.sb-search input { width:100%; padding:8px 12px; background:var(--bg3); border:1.5px solid var(--border); border-radius:20px; color:var(--t1); font-family:inherit; font-size:13px; outline:none; transition:border-color .2s; }
.sb-search input:focus { border-color:var(--accent); background:#fff; }
.sb-tabs { display:flex; border-bottom:1px solid var(--border); background:#fff; flex-shrink:0; }
.sb-tab { flex:1; padding:10px 0; border:none; background:transparent; font-family:inherit; font-size:13px; font-weight:600; color:var(--t2); cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; }
.sb-tab.active { color:var(--accent-d); border-bottom-color:var(--accent); }
.sb-panel { display:none; flex:1; flex-direction:column; overflow:hidden; }
.sb-panel.active { display:flex; }
#channel-list { flex:1; overflow-y:auto; padding:6px 0; background:var(--bg2); -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
#channel-list::-webkit-scrollbar { width:3px; }
#channel-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.ch-item:hover { background:var(--bgh); }
.ch-item.active { background:var(--accent-g); border-right:3px solid var(--accent); }
.ch-item.active + .ch-item-delete-bg,
.ch-item-wrap:has(.ch-item.active) .ch-item-delete-bg { display:none; }
.ch-av { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--accent-d),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; overflow:hidden; position:relative; color:#fff; font-weight:700; }
.ch-av img { width:100%; height:100%; object-fit:cover; }
.on-dot { width:12px; height:12px; background:var(--ok); border:2px solid #fff; border-radius:50%; position:absolute; bottom:1px; right:1px; }
.ch-info { flex:1; min-width:0; }
.ch-name { font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--t1); display:flex; align-items:center; gap:4px; pointer-events:none; }
.ch-pin-ico { font-size:11px; opacity:.5; display:inline-block; flex-shrink:0; }
.ch-item-wrap.pinned .ch-item { background:#f4f8ff; }
.ch-item-wrap.pinned .ch-item.active { background:var(--accent-g); }
.ch-last { font-size:11px; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; pointer-events:none; }
.ch-meta { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; }
.ch-time { font-size:10px; color:var(--tm); }
.ubadge { background:var(--accent); color:#fff; font-size:10px; font-weight:700; border-radius:10px; padding:2px 7px; min-width:20px; text-align:center; }
.contacts-list { flex:1; overflow-y:auto; padding:8px 0; background:var(--bg2); }
/* ── contact item - تلگرام مانند ── */
.contact-item {
  padding:10px 14px; display:flex; align-items:center; gap:12px;
  cursor:pointer; transition:background .12s ease;
  position:relative;
}
.contact-item::after {
  content:''; position:absolute; bottom:0; right:72px; left:0;
  height:1px; background:var(--border2); opacity:0.6;
}
.contact-item:last-child::after { display:none; }
.contact-item:hover { background:var(--bgh); }
.contact-item:active { background:var(--accent-g); }
.contact-item .ch-av {
  background:linear-gradient(135deg,#7c3aed,#a78bfa);
  box-shadow:0 2px 8px rgba(124,58,237,0.25);
}
.contact-item .ch-info { flex:1; min-width:0; }
.contact-item .ch-name { font-size:14px; font-weight:700; color:var(--t1); }
.contact-item .ch-last { font-size:12px; color:var(--t2); margin-top:2px; opacity:0.8; }
/* آنلاین badge */
.contact-item .contact-online-badge {
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(34,197,94,0.12); color:#16a34a;
  font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px;
  flex-shrink:0;
}
[data-theme="dark"] .contact-item .contact-online-badge {
  background:rgba(34,197,94,0.18); color:#4ade80;
}
/* دکمه‌های action */
.contact-actions-wrap { display:flex; gap:4px; flex-shrink:0; align-items:center; }
.contact-act-btn {
  width:34px; height:34px; border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:16px; transition:background .15s, transform .1s;
  background:transparent; color:var(--t2);
}
.contact-act-btn:hover { background:var(--bgh); transform:scale(1.1); }
.contact-act-btn.danger:hover { background:rgba(239,68,68,0.1); color:var(--err); }
/* سکشن‌بندی الفبایی */
.contact-alpha-section { padding:6px 16px 2px; font-size:11px; font-weight:800; color:var(--accent); letter-spacing:0.05em; }
/* add contact bar بهتر */
.add-contact-bar { padding:10px 12px; background:var(--bg2); border-bottom:1px solid var(--border2); display:flex; gap:6px; }
.add-contact-bar input { flex:1; padding:8px 14px; background:var(--bg3); border:1.5px solid var(--border); border-radius:22px; font-family:inherit; font-size:13px; color:var(--t1); outline:none; transition:border-color .2s, box-shadow .2s; }
.add-contact-bar input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-g); }
.add-contact-bar button { padding:8px 16px; background:linear-gradient(135deg,var(--accent-d),var(--accent)); color:#fff; border:none; border-radius:22px; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; box-shadow:0 2px 8px rgba(43,155,244,0.3); transition:transform .1s, opacity .15s; }
.add-contact-bar button:active { transform:scale(0.96); }
.contact-actions { display:flex; gap:4px; flex-shrink:0; }
.add-contact-bar { padding:10px 12px; background:#fff; border-bottom:1px solid var(--border2); display:flex; gap:6px; }
.add-contact-bar input { flex:1; padding:7px 10px; background:var(--bg3); border:1.5px solid var(--border); border-radius:20px; font-family:inherit; font-size:12px; color:var(--t1); outline:none; }
.add-contact-bar input:focus { border-color:var(--accent); }
.add-contact-bar button { padding:7px 12px; background:var(--accent); color:#fff; border:none; border-radius:20px; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; }
.sb-foot { padding:10px 14px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; background:#fff; flex-shrink:0; }
.my-av { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#7c3aed,var(--accent)); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; overflow:hidden; cursor:pointer; color:#fff; font-weight:700; }
.my-av img { width:100%; height:100%; object-fit:cover; }
.my-info { flex:1; cursor:pointer; }
.my-name { font-size:13px; font-weight:700; color:var(--t1); }
.my-id { font-size:10px; color:var(--t2); }

/* ── CHAT ─────────────────────────────────────────────── */
#chat-area { flex:1; display:flex; flex-direction:column; height:100%; min-width:0; background:var(--bg); overflow:hidden; }
#chat-ph { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--tm); gap:12px; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234f8ef7' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
#chat-ph .ph-ico { font-size:56px; }
#chat-ph p { font-size:14px; color:var(--t2); }
#chat-ph p.sub { font-size:12px; color:var(--tm); }
#chat-view { flex:1; display:none; flex-direction:column; height:100%; }
#chat-view.active { display:flex; }
.chat-head { height:var(--hh); padding:0 14px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border); background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.05); flex-shrink:0; }
.ch-back { display:none; border:none; background:transparent; color:var(--t2); cursor:pointer; font-size:22px; padding:4px; border-radius:6px; }
.head-av { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--accent-d),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; overflow:hidden; color:#fff; font-weight:700; }
.head-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.head-info { flex:1; }
.head-name { font-size:14px; font-weight:700; color:var(--t1); }
.head-sub { font-size:11px; color:var(--t2); margin-top:1px; }

/* ── MESSAGES ─────────────────────────────────────────── */
#msgs { flex:1; overflow-y:auto; overflow-x:hidden; padding:12px 14px; display:flex; flex-direction:column; gap:2px; background:var(--bg); touch-action:pan-y; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; }
#msgs::-webkit-scrollbar { width:4px; }
#msgs::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* پس‌زمینه چت - الگوی روشن */
  #msgs { background-color:#c8d8e8; }


/* ── انیمیشن ارسال پیام ── */
@keyframes mIn {
  from { opacity:0; transform:translateY(8px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

  to   { opacity:1; transform:translateX(0) scale(1); }
}

  to   { opacity:1; transform:translateX(0) scale(1); }
}
.mw.me { } .mw.other { }

/* ── Swipe to reply ── */
.mw { transition: transform .15s ease; }
.mw.swiping { transition: none; }
.swipe-reply-ico {
  position:absolute; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s; pointer-events:none;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.mw.me   .swipe-reply-ico { right:-40px; }
.mw.other .swipe-reply-ico { left:-40px; }
.swipe-reply-ico.show { opacity:1; }

/* ── دابل‌تپ لایک ── */
@keyframes likePopup {
  0%   { opacity:0; transform:scale(.3) translateY(0); }
  50%  { opacity:1; transform:scale(1.4) translateY(-8px); }
  100% { opacity:0; transform:scale(1)   translateY(-20px); }
}
.like-popup {
  position:absolute; font-size:28px; pointer-events:none;
  animation: likePopup .6s ease forwards;
  z-index:99;
}



.mw { display:flex; flex-direction:column; max-width:75%; margin-bottom:2px; min-width:0; }
@keyframes mIn { from { opacity:0; transform:translateY(5px); } }
.mw.me { align-self:flex-start; align-items:flex-start; }
.mw.other { align-self:flex-end; align-items:flex-end; }
/* گروه: ردیف افقی آواتار + حباب */
.mw.other.grp { flex-direction:row; align-items:flex-start; gap:8px; max-width:82%; align-self:flex-end !important; }
.mw.me.grp { flex-direction:column; align-self:flex-start !important; align-items:flex-start !important; margin-right:40px; }
.m-grp-av { width:36px; height:36px; border-radius:50%; flex-shrink:0; display:none;
  color:#fff; font-size:14px; font-weight:700;
  align-items:center; justify-content:center; overflow:hidden; cursor:pointer;
  margin-top:2px; }
.m-grp-av img { width:100%; height:100%; object-fit:cover; }
.mw.other.grp .m-grp-av { display:flex; }
.m-grp-body { display:flex; flex-direction:column; align-items:flex-start; min-width:0; flex:1; max-width:calc(100% - 44px); }
.m-sender { font-size:12px; margin-bottom:3px; padding:0 4px; display:none; font-weight:700; }
.mw.other.grp .m-sender { display:block; }
.mb-wrap { position:relative; min-width:0; max-width:100%; }
.m-bubble { padding:9px 13px; border-radius:18px; font-size:13px; line-height:1.55; word-break:break-word; overflow-wrap:anywhere; max-width:100%; position:relative; unicode-bidi:plaintext; }
.mw.me .m-bubble { background:#effdde; color:#000; border-bottom-left-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.13); }
.mw.other .m-bubble { background:#fff; color:#000; border-bottom-right-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.13); }
.m-del { color:var(--tm); font-style:italic; font-size:12px; }

.m-system { text-align:center; color:var(--t2); font-size:11px; padding:4px 12px; margin:4px auto; background:rgba(0,0,0,.04); border-radius:12px; max-width:80%; font-style:italic; }
.m-foot { display:flex; align-items:center; gap:3px; margin-top:3px; padding:0 4px; }
.mw.me .m-foot { flex-direction:row-reverse; }
.m-time { font-size:10px; color:var(--tm); }
.mw.me .m-time { color:rgba(0,0,0,.36); }
.msg-search-bar { display:flex; }
.msg-highlight-search { background:rgba(250,204,21,.4) !important; border-radius:3px; }
.msg-highlight-search.current { background:rgba(234,88,12,.35) !important; }
.date-sep { display:flex; align-items:center; justify-content:center; padding:8px 0; margin:4px 0; }
/* دکمه نمایش بیشتر */
.load-more-btn {
  display:block; margin:8px auto 12px; padding:8px 24px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:20px; color:var(--accent); font-family:inherit;
  font-size:12px; font-weight:600; cursor:pointer;
  transition:background .15s,transform .1s;
}
.load-more-btn:hover { background:var(--bgh); }
.load-more-btn:active { transform:scale(.96); }
.load-more-btn:disabled { opacity:.5; cursor:default; }
.date-sep span { font-size:12px; color:#fff; font-weight:500; background:rgba(0,0,0,.28); padding:4px 12px; border-radius:14px; }
.scroll-down-btn {
  position:absolute; bottom:80px; left:16px; z-index:50;
  width:40px; height:40px; border-radius:50%;
  background:#fff; border:none; box-shadow:0 2px 12px rgba(0,0,0,.18);
  cursor:pointer; font-size:18px; display:none;
  align-items:center; justify-content:center; transition:all .2s;
}
.scroll-down-btn.show { display:flex; }
.scroll-down-btn .sdb-badge {
  position:absolute; top:-4px; right:-4px;
  background:var(--accent); color:#fff;
  font-size:10px; font-weight:700; border-radius:10px;
  padding:1px 5px; min-width:18px; text-align:center; display:none;
}
.scroll-down-btn .sdb-badge.show { display:block; }
@keyframes msgHighlight { 0%,100%{background:transparent} 30%,70%{background:rgba(79,142,247,.18)} }
.msg-highlight { animation:msgHighlight 1.2s ease; }
.m-ticks { font-size:12px; line-height:1; }
.m-ticks.sent { color:var(--tm); }
.m-ticks.read { color:#4dcd5e; }
.m-edited { font-size:10px; color:var(--tm); }

/* Actions on hover */
/* Action sheet - تلگرام مانند */
.m-acts { display:none; } /* غیرفعال - از action sheet استفاده میکنیم */
.user-profile-modal { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; }
.user-profile-modal.show { display:flex; }
.upm-bg { position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); }
.upm-box { position:relative; width:100%; max-width:340px; background:var(--bg2); border-radius:16px; overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,.3); }
.upm-close { position:absolute; top:10px; left:10px; background:rgba(0,0,0,.3); border:none; color:#fff; width:30px; height:30px; border-radius:50%; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:1; }
.upm-header { background:var(--accent); padding:28px 20px 20px; display:flex; flex-direction:column; align-items:center; background-size:cover; background-position:center; min-height:160px; justify-content:flex-end; }
.upm-av { width:80px; height:80px; border-radius:50%; border:3px solid #fff; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:32px; color:#fff; font-weight:700; cursor:pointer; margin-bottom:10px; flex-shrink:0; }
.upm-av img { width:100%; height:100%; object-fit:cover; }
.upm-name { font-size:18px; font-weight:700; color:#fff; text-align:center; margin-bottom:3px; text-shadow:0 1px 4px rgba(0,0,0,.3); }
.upm-sub { font-size:12px; color:rgba(255,255,255,.9); text-align:center; }
.upm-actions { display:flex; gap:0; border-bottom:1px solid var(--border2); }
.upm-act-btn { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 8px; border:none; background:transparent; cursor:pointer; font-family:inherit; border-left:1px solid var(--border2); }
.upm-act-btn:first-child { border-left:none; }
.upm-act-btn:active { background:var(--bgh); }
.upm-act-ico { font-size:20px; line-height:1; }
.upm-act-lbl { font-size:11px; font-weight:600; color:var(--accent); }
.upm-row { display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--border2); }
.upm-row:last-child { border-bottom:none; }
.upm-row-ico { font-size:18px; width:28px; text-align:center; flex-shrink:0; color:var(--accent); }
.upm-row-val { color:var(--t1); font-size:14px; }
.upm-row-lbl { font-size:11px; color:var(--t2); margin-top:1px; }
.ci-av-wrap:hover #ci-av-overlay { opacity:1 !important; }
#ci-av:hover #ci-av-overlay { opacity:1 !important; }
.upm-close { position:absolute; top:12px; left:12px; background:rgba(0,0,0,.3); border:none; color:#fff; width:32px; height:32px; border-radius:50%; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:1; }

/* fullscreen عکس */
.img-viewer { position:fixed; inset:0; z-index:300; background:#17212b; display:none; align-items:center; justify-content:center; }
.img-viewer.show { display:flex; }
.img-viewer img { max-width:95vw; max-height:85vh; object-fit:contain; border-radius:8px; -webkit-user-select:auto !important; user-select:auto !important; touch-action:none; transform-origin:0 0; }






.msg-sheet { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; justify-content:flex-end; }
.msg-sheet-bg { position:absolute; inset:0; background:rgba(0,0,0,.4); backdrop-filter:blur(2px); }
.msg-sheet-box { position:relative; background:#fff; border-radius:18px 18px 0 0; padding:8px 0 20px; max-height:80vh; overflow-y:auto; transform:translateY(100%); transition:transform .25s cubic-bezier(.32,1,.23,1); }
.msg-sheet-prev { padding:12px 16px; border-bottom:1px solid var(--border2); display:flex; gap:10px; align-items:flex-start; margin-bottom:4px; }
.msg-sheet-prev-bubble { background:var(--bg3); border-radius:10px; padding:8px 12px; font-size:12px; color:var(--t2); flex:1; line-height:1.5; }
.msg-sheet-prev-bubble strong { color:var(--accent-d); display:block; font-size:11px; margin-bottom:2px; }
.react-row { display:flex; overflow-x:auto; overflow-y:visible; padding:12px 14px 10px; border-bottom:1px solid var(--border2); margin-bottom:4px; gap:4px; scrollbar-width:none; -ms-overflow-style:none; touch-action:pan-x; overscroll-behavior-x:contain; }
.react-row::-webkit-scrollbar { display:none; }
@keyframes reactBounce { 0%{transform:scale(1) translateY(0)} 30%{transform:scale(1.5) translateY(-10px)} 60%{transform:scale(1.3) translateY(-6px)} 80%{transform:scale(1.42) translateY(-8px)} 100%{transform:scale(1.4) translateY(-8px)} }
.react-big { border:none; background:transparent; font-size:28px; cursor:pointer; padding:8px 10px; border-radius:50%; transition:background .15s; line-height:1; flex-shrink:0; position:relative; }
.react-big:hover { animation:reactBounce .35s cubic-bezier(.34,1.56,.64,1) forwards; background:var(--accent-g); }
.react-big:not(:hover) { transform:scale(1) translateY(0); transition:transform .2s ease; }
.react-big:active { transform:scale(.88) !important; animation:none !important; }
.sheet-act { display:flex; align-items:center; gap:14px; padding:13px 20px; cursor:pointer; transition:background .15s; font-size:14px; color:var(--t1); border:none; background:transparent; width:100%; text-align:right; font-family:inherit; }
.sheet-act:hover { background:var(--bg3); }
.sheet-act-ico { font-size:20px; width:28px; text-align:center; }
.sheet-act.danger { color:var(--err); }
.sheet-sep { height:1px; background:var(--border2); margin:4px 0; }

/* فایل‌ها */
.m-img { max-width:250px; border-radius:12px; cursor:pointer; display:block; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.img-group { display:grid; gap:2px; max-width:min(260px, 75vw); border-radius:12px; overflow:hidden; }
.img-group.count-2 { grid-template-columns:1fr 1fr; }
.img-group.count-3 { grid-template-columns:1fr 1fr; }
.img-group.count-3 .ig-item:first-child { grid-column:1/3; }
.img-group.count-4 { grid-template-columns:1fr 1fr; }
.img-group.count-many { grid-template-columns:1fr 1fr 1fr; }
.ig-item { position:relative; overflow:hidden; aspect-ratio:1; background:#ddd; cursor:pointer; }
.ig-item img { width:100%; height:100%; object-fit:cover; display:block; }
.ig-item:active { opacity:.85; }
.m-file { display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.04); border-radius:10px; padding:10px 12px; text-decoration:none; color:inherit; min-width:160px; }
.mw.me .m-file { background:rgba(0,0,0,.06); color:var(--t1); }
.m-file-ico { font-size:28px; flex-shrink:0; }
.m-fn { font-size:12px; font-weight:600; color:var(--t1); }
.m-fs { font-size:10px; color:var(--t2); margin-top:2px; }
.mw.me .m-fs { color:var(--t2); }
.m-reply { background:rgba(0,0,0,.06); border-right:3px solid var(--accent); border-radius:6px; padding:6px 10px; margin-bottom:6px; font-size:12px; color:var(--t1); cursor:pointer; overflow:hidden; max-width:100%; box-sizing:border-box; }
.mw.me .m-reply { background:rgba(0,100,0,.12); border-right-color:#3a8f3a; color:rgba(0,0,0,.75); }
.m-reply strong { color:var(--accent); display:block; margin-bottom:2px; font-size:11px; font-weight:700; }
.mw.me .m-reply strong { color:#2a7a2a; }
.m-reply-txt { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
@font-face {
  font-family: 'Yekan';
  src: url('/fonts/yekan-regular.eot');
  src: url('/fonts/yekan-regular.eot?#iefix') format('embedded-opentype'),
       url('/fonts/Yekan.woff') format('woff'),
       url('/fonts/yekan-regular.woff') format('woff'),
       url('/fonts/yekan-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
:root {
  --sw: 310px;
  --hh: 58px;
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
body { font-family:'Yekan',Tahoma,'Segoe UI',Arial,sans-serif; background:var(--bg); color:var(--t1); height:100dvh; overflow:hidden; display:flex; font-size:14px; }
@media (pointer: coarse) {
  * { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
  input, textarea, [contenteditable] { -webkit-user-select:text !important; user-select:text !important; }
  #img-viewer-img { -webkit-touch-callout:default !important; }
}

/* ── AUTH ─────────────────────────────────────────────── */
#auth-screen { position:fixed; inset:0; background:linear-gradient(135deg,#e8f0fe 0%,#f0f4ff 100%); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
#auth-screen.hidden { display:none; }
.auth-box { width:100%; max-width:380px; background:#fff; border-radius:20px; padding:36px 28px; box-shadow:var(--shadow2); }
.auth-logo { text-align:center; margin-bottom:28px; }
.auth-logo .ico { width:64px; height:64px; background:linear-gradient(135deg,var(--accent-d),var(--accent)); border-radius:18px; display:inline-flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:12px; box-shadow:0 4px 16px rgba(79,142,247,.35); }
.auth-logo h1 { font-size:22px; font-weight:700; color:var(--t1); }
.auth-logo p { color:var(--t2); font-size:12px; margin-top:4px; }
.auth-tabs { display:flex; gap:4px; background:var(--bg3); border-radius:10px; padding:4px; margin-bottom:22px; }
.auth-tab { flex:1; padding:8px; border:none; background:transparent; color:var(--t2); border-radius:7px; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; transition:all .2s; }
.auth-tab.active { background:#fff; color:var(--accent); box-shadow:var(--shadow); }
.fg { margin-bottom:14px; }
.fg label { display:block; font-size:12px; color:var(--t2); margin-bottom:5px; font-weight:600; }
.fg input { width:100%; padding:11px 13px; background:var(--bg3); border:1.5px solid var(--border); border-radius:10px; color:var(--t1); font-family:inherit; font-size:14px; outline:none; transition:border-color .2s,box-shadow .2s; }
.fg input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-g); background:#fff; }
.fg input::placeholder { color:var(--tm); }
.btn-p { width:100%; padding:13px; background:linear-gradient(135deg,var(--accent-d),var(--accent)); border:none; border-radius:10px; color:#fff; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:opacity .15s,transform .1s; box-shadow:0 3px 12px rgba(79,142,247,.4); }
.btn-p:hover { opacity:.92; } .btn-p:active { transform:scale(.98); }
.auth-err { background:#fef2f2; border:1px solid #fecaca; border-radius:8px; padding:10px 13px; color:var(--err); font-size:12px; margin-bottom:14px; display:none; }

/* ── WELCOME ──────────────────────────────────────────── */
#welcome-screen { position:fixed; inset:0; background:linear-gradient(135deg,#e8f0fe,#f0f4ff); display:flex; align-items:center; justify-content:center; z-index:90; padding:20px; }
#welcome-screen.hidden { display:none; }
.welcome-box { width:100%; max-width:400px; background:#fff; border-radius:20px; padding:36px 28px; text-align:center; box-shadow:var(--shadow2); }
.welcome-box .ico { font-size:56px; margin-bottom:16px; }
.welcome-box h2 { font-size:20px; margin-bottom:8px; color:var(--t1); }
.welcome-box p { color:var(--t2); font-size:13px; line-height:1.8; margin-bottom:20px; }
.welcome-id { background:var(--accent-g); border:1.5px solid var(--accent); border-radius:12px; padding:14px; margin-bottom:20px; }
.welcome-id small { color:var(--accent-d); font-size:11px; display:block; margin-bottom:4px; font-weight:600; }
.welcome-id strong { color:var(--accent-d); font-size:22px; font-weight:700; }
.welcome-steps { text-align:right; margin-bottom:24px; }
.welcome-steps li { color:var(--t2); font-size:13px; padding:7px 0; border-bottom:1px solid var(--border2); list-style:none; }

/* ── APP ──────────────────────────────────────────────── */
#app { display:flex; width:100%; height:100dvh; }
#app.hidden { display:none; }

/* ── SIDEBAR ──────────────────────────────────────────── */
#sidebar { width:var(--sw); background:var(--bg2); border-left:1px solid var(--border); display:flex; flex-direction:column; height:100%; flex-shrink:0; transition:transform .3s; }
.sb-head { height:var(--hh); padding:0 14px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); background:#fff; }
.sb-head h2 { font-size:16px; font-weight:700; color:var(--t1); }
.head-acts { display:flex; gap:4px; }
.ibtn { width:34px; height:34px; border:none; background:transparent; color:var(--t2); border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; transition:background .15s,color .15s; }
.ibtn-label { background:var(--accent-g); border:1px solid rgba(79,142,247,.4); color:var(--accent-d); cursor:pointer; font-size:11px; font-weight:700; padding:6px 10px; border-radius:20px; transition:background .15s; font-family:inherit; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
.ibtn-label:hover { background:rgba(79,142,247,.2); }
.ibtn:hover { background:var(--bgh); color:var(--accent); }
.sb-search { padding:10px 12px; border-bottom:1px solid var(--border2); background:#fff; }
.sb-search input { width:100%; padding:8px 12px; background:var(--bg3); border:1.5px solid var(--border); border-radius:20px; color:var(--t1); font-family:inherit; font-size:13px; outline:none; transition:border-color .2s; }
.sb-search input:focus { border-color:var(--accent); background:#fff; }
.sb-tabs { display:flex; border-bottom:1px solid var(--border); background:#fff; flex-shrink:0; }
.sb-tab { flex:1; padding:10px 0; border:none; background:transparent; font-family:inherit; font-size:13px; font-weight:600; color:var(--t2); cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; }
.sb-tab.active { color:var(--accent-d); border-bottom-color:var(--accent); }
.sb-panel { display:none; flex:1; flex-direction:column; overflow:hidden; }
.sb-panel.active { display:flex; }
#channel-list { flex:1; overflow-y:auto; padding:6px 0; background:var(--bg2); -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
#channel-list::-webkit-scrollbar { width:3px; }
#channel-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.ch-item-wrap { position:relative; overflow:hidden; border-bottom:1px solid var(--border2); }
.ch-item { padding:10px 14px; display:flex; align-items:center; gap:11px; cursor:pointer; background:#fff; position:relative; z-index:2; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; width:100%; }
.ch-item-delete-bg { position:absolute; right:0; top:0; bottom:0; width:80px; background:#ef4444; display:flex; align-items:center; justify-content:center; color:#fff; font-size:26px; z-index:1; }
.delete-chat-modal { position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; padding:20px; }
.delete-chat-modal-bg { position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); }
.delete-chat-modal-box { position:relative; background:#fff; border-radius:14px; width:100%; max-width:340px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.2); }
.delete-chat-modal-box h3 { padding:18px 20px 14px; font-size:16px; font-weight:700; text-align:center; border-bottom:1px solid var(--border2); margin:0; }
.delete-chat-opt { display:flex; align-items:center; gap:14px; padding:14px 20px; cursor:pointer; font-size:14px; transition:background .15s; border-bottom:1px solid var(--border2); }
.delete-chat-opt:last-of-type { border-bottom:none; }
.delete-chat-opt:hover { background:var(--bg3); }
.delete-chat-opt-ico { font-size:20px; width:28px; text-align:center; flex-shrink:0; }
.delete-chat-opt.danger { color:var(--err); }
.delete-chat-cancel { width:100%; padding:14px; background:transparent; border:none; border-top:1px solid var(--border2); font-family:inherit; font-size:15px; font-weight:600; cursor:pointer; color:var(--accent); }
.ch-item:hover { background:var(--bgh); }
.ch-item.active { background:var(--accent-g); border-right:3px solid var(--accent); }
.ch-item.active + .ch-item-delete-bg,
.ch-item-wrap:has(.ch-item.active) .ch-item-delete-bg { display:none; }
.ch-av { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--accent-d),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; overflow:hidden; position:relative; color:#fff; font-weight:700; }
.ch-av img { width:100%; height:100%; object-fit:cover; }
.on-dot { width:12px; height:12px; background:var(--ok); border:2px solid #fff; border-radius:50%; position:absolute; bottom:1px; right:1px; }
.ch-info { flex:1; min-width:0; }
.ch-name { font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--t1); display:flex; align-items:center; gap:4px; pointer-events:none; }
.ch-pin-ico { font-size:11px; opacity:.5; display:inline-block; flex-shrink:0; }
.ch-item-wrap.pinned .ch-item { background:#f4f8ff; }
.ch-item-wrap.pinned .ch-item.active { background:var(--accent-g); }
.ch-last { font-size:11px; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; pointer-events:none; }
.ch-meta { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; }
.ch-time { font-size:10px; color:var(--tm); }
.ubadge { background:var(--accent); color:#fff; font-size:10px; font-weight:700; border-radius:10px; padding:2px 7px; min-width:20px; text-align:center; }
/* contacts styles moved to first definition */
.contact-actions { display:flex; gap:4px; flex-shrink:0; }
.add-contact-bar { padding:10px 12px; background:#fff; border-bottom:1px solid var(--border2); display:flex; gap:6px; }
.add-contact-bar input { flex:1; padding:7px 10px; background:var(--bg3); border:1.5px solid var(--border); border-radius:20px; font-family:inherit; font-size:12px; color:var(--t1); outline:none; }
.add-contact-bar input:focus { border-color:var(--accent); }
.add-contact-bar button { padding:7px 12px; background:var(--accent); color:#fff; border:none; border-radius:20px; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; }
.sb-foot { padding:10px 14px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; background:#fff; flex-shrink:0; }
.my-av { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#7c3aed,var(--accent)); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; overflow:hidden; cursor:pointer; color:#fff; font-weight:700; }
.my-av img { width:100%; height:100%; object-fit:cover; }
.my-info { flex:1; cursor:pointer; }
.my-name { font-size:13px; font-weight:700; color:var(--t1); }
.my-id { font-size:10px; color:var(--t2); }

/* ── CHAT ─────────────────────────────────────────────── */
#chat-area { flex:1; display:flex; flex-direction:column; height:100%; min-width:0; background:var(--bg); overflow:hidden; }
#chat-ph { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--tm); gap:12px; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234f8ef7' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
#chat-ph .ph-ico { font-size:56px; }
#chat-ph p { font-size:14px; color:var(--t2); }
#chat-ph p.sub { font-size:12px; color:var(--tm); }
#chat-view { flex:1; display:none; flex-direction:column; height:100%; }
#chat-view.active { display:flex; }
.chat-head { height:var(--hh); padding:0 14px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border); background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.05); flex-shrink:0; }
.ch-back { display:none; border:none; background:transparent; color:var(--t2); cursor:pointer; font-size:22px; padding:4px; border-radius:6px; }
.head-av { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--accent-d),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; overflow:hidden; color:#fff; font-weight:700; }
.head-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.head-info { flex:1; }
.head-name { font-size:14px; font-weight:700; color:var(--t1); }
.head-sub { font-size:11px; color:var(--t2); margin-top:1px; }

/* ── MESSAGES ─────────────────────────────────────────── */
#msgs { flex:1; overflow-y:auto; overflow-x:hidden; padding:12px 14px; display:flex; flex-direction:column; gap:2px; background:var(--bg); touch-action:pan-y; overscroll-behavior-y:contain; }
#msgs::-webkit-scrollbar { width:4px; }
#msgs::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* پس‌زمینه چت - الگوی روشن */
  #msgs { background-color:#c8d8e8; }

.mw { display:flex; flex-direction:column; max-width:75%; margin-bottom:2px; min-width:0; }
@keyframes mIn { from { opacity:0; transform:translateY(5px); } }
.mw.me { align-self:flex-start; align-items:flex-start; }
.mw.other { align-self:flex-end; align-items:flex-end; }
.mw.other.grp { flex-direction:row; align-items:flex-start; gap:8px; max-width:82%; align-self:flex-end !important; }
.mw.me.grp { flex-direction:column; align-self:flex-start !important; align-items:flex-start !important; margin-right:40px; }
.m-grp-av { width:36px; height:36px; border-radius:50%; flex-shrink:0; display:none;
  color:#fff; font-size:14px; font-weight:700;
  align-items:center; justify-content:center; overflow:hidden; cursor:pointer;
  margin-top:2px; }
.m-grp-av img { width:100%; height:100%; object-fit:cover; }
.mw.other.grp .m-grp-av { display:flex; }
.m-grp-body { display:flex; flex-direction:column; align-items:flex-start; min-width:0; flex:1; max-width:calc(100% - 44px); }
.m-sender { font-size:12px; margin-bottom:3px; padding:0 4px; display:none; font-weight:700; }
.mw.other.grp .m-sender { display:block; }
.mb-wrap { position:relative; min-width:0; max-width:100%; }
.m-bubble { padding:9px 13px; border-radius:18px; font-size:13px; line-height:1.55; word-break:break-word; overflow-wrap:anywhere; max-width:100%; position:relative; unicode-bidi:plaintext; }
.mw.me .m-bubble { background:#effdde; color:#000; border-bottom-left-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.13); }
.mw.other .m-bubble { background:#fff; color:#000; border-bottom-right-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.13); }
.m-del { color:var(--tm); font-style:italic; font-size:12px; }
.m-system { text-align:center; color:var(--t2); font-size:11px; padding:4px 12px; margin:4px auto; background:rgba(0,0,0,.04); border-radius:12px; max-width:80%; font-style:italic; }
.m-foot { display:flex; align-items:center; gap:3px; margin-top:3px; padding:0 4px; }
.mw.me .m-foot { flex-direction:row-reverse; }
.m-time { font-size:10px; color:var(--tm); }
.mw.me .m-time { color:rgba(0,0,0,.36); }
.msg-search-bar { display:flex; }
.msg-highlight-search { background:rgba(250,204,21,.4) !important; border-radius:3px; }
.msg-highlight-search.current { background:rgba(234,88,12,.35) !important; }
.date-sep { display:flex; align-items:center; justify-content:center; padding:8px 0; margin:4px 0; }
.date-sep span { font-size:12px; color:#fff; font-weight:500; background:rgba(0,0,0,.28); padding:4px 12px; border-radius:14px; }
.scroll-down-btn {
  position:absolute; bottom:80px; left:16px; z-index:50;
  width:40px; height:40px; border-radius:50%;
  background:#fff; border:none; box-shadow:0 2px 12px rgba(0,0,0,.18);
  cursor:pointer; font-size:18px; display:none;
  align-items:center; justify-content:center; transition:all .2s;
}
.scroll-down-btn.show { display:flex; }
.scroll-down-btn .sdb-badge {
  position:absolute; top:-4px; right:-4px;
  background:var(--accent); color:#fff;
  font-size:10px; font-weight:700; border-radius:10px;
  padding:1px 5px; min-width:18px; text-align:center; display:none;
}
.scroll-down-btn .sdb-badge.show { display:block; }
@keyframes msgHighlight { 0%,100%{background:transparent} 30%,70%{background:rgba(79,142,247,.18)} }
.msg-highlight { animation:msgHighlight 1.2s ease; }
.m-ticks { font-size:12px; line-height:1; }
.m-ticks.sent { color:var(--tm); }
.m-ticks.read { color:#4dcd5e; }
.m-edited { font-size:10px; color:var(--tm); }

/* Actions on hover */
/* Action sheet - تلگرام مانند */
.m-acts { display:none; } /* غیرفعال - از action sheet استفاده میکنیم */
/* upm css already defined */
.ci-av-wrap:hover #ci-av-overlay { opacity:1 !important; }
#ci-av:hover #ci-av-overlay { opacity:1 !important; }
.upm-close { position:absolute; top:12px; left:12px; background:rgba(0,0,0,.3); border:none; color:#fff; width:32px; height:32px; border-radius:50%; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:1; }

/* fullscreen عکس */
.img-viewer { position:fixed; inset:0; z-index:300; background:#17212b; display:none; align-items:center; justify-content:center; }
.img-viewer.show { display:flex; }
.img-viewer img { max-width:95vw; max-height:85vh; object-fit:contain; border-radius:8px; -webkit-user-select:auto !important; user-select:auto !important; touch-action:none; transform-origin:0 0; }








/* فایل‌ها */
.m-img { max-width:250px; border-radius:12px; cursor:pointer; display:block; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.img-group { display:grid; gap:2px; max-width:min(260px, 75vw); border-radius:12px; overflow:hidden; }
.img-group.count-2 { grid-template-columns:1fr 1fr; }
.img-group.count-3 { grid-template-columns:1fr 1fr; }
.img-group.count-3 .ig-item:first-child { grid-column:1/3; }
.img-group.count-4 { grid-template-columns:1fr 1fr; }
.img-group.count-many { grid-template-columns:1fr 1fr 1fr; }
.ig-item { position:relative; overflow:hidden; aspect-ratio:1; background:#ddd; cursor:pointer; }
.ig-item img { width:100%; height:100%; object-fit:cover; display:block; }
.ig-item:active { opacity:.85; }
.m-file { display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.04); border-radius:10px; padding:10px 12px; text-decoration:none; color:inherit; min-width:160px; }
.mw.me .m-file { background:rgba(0,0,0,.06); color:var(--t1); }
.m-file-ico { font-size:28px; flex-shrink:0; }
.m-fn { font-size:12px; font-weight:600; color:var(--t1); }
.m-fs { font-size:10px; color:var(--t2); margin-top:2px; }
.mw.me .m-fs { color:var(--t2); }
.m-reply { background:rgba(43,155,244,.1); border-right:3px solid var(--accent); border-radius:6px; padding:6px 10px; margin-bottom:6px; font-size:11px; color:var(--t1); cursor:pointer; }
.mw.me .m-reply { background:rgba(0,0,0,.08); color:rgba(0,0,0,.7); border-right-color:rgba(0,128,0,.5); }
.m-reply strong { color:var(--accent-d); display:block; margin-bottom:1px; font-size:10px; font-weight:700; }
.mw.me .m-reply strong { color:rgba(0,100,0,.9); }
.date-div { text-align:center; margin:10px 0; }
.date-div span { background:rgba(255,255,255,.8); color:var(--t2); font-size:11px; padding:3px 12px; border-radius:20px; box-shadow:0 1px 3px rgba(0,0,0,.08); }

/* ── INPUT ────────────────────────────────────────────── */
.input-area { padding:10px 12px; padding-bottom:max(10px, env(safe-area-inset-bottom, 10px)); background:#fff; border-top:1px solid var(--border); flex-shrink:0; }
.reply-prev { background:var(--accent-g); border-right:3px solid var(--accent); border-radius:8px; padding:7px 11px; margin-bottom:8px; display:none; align-items:center; gap:8px; }
.reply-prev.show { display:flex; }
.reply-prev-txt { flex:1; font-size:11px; color:var(--accent-d); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.rp-cancel { border:none; background:transparent; color:var(--tm); cursor:pointer; font-size:16px; line-height:1; }
/* inline edit bar */
.edit-prev { background:#fff8e1; border-right:3px solid #f59e0b; border-radius:8px; padding:7px 11px; margin-bottom:8px; display:none; align-items:center; gap:8px; }
.edit-prev.show { display:flex; }
.edit-prev-ico { font-size:15px; flex-shrink:0; }
.edit-prev-txt { flex:1; font-size:11px; color:#92400e; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.edit-prev-cancel { border:none; background:transparent; color:var(--tm); cursor:pointer; font-size:16px; line-height:1; }
.input-row { display:flex; align-items:flex-end; gap:8px; }
.att-btn { border:none; background:transparent; color:var(--t2); cursor:pointer; font-size:22px; padding:7px; border-radius:50%; transition:background .15s,color .15s; flex-shrink:0; display:flex; align-items:center; justify-content:center; width:36px; height:36px; }
.att-btn:hover { background:var(--bgh); color:var(--accent); }

/* Theme Picker */
.theme-picker { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.theme-btn {
  width:40px; height:40px; border-radius:50%; border:3px solid transparent;
  cursor:pointer; transition:transform .15s, border-color .15s;
  position:relative; overflow:hidden;
}
.theme-btn:hover { transform:scale(1.12); }
.theme-btn.active { border-color:var(--accent); box-shadow:0 0 0 2px var(--bg2), 0 0 0 4px var(--accent); }
.theme-btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, var(--tb1) 50%, var(--tb2) 50%);
}

.m-fwd { border-right:3px solid var(--accent); padding:3px 8px 3px 0; margin-bottom:6px; background:var(--accent-g); border-radius:0 6px 6px 0; }
.m-fwd-label { font-size:10px; color:var(--t2); font-weight:600; margin-bottom:1px; }
.m-fwd-name { font-size:12px; color:var(--accent); font-weight:700; }
.mw.me .m-fwd { border-right-color:rgba(0,120,0,.6); background:rgba(0,120,0,.08); }
.mw.me .m-fwd-name { color:rgba(0,120,0,.9); }
/* ── File Action Sheet ── */
#file-sheet { position:fixed; inset:0; z-index:400; display:none; align-items:flex-end; justify-content:center; }
#file-sheet.show { display:flex; }
#file-sheet-bg { position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(3px); }
#file-sheet-box { position:relative; background:var(--bg2); border-radius:20px 20px 0 0; width:100%; max-width:480px; padding-bottom:max(16px,env(safe-area-inset-bottom)); box-shadow:0 -4px 24px rgba(0,0,0,.15); animation:slideUp .22s cubic-bezier(.34,1.1,.64,1); }
#file-sheet-name { padding:16px 20px 10px; font-size:14px; font-weight:700; color:var(--t1); border-bottom:1px solid var(--border2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#file-sheet-size { font-size:11px; color:var(--t2); font-weight:400; margin-top:2px; }
.file-sheet-opt { display:flex; align-items:center; gap:14px; padding:15px 20px; cursor:pointer; font-size:14px; color:var(--t1); border:none; background:transparent; width:100%; text-align:right; font-family:inherit; transition:background .12s; }
.file-sheet-opt:active { background:var(--bgh); }
.file-sheet-opt-ico { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.file-sheet-cancel { width:100%; padding:14px; background:transparent; border:none; border-top:1px solid var(--border2); font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; color:var(--t2); }

.link-card {
  display:flex; align-items:center; gap:8px; margin-top:6px;
  padding:7px 10px; background:var(--bg3);
  border:1.5px solid var(--border); border-radius:10px;
  text-decoration:none; color:var(--t1); transition:background .15s;
  max-width:100%; box-sizing:border-box; overflow:hidden;
}
.link-card:hover { background:var(--bgh); }
.link-card-ico { font-size:16px; flex-shrink:0; }
.link-card-domain { font-size:11px; color:var(--accent); font-weight:700; }
.link-card-path { font-size:11px; color:var(--t2); word-break:break-all; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:calc(100% - 30px); }

/* ══ پروفایل تلگرام‌مانند ══ */
.prof-modal-full {
  position:fixed; inset:0; z-index:150; background:var(--bg);
  display:flex; flex-direction:column; overflow-y:auto;
  transform:translateY(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.prof-modal-full.show { transform:translateY(0); }

.prof-cover {
  position:relative; height:180px; flex-shrink:0;
  background:linear-gradient(135deg,#7c3aed,var(--accent));
  overflow:visible; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; padding-bottom:0;
  z-index:1;
}
.prof-cover-img { display:none; }
.prof-cover-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,.4) 100%);
}
.prof-back-btn {
  position:absolute; top:14px; right:14px; z-index:2;
  width:36px; height:36px; border-radius:50%; border:none;
  background:rgba(0,0,0,.3); color:#fff; font-size:18px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
}
.prof-save-btn {
  position:absolute; top:14px; left:14px; z-index:2;
  padding:6px 16px; border-radius:18px; border:none;
  background:rgba(255,255,255,.25); color:#fff; font-size:13px;
  font-weight:700; cursor:pointer; font-family:inherit;
  backdrop-filter:blur(4px); transition:background .15s;
}
.prof-save-btn:hover { background:rgba(255,255,255,.4); }

.prof-av-area {
  position:absolute; bottom:-48px; left:50%; transform:translateX(-50%);
  width:96px; height:96px; border-radius:50%;
  border:4px solid var(--bg); overflow:hidden;
  background:linear-gradient(135deg,#7c3aed,var(--accent));
  display:flex; align-items:center; justify-content:center;
  font-size:40px; color:#fff; font-weight:700;
  cursor:pointer; box-shadow:0 4px 20px rgba(0,0,0,.2);
  z-index:10;
}
.prof-av-area img { width:100%; height:100%; object-fit:cover; display:none; }
.prof-av-edit-ico {
  position:absolute; inset:0; background:rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; opacity:0; transition:opacity .2s; border-radius:50%;
}
.prof-av-area:hover .prof-av-edit-ico { opacity:1; }

.prof-body { padding:60px 16px 30px; flex:1; text-align:center; }

/* نام و وضعیت روی cover */
.prof-name-cover {
  position:absolute; bottom:16px; right:124px; left:16px; z-index:2;
}
.prof-display-name {
  font-size:22px; font-weight:700; color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.4); line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.prof-online-status {
  font-size:12px; color:rgba(255,255,255,.85); margin-top:2px;
  text-shadow:0 1px 3px rgba(0,0,0,.3);
}

/* سکشن‌ها */
.prof-section {
  background:var(--bg2); border-radius:14px;
  overflow:hidden; margin-bottom:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.prof-row {
  display:flex; align-items:center; gap:14px;
  padding:13px 16px; border-bottom:1px solid var(--border2);
  position:relative; cursor:pointer; transition:background .15s;
}
.prof-row:last-child { border-bottom:none; }
.prof-row:active { background:var(--bgh); }
.prof-row-ico {
  width:38px; height:38px; border-radius:50%;
  background:var(--accent-g); display:flex; align-items:center;
  justify-content:center; font-size:18px; flex-shrink:0; color:var(--accent);
}
.prof-row-content { flex:1; min-width:0; }
.prof-row-label { font-size:11px; color:var(--t2); margin-bottom:2px; }
.prof-row-val { font-size:14px; color:var(--t1); }
.prof-row-input {
  width:100%; border:none; background:transparent; outline:none;
  font-size:14px; color:var(--t1); font-family:inherit; padding:0;
}
.prof-row-input::placeholder { color:var(--tm); }
.prof-row-arrow { color:var(--tm); font-size:12px; flex-shrink:0; }
.prof-section-title {
  font-size:12px; color:var(--accent); font-weight:700;
  padding:12px 16px 6px; letter-spacing:.3px;
}

/* toggle سوئیچ */
.prof-toggle-row {
  display:flex; align-items:center; gap:14px;
  padding:13px 16px;
}
.prof-toggle-row label {
  display:flex; align-items:center; gap:14px; width:100%; cursor:pointer;
}
.toggle-switch {
  position:relative; width:50px; height:28px; flex-shrink:0;
}
.toggle-switch input { opacity:0 !important; width:0 !important; height:0 !important; position:absolute !important; padding:0 !important; margin:0 !important; border:none !important; background:none !important; }
.toggle-slider {
  position:absolute; inset:0; background:var(--border);
  border-radius:28px; transition:background .2s; cursor:pointer;
}
.toggle-slider:before {
  content:''; position:absolute;
  width:22px; height:22px; left:3px; top:3px;
  background:#fff; border-radius:50%;
  transition:transform .2s; box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-slider { background:var(--accent); }
.toggle-switch input:checked + .toggle-slider:before { transform:translateX(22px); }

/* دکمه‌های سریع */
.prof-quick-actions {
  display:flex; gap:10px; margin-bottom:14px;
}
.prof-quick-btn {
  flex:1; padding:12px 8px; border-radius:12px;
  background:var(--bg2); border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:inherit; transition:background .15s;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.prof-quick-btn:active { background:var(--bgh); }
.prof-quick-btn span:first-child { font-size:22px; }
.prof-quick-btn span:last-child { font-size:11px; color:var(--t2); font-weight:600; }
/* ══════════════════════════════ */

.mention-link { color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: none; }
.mention-link:hover { text-decoration: underline; }
.mention-popup { position:absolute; bottom:100%; right:0; left:0; background:var(--bg2); border:1.5px solid var(--border); border-radius:12px; box-shadow:var(--shadow2); max-height:220px; overflow-y:auto; z-index:50; display:none; }
.mention-popup.show { display:block; }
.mention-item { display:flex; align-items:center; gap:10px; padding:8px 12px; cursor:pointer; transition:background .15s; }
.mention-item:hover, .mention-item.mention-sel { background:var(--bgh); }
.mention-item-av { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--accent-d),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; font-weight:700; overflow:hidden; flex-shrink:0; }
.mention-item-av img { width:100%; height:100%; object-fit:cover; }
.mention-item-name { font-size:13px; font-weight:600; color:var(--t1); }
.mention-item-un { font-size:11px; color:var(--t2); }
#msg-input { flex:1; background:var(--bg3); border:1.5px solid var(--border); border-radius:22px; color:var(--t1); font-family:inherit; font-size:13px; padding:9px 16px; outline:none; resize:none; max-height:200px; min-height:40px; line-height:1.5; transition:border-color .2s,background .2s; overflow-y:auto; }
#msg-input::-webkit-scrollbar { display:none; }
#msg-input:focus { border-color:var(--accent); background:#fff; }
#msg-input::placeholder { color:var(--tm); }
.send-btn { width:42px; height:42px; flex-shrink:0; background:linear-gradient(135deg,var(--accent-d),var(--accent)); border:none; border-radius:50%; color:#fff; cursor:pointer; font-size:17px; display:flex; align-items:center; justify-content:center; transition:transform .15s,box-shadow .15s; box-shadow:0 3px 10px rgba(79,142,247,.4); }
.send-btn:hover { transform:scale(1.08); box-shadow:0 4px 16px rgba(79,142,247,.5); }
.send-btn:active { transform:scale(.95); }
/* ── Timed Message ── */
.timer-btn { width:34px; height:34px; flex-shrink:0; border:none; background:transparent; color:var(--t2); cursor:pointer; font-size:18px; border-radius:50%; transition:background .15s,color .15s; display:flex; align-items:center; justify-content:center; }
.timer-btn:hover { background:var(--bgh); color:var(--accent); }
.timer-btn.active { color:#f59e0b; background:rgba(245,158,11,.12); }
.timer-menu { position:absolute; bottom:calc(100% + 8px); left:0; background:var(--bg2); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow2); overflow:hidden; display:none; z-index:30; min-width:140px; }
.timer-menu.show { display:block; animation:mIn .15s ease; }
.timer-opt { display:flex; align-items:center; gap:10px; padding:11px 16px; cursor:pointer; font-size:13px; color:var(--t1); transition:background .12s; border:none; background:transparent; width:100%; text-align:right; font-family:inherit; }
.timer-opt:hover { background:var(--bgh); }
.timer-opt.selected { color:#f59e0b; font-weight:700; }
.timer-opt-ico { font-size:16px; }
.m-expire-badge { display:inline-flex; align-items:center; gap:3px; font-size:10px; color:#f59e0b; background:rgba(245,158,11,.12); border-radius:10px; padding:1px 6px; margin-top:3px; }
.m-expired { color:var(--tm); font-style:italic; font-size:12px; }

/* ── MODALS ───────────────────────────────────────────── */
.moverlay { position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(3px); z-index:50; display:flex; align-items:center; justify-content:center; padding:18px; }
.moverlay.hidden { display:none; }
.modal { background:#fff; border-radius:18px; padding:24px; width:100%; max-width:400px; box-shadow:var(--shadow2); animation:mIn .2s ease; }
.modal h3 { font-size:17px; margin-bottom:18px; font-weight:700; color:var(--t1); }
.modal input,.modal select,.modal textarea { width:100%; padding:10px 13px; background:var(--bg3); border:1.5px solid var(--border); border-radius:10px; color:var(--t1); font-family:inherit; font-size:13px; outline:none; margin-bottom:10px; transition:border-color .2s; }
.modal input:focus,.modal select:focus,.modal textarea:focus { border-color:var(--accent); background:#fff; }
.m-acts-row { display:flex; gap:8px; margin-top:4px; }
.btn-s { flex:1; padding:10px; background:#fff; border:1.5px solid var(--border); border-radius:10px; color:var(--t2); font-family:inherit; font-size:13px; cursor:pointer; font-weight:600; transition:background .15s; }
.btn-s:hover { background:var(--bgh); }
.modal .btn-p { flex:1; padding:10px; width:auto; font-size:13px; }
.ur-list { max-height:260px; overflow-y:auto; }
.ur { display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px; cursor:pointer; transition:background .15s; }
.ur:hover { background:var(--bg3); }
.ur-av { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--accent-d),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:16px; overflow:hidden; flex-shrink:0; position:relative; color:#fff; font-weight:700; }
.ur-av img { width:100%; height:100%; object-fit:cover; }
.ur-name { font-size:13px; font-weight:700; color:var(--t1); }
.ur-un { font-size:11px; color:var(--t2); margin-top:1px; }

/* ── MISC ─────────────────────────────────────────────── */

#ivc { position:fixed; top:16px; right:16px; border:none; background:rgba(255,255,255,.15); color:#fff; font-size:22px; cursor:pointer; border-radius:50%; width:40px; height:40px; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }

#toasts { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); z-index:300; display:flex; flex-direction:column; gap:7px; pointer-events:none; }
.toast { background:#fff; border:1px solid var(--border); border-radius:10px; padding:10px 18px; font-size:12px; color:var(--t1); box-shadow:var(--shadow2); animation:mIn .2s ease; white-space:nowrap; font-weight:600; }
.toast.err { background:#fef2f2; border-color:#fecaca; color:var(--err); }
.toast.ok { background:#f0fdf4; border-color:#bbf7d0; color:#16a34a; }

.tab-btn { flex:1; padding:7px; border:1.5px solid var(--border); background:transparent; color:var(--t2); border-radius:8px; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; }
.tab-btn.tab-active { background:var(--accent-g); border-color:var(--accent); color:var(--accent-d); }
.contact-tag { background:var(--accent-g); border:1px solid var(--accent); color:var(--accent-d); padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600; display:inline-flex; align-items:center; gap:5px; }
.contact-tag button { background:none; border:none; cursor:pointer; color:var(--accent-d); font-size:13px; padding:0; line-height:1; }
.ur-del { background:none; border:none; color:var(--err); cursor:pointer; font-size:14px; padding:2px 6px; border-radius:6px; margin-right:auto; }
.ur-del:hover { background:rgba(239,68,68,.1); }
.pinned-bar { background:#fff8e1; border-right:3px solid #f59e0b; padding:8px 12px; font-size:12px; color:#92400e; display:flex; align-items:center; gap:6px; flex-shrink:0; }
.pinned-bar-txt { flex:1; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pinned-close { background:none; border:none; color:#92400e; font-size:16px; cursor:pointer; padding:0 4px; opacity:.6; flex-shrink:0; line-height:1; }
.pinned-close:hover { opacity:1; }
.pinned-bar:hover { background:#fef3c7; }
.reactions { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; padding-right:6px; padding-left:6px; position:relative; z-index:1; }
.mw.me .reactions { justify-content:flex-start; padding-right:10px; }
.mw.other .reactions { justify-content:flex-end; padding-left:10px; }
@keyframes reactPop { 0%{transform:scale(0) translateY(4px);opacity:0} 70%{transform:scale(1.2) translateY(-2px);opacity:1} 100%{transform:scale(1) translateY(0);opacity:1} }
.reaction-btn { background:rgba(255,255,255,.97); border:1px solid rgba(0,0,0,.07); border-radius:24px; padding:4px 9px 4px 7px; font-size:14px; cursor:pointer; transition:transform .15s,box-shadow .15s,background .15s; display:inline-flex; align-items:center; gap:4px; box-shadow:0 2px 8px rgba(0,0,0,.1); animation:reactPop .25s cubic-bezier(.34,1.56,.64,1); }
[data-theme="dark"] .reaction-btn { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.1); }
.mw.me .reaction-btn { background:rgba(255,255,255,.92); }
.reaction-btn.mine { border-color:var(--accent); background:var(--accent-g); box-shadow:0 2px 8px rgba(43,155,244,.2); }
.reaction-btn:hover { transform:scale(1.12); box-shadow:0 4px 14px rgba(0,0,0,.15); }
.reaction-btn:active { transform:scale(.94); }
.reaction-btn .cnt { font-size:12px; color:var(--t2); font-weight:700; min-width:8px; }
.reaction-btn.mine .cnt { color:var(--accent-d); }
.emoji-picker { position:absolute; bottom:calc(100% + 6px); background:#fff; border:1px solid var(--border); border-radius:14px; padding:8px; box-shadow:var(--shadow2); display:none; flex-wrap:wrap; gap:4px; width:190px; z-index:20; }
.mw.me .emoji-picker { right:0; } .mw.other .emoji-picker { left:0; }
.emoji-picker.show { display:flex; }
.ep-btn { width:32px; height:32px; border:none; background:transparent; font-size:18px; cursor:pointer; border-radius:8px; transition:background .15s; }
.ep-btn:hover { background:var(--bgh); transform:scale(1.15); }
.typing-dots { display:inline-flex; gap:3px; align-items:center; margin-right:4px; }
.typing-dots span { width:4px; height:4px; background:var(--accent); border-radius:50%; display:inline-block; animation:tdot 1.2s infinite; }
.typing-dots span:nth-child(2) { animation-delay:.2s; }
.typing-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes tdot { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-4px);opacity:1} }
.update-banner {
  position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 9998; opacity: 0; pointer-events: none;
  background: linear-gradient(135deg, var(--accent-d), var(--accent));
  color: #fff; padding: 10px 18px; border-radius: 24px;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 4px 20px rgba(79,142,247,.4);
  transition: opacity .3s ease, transform .3s ease;
}
.update-banner.show { opacity:1; transform: translateX(-50%) translateY(0); pointer-events:all; }
.update-banner button { background:rgba(255,255,255,.25); border:none; color:#fff; padding:5px 12px; border-radius:14px; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.update-banner button:hover { background:rgba(255,255,255,.4); }
.offline-pill {
  position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 9999; opacity: 0; pointer-events: none;
  background: rgba(30,30,30,.92); color: #fff;
  padding: 7px 16px 7px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  transition: opacity .3s ease, transform .3s ease;
}
.offline-pill.show { opacity:1; transform: translateX(-50%) translateY(0); }
.offline-pill .pill-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.offline-pill.offline .pill-dot { background:#f87171; box-shadow:0 0 6px #f87171; }
.offline-pill.online .pill-dot { background:#4ade80; box-shadow:0 0 6px #4ade80; }
.offline-pill.updating .pill-dot { background:#facc15; box-shadow:0 0 6px #facc15; animation:_updPulse 1s ease infinite; }
@keyframes _updPulse { 0%,100%{opacity:1}50%{opacity:.3} }
.spinner { width:28px; height:28px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; margin:auto; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading { display:flex; align-items:center; justify-content:center; padding:32px; }

/* upload progress */
/* Voice recording */
.rec-btn { width:42px; height:42px; flex-shrink:0; border:none; border-radius:50%; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; transition:all .2s; background:var(--bg3); color:var(--t2); }
.rec-btn:hover { background:var(--bgh); color:var(--accent); }
.rec-btn.recording { background:var(--err); color:#fff; animation:recPulse 1s ease infinite; box-shadow:0 0 0 0 rgba(239,68,68,.4); }
@keyframes recPulse { 0%{box-shadow:0 0 0 0 rgba(239,68,68,.4)} 70%{box-shadow:0 0 0 10px rgba(239,68,68,0)} 100%{box-shadow:0 0 0 0 rgba(239,68,68,0)} }
.rec-ui { display:none; align-items:center; gap:10px; padding:8px 14px; background:#fff0f0; border-radius:22px; flex:1; border:1.5px solid #fecaca; }
.rec-ui.show { display:flex; }
.rec-timer { font-size:14px; font-weight:700; color:var(--err); font-variant-numeric:tabular-nums; min-width:40px; }
.rec-wave { flex:1; height:28px; }
.rec-cancel { border:none; background:transparent; color:var(--t2); cursor:pointer; font-size:20px; padding:2px 6px; border-radius:6px; }
.rec-cancel:hover { background:var(--bgh); color:var(--err); }
.m-audio { display:flex; align-items:center; gap:10px; min-width:180px; }
.m-audio audio { height:34px; max-width:220px; outline:none; }
.m-audio audio::-webkit-media-controls-panel { background:rgba(255,255,255,.15); border-radius:20px; }
.mw.other .m-audio audio::-webkit-media-controls-panel { background:#f0f4ff; }
.voice-player { display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.04); border-radius:18px; padding:8px 12px; min-width:220px; max-width:280px; }
.mw.me .voice-player { background:rgba(0,0,0,.08); }
.vp-play { width:40px; height:40px; border-radius:50%; border:none; background:var(--accent); color:#fff; font-size:16px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:transform .1s,background .15s; }
.vp-play:active { transform:scale(.9); }
.vp-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.vp-progress { width:100%; height:24px; cursor:pointer; position:relative; display:flex; align-items:center; touch-action:none; }
.vp-wave { width:100%; height:20px; position:relative; display:flex; align-items:flex-end; gap:1.5px; }
.vp-wave-bar { flex:1; background:rgba(0,0,0,.15); border-radius:1px; min-width:2px; transition:background .15s; }
.mw.me .vp-wave-bar { background:rgba(0,0,0,.2); }
.vp-wave-bar.played { background:var(--accent); }
.vp-fill { display:none; }
.vp-thumb { position:absolute; width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 1px 4px rgba(0,0,0,.25); top:50%; transform:translate(-50%,-50%); left:0%; z-index:2; pointer-events:none; transition:left .05s linear; }
.vp-footer { display:flex; justify-content:space-between; align-items:center; }
.vp-time { font-size:12px; color:var(--t2); font-weight:600; font-variant-numeric:tabular-nums; direction:ltr; }
.vp-speed { font-size:11px; font-weight:700; color:var(--accent); cursor:pointer; background:rgba(43,155,244,.12); border-radius:8px; padding:2px 7px; border:none; font-family:inherit; transition:background .12s; }
.vp-speed:active { background:rgba(43,155,244,.25); }
/* upload-progress قدیمی - جایگزین شد با upload-overlay */

@media (max-width:640px) {
  :root { --sw:100vw; }

  /* ── Sidebar ── */
  #sidebar {
    position:fixed; inset:0; z-index:10;
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    will-change:transform;
  }
  #sidebar.mob-hide { transform:translateX(105%); }
  .ch-back { display:flex !important; }

  /* ── Chat Area ── */
  #chat-area {
    position:fixed;
    top:0; right:0; left:0; bottom:0;
    display:flex; flex-direction:column; overflow:hidden;
  }

  /* ── Chat View ── */
  #chat-view {
    flex:1; display:none; flex-direction:column;
    overflow:hidden; min-height:0;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    will-change:transform;
  }
  #chat-view.active { display:flex; }

  .chat-head {
    flex-shrink:0; z-index:10;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
  }

  /* ── Messages ── */
  #msgs {
    flex:1; overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    min-height:0;
    overscroll-behavior-y:contain;
  }

  /* ── Input: keyboard-aware ── */
  .input-area {
    flex-shrink:0;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    /* iOS Safari: این باعث میشه input بالای کیبورد بمونه */
    position:relative;
    z-index:5;
  }

  /* ── swipe overlay (نشانگر بازگشت) ── */
  #swipe-back-hint {
    position:fixed; top:0; right:0; bottom:0; width:32px;
    z-index:20; display:none;
  }
  #swipe-back-hint.active { display:block; }
}

/* ── Caption Modal - تلگرام‌مانند ── */
/* ════════════════════════════════════════
   MULTI IMAGE PREVIEW MODAL
════════════════════════════════════════ */
#multi-img-modal {
  display:none; position:fixed; inset:0; z-index:9100;
  background:#17212b;
  flex-direction:column;
}
#multi-img-modal.open { display:flex; animation:capIn .2s ease both; }
#multi-img-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 10px; flex-shrink:0;
  background:rgba(0,0,0,.2);
}
#multi-img-count { color:rgba(255,255,255,.9); font-size:15px; font-weight:700; }
#multi-img-close {
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.1); border:none; color:rgba(255,255,255,.85);
  font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
#multi-img-close:hover { background:rgba(255,255,255,.2); }
#multi-img-grid {
  flex:1; overflow-y:auto; display:flex; flex-wrap:wrap;
  gap:4px; padding:12px; align-content:flex-start;
}
.mig-item {
  position:relative; width:calc(33.33% - 3px);
  aspect-ratio:1; overflow:hidden; border-radius:10px; background:#2b3a4d;
  flex-shrink:0;
}
.mig-item img { width:100%; height:100%; object-fit:cover; display:block; }
.mig-del {
  position:absolute; top:6px; right:6px;
  width:26px; height:26px; border-radius:50%;
  background:rgba(0,0,0,.55); border:none; color:#fff;
  font-size:13px; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
  backdrop-filter:blur(6px);
  transition:background .15s;
}
.mig-del:hover { background:rgba(220,50,50,.75); }
#multi-img-bottom {
  flex-shrink:0; padding:12px 14px max(24px, env(safe-area-inset-bottom));
  display:flex; align-items:flex-end; gap:10px;
  background:#17212b;
  border-top:1px solid rgba(255,255,255,.07);
}
#multi-caption-input {
  flex:1; background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.12);
  border-radius:22px; padding:11px 18px; color:#fff;
  font-family:inherit; font-size:14px; outline:none; resize:none;
  max-height:100px; min-height:46px; line-height:1.55;
  -webkit-user-select:text !important; user-select:text !important;
  transition:border-color .2s, background .2s;
}
#multi-caption-input::placeholder { color:rgba(255,255,255,.3); }
#multi-caption-input:focus {
  border-color:rgba(43,155,244,.7);
  background:rgba(255,255,255,.1);
}
#multi-send-btn {
  width:48px; height:48px; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent-d),var(--accent));
  border:none; border-radius:50%; color:#fff; font-size:20px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(43,155,244,.4);
  transition:transform .15s, box-shadow .15s;
}
#multi-send-btn:hover { box-shadow:0 6px 24px rgba(43,155,244,.55); }
#multi-send-btn:active { transform:scale(.92); }

/* ════════════════════════════════════════
   CAPTION MODAL - تلگرام واقعی
════════════════════════════════════════ */
#caption-modal {
  display:none; position:fixed; inset:0; z-index:9000;
  flex-direction:column;
  background:#17212b;
}
#caption-modal.open {
  display:flex;
  animation: capIn .22s cubic-bezier(.4,0,.2,1) both;
}
@keyframes capIn {
  from { opacity:0; transform:scale(.97); }
  to   { opacity:1; transform:scale(1); }
}

/* هدر بالا */
#caption-header {
  position:relative; display:flex; align-items:center;
  justify-content:space-between;
  padding:12px 14px 10px;
  background:#17212b;
  border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0; z-index:2;
}
#caption-close-btn {
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.1); border:none; color:rgba(255,255,255,.85);
  font-size:18px; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
  transition:background .15s;
  flex-shrink:0;
}
#caption-close-btn:hover { background:rgba(255,255,255,.2); }
#caption-fname {
  flex:1; text-align:center;
  color:rgba(255,255,255,.9); font-size:14px; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:0 8px;
}
#caption-file-info {
  font-size:11px; color:rgba(255,255,255,.45);
  flex-shrink:0; text-align:left; min-width:38px;
}

/* ناحیه تصویر */
#caption-img-area {
  flex:1; display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative; padding:16px;
  cursor:default;
  background:#0f1923;
}
.cap-file-icon {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:36px 28px;
  background:#1e2d3d;
  border-radius:20px;
  min-width:220px;
  border:1.5px solid rgba(255,255,255,.08);
  box-shadow:0 8px 32px rgba(0,0,0,.3);
}
#caption-preview-img {
  max-width:100%; max-height:100%;
  object-fit:contain;
  border-radius:6px;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

/* نوار پایین */

/* ── دکمه عکس/فایل در caption modal ── */
#caption-type-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 10px 16px 0;
  background: rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 4px;
}
.cap-type-btn {
  flex: 1;
  padding: 7px 10px;
  border: none;
  border-radius: 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: rgba(255,255,255,.6);
  transition: all .18s;
}
.cap-type-btn.active {
  background: rgba(255,255,255,.22);
  color: #fff;
}

#caption-bottom-bar {
  flex-shrink:0;
  background:#17212b;
  border-top:1px solid rgba(255,255,255,.07);
  padding:12px 14px max(24px, env(safe-area-inset-bottom));
}
#caption-input-row {
  display:flex; align-items:flex-end; gap:10px;
}
#caption-input {
  flex:1;
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.12);
  border-radius:22px;
  padding:11px 18px;
  color:#fff;
  font-family:inherit; font-size:14px;
  outline:none; resize:none;
  max-height:110px; min-height:46px;
  line-height:1.55;
  transition:border-color .2s, background .2s;
  -webkit-user-select:text !important;
  user-select:text !important;
}
#caption-input:focus {
  border-color:rgba(43,155,244,.7);
  background:rgba(255,255,255,.1);
}
#caption-input::placeholder { color:rgba(255,255,255,.3); }
#caption-send-btn {
  width:48px; height:48px; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent-d),var(--accent));
  border:none; border-radius:50%; color:#fff;
  font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(43,155,244,.5);
  transition:transform .15s cubic-bezier(.34,1.4,.64,1), box-shadow .15s;
}
#caption-send-btn:hover { transform:scale(1.1); box-shadow:0 6px 24px rgba(43,155,244,.6); }
#caption-send-btn:active { transform:scale(.92); }

/* ════════════════════════════════════════
   UPLOAD OVERLAY - progress مثل تلگرام
════════════════════════════════════════ */
#upload-overlay {
  display:none; position:fixed; inset:0; z-index:8000;
  align-items:flex-end; justify-content:center;
  pointer-events:none;
}
#upload-overlay.show { display:flex; }
#upload-card {
  margin-bottom:90px;
  background:rgba(20,20,20,.92);
  backdrop-filter:blur(12px);
  border-radius:18px;
  padding:16px 20px;
  min-width:220px; max-width:320px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  animation:uploadCardIn .2s cubic-bezier(.34,1.1,.64,1) both;
  pointer-events:auto;
}
@keyframes uploadCardIn {
  from { opacity:0; transform:translateY(16px) scale(.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
#upload-card-header {
  display:flex; align-items:center; gap:10px;
}
#upload-file-thumb {
  width:42px; height:42px; border-radius:10px;
  object-fit:cover; flex-shrink:0; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:rgba(255,255,255,.5);
  overflow:hidden;
}
#upload-file-thumb img { width:100%; height:100%; object-fit:cover; border-radius:10px; }
#upload-card-info { flex:1; min-width:0; }
#upload-file-name {
  font-size:13px; font-weight:700; color:#fff;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  margin-bottom:2px;
}
#upload-status-txt {
  font-size:11px; color:rgba(255,255,255,.5);
}
#upload-cancel-btn {
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.1); border:none;
  color:rgba(255,255,255,.6); font-size:14px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background .15s;
}
#upload-cancel-btn:hover { background:rgba(255,80,80,.3); color:#fff; }

/* نوار progress */
#upload-progress-track {
  height:4px; background:rgba(255,255,255,.12);
  border-radius:4px; overflow:hidden; position:relative;
}
#upload-progress-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent-d),var(--accent));
  border-radius:4px;
  transition:width .25s ease;
  position:relative;
}
/* درخشش متحرک */
#upload-progress-fill::after {
  content:''; position:absolute; top:0; right:0; bottom:0;
  width:60px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:uploadShine 1.2s ease infinite;
}
@keyframes uploadShine {
  from { transform:translateX(60px); }
  to   { transform:translateX(-200px); }
}
#upload-percent {
  font-size:11px; color:rgba(255,255,255,.55);
  text-align:left; margin-top:2px;
  display:flex; justify-content:space-between;
}

/* قدیمی upload-progress رو مخفی نگه دار */
.upload-progress { display:none !important; }
.upload-queue-info { display:none !important; }


/* ── SKELETON LOADING ─────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton-base {
  background: linear-gradient(90deg, var(--border2) 25%, var(--bgh) 50%, var(--border2) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}
.sk-channel-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--border2);
}
.sk-av {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
}
.sk-info { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.sk-name { height: 13px; border-radius: 6px; width: 55%; }
.sk-last { height: 11px; border-radius: 6px; width: 80%; }
.sk-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sk-time { height: 10px; width: 32px; border-radius: 5px; }
.sk-badge { height: 16px; width: 20px; border-radius: 10px; }
/* skeleton پیام‌ها */
.sk-msg-wrap { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.sk-msg { display: flex; flex-direction: column; max-width: 72%; gap: 5px; }
.sk-msg.me   { align-self: flex-start; }
.sk-msg.other{ align-self: flex-end; }
.sk-bubble { height: 38px; border-radius: 18px; }
.sk-bubble.tall { height: 58px; }
.sk-bubble.short { height: 28px; width: 60%; }
.sk-foot { height: 9px; width: 45px; border-radius: 4px; align-self: flex-end; }
.sk-msg.me .sk-foot { align-self: flex-start; }

/* ── EMOJI PICKER ─────────────────────────────────── */
.emoji-picker-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  z-index: 200;
  display: none;
  flex-direction: column;
  overflow: hidden;
  max-height: 55vh;
  transform-origin: bottom left;
}
.emoji-picker-panel.open {
  display: flex;
  animation: epOpen 0.2s cubic-bezier(0.34,1.3,0.64,1) both;
}
@keyframes epOpen {
  from { opacity:0; transform: scale(0.9) translateY(10px); }
  to   { opacity:1; transform: scale(1)   translateY(0); }
}
.ep-search-wrap {
  padding: 10px 10px 6px;
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
}
.ep-search {
  width: 100%; padding: 7px 12px;
  background: var(--bg3); border: 1.5px solid var(--border);
  border-radius: 20px; font-size: 13px; color: var(--t1);
  outline: none; font-family: inherit;
  transition: border-color .2s;
}
.ep-search:focus { border-color: var(--accent); }
.ep-cats {
  display: flex; gap: 2px; padding: 6px 8px;
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0; overflow-x: auto;
}
.ep-cats::-webkit-scrollbar { display: none; }
.ep-cat-btn {
  border: none; background: transparent; cursor: pointer;
  font-size: 18px; width: 34px; height: 30px;
  border-radius: 8px; transition: background .12s;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.ep-cat-btn:hover, .ep-cat-btn.active { background: var(--accent-g); }
.ep-grid-wrap {
  overflow-y: auto; flex: 1; padding: 6px 4px; min-height: 0;
}
.ep-grid-wrap::-webkit-scrollbar { width: 3px; }
.ep-grid-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.ep-section-title {
  font-size: 10px; color: var(--t2); font-weight: 700;
  padding: 4px 8px 2px; letter-spacing: 0.05em;
}
.ep-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px; padding: 2px 4px;
}
.ep-emoji {
  border: none; background: transparent; cursor: pointer;
  font-size: 22px; border-radius: 8px;
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  transition: background .1s, transform .1s;
  line-height: 1;
}
.ep-emoji:hover  { background: var(--bgh); transform: scale(1.2); }
.ep-emoji:active { transform: scale(1.05); }
/* دایره‌های رنگی ۳ بعدی */
.circle-3d {
  display:inline-block; width:1em; height:1em; border-radius:50%;
  position:relative; vertical-align:middle; margin:0 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,.25), inset 0 -2px 4px rgba(0,0,0,.2), inset 0 2px 4px rgba(255,255,255,.35);
}
.circle-3d::after {
  content:''; position:absolute; top:12%; left:18%; width:35%; height:25%;
  border-radius:50%; background:rgba(255,255,255,.5);
  filter:blur(1px); transform:rotate(-25deg);
}
.ep-emoji .circle-3d { width:20px; height:20px; }
.c3d-red    { background: radial-gradient(circle at 35% 35%, #ff6b6b, #e53e3e 40%, #c53030 100%); }
.c3d-orange { background: radial-gradient(circle at 35% 35%, #ffb347, #ed8936 40%, #c05621 100%); }
.c3d-yellow { background: radial-gradient(circle at 35% 35%, #ffe066, #ecc94b 40%, #b7791f 100%); }
.c3d-green  { background: radial-gradient(circle at 35% 35%, #68d391, #38a169 40%, #276749 100%); }
.c3d-blue   { background: radial-gradient(circle at 35% 35%, #63b3ed, #3182ce 40%, #2a4365 100%); }
.c3d-purple { background: radial-gradient(circle at 35% 35%, #b794f4, #805ad5 40%, #553c9a 100%); }
.c3d-brown  { background: radial-gradient(circle at 35% 35%, #c4956a, #8b6914 40%, #5a3e1b 100%); }
.c3d-black  { background: radial-gradient(circle at 35% 35%, #666, #2d2d2d 40%, #000 100%); }
.c3d-white  { background: radial-gradient(circle at 35% 35%, #fff, #e2e8f0 40%, #cbd5e0 100%); box-shadow: 0 2px 4px rgba(0,0,0,.15), inset 0 -2px 4px rgba(0,0,0,.08), inset 0 2px 4px rgba(255,255,255,.6); }
/* دکمه emoji در input */
.emoji-toggle-btn {
  border: none; background: transparent; color: var(--t2);
  cursor: pointer; font-size: 22px; padding: 7px;
  border-radius: 50%; transition: background .15s, color .15s;
  flex-shrink: 0; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
}
.emoji-toggle-btn:hover  { background: var(--bgh); color: var(--accent); }
.emoji-toggle-btn.active { background: var(--accent-g); color: var(--accent); }

/* تب‌بار ایموجی/استیکر */
.ep-tab-bar { display:flex; border-bottom:1px solid var(--border2); flex-shrink:0; }
.ep-tab-btn { flex:1; padding:8px 0; border:none; background:transparent; font-family:inherit; font-size:12px; font-weight:600; color:var(--t2); cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; }
.ep-tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); }
/* گرید استیکر */
.stk-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.stk-item { cursor:pointer; border-radius:12px; padding:6px; transition:background .12s,transform .1s; display:flex; flex-direction:column; align-items:center; gap:4px; }
.stk-item:hover { background:var(--bgh); }
.stk-item:active { transform:scale(.92); }
.stk-item svg { width:56px; height:56px; }
.stk-item .stk-label { font-size:9px; color:var(--t2); font-weight:600; text-align:center; line-height:1.2; }
/* نمایش استیکر در چت */
.m-sticker { width:120px; height:120px; animation: stkBounce .5s cubic-bezier(.17,.67,.21,1.3) both; }
.m-sticker-label { font-size:13px; font-weight:700; color:var(--t1); margin-top:4px; text-align:center; animation: stkFadeIn .4s .2s both; }

/* ── وضعیت پیام (تیکت) ───────────────────────── */
.msg-status-badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; padding:3px 8px;
  border-radius:6px; margin-top:5px; direction:rtl;
  animation: stkFadeIn .3s both;
}
.msg-status-badge.st-pending    { background:#fef3c7; color:#92400e; }
.msg-status-badge.st-in_progress { background:#dbeafe; color:#1e40af; }
.msg-status-badge.st-done       { background:#dcfce7; color:#166534; }
.msg-status-badge.st-rejected   { background:#fee2e2; color:#991b1b; }
/* نوار رنگی وضعیت کنار حباب پیام - چت مستقیم و گروه */
.mw.has-status-pending     .m-bubble,
.mw.has-status-pending     .m-grp-body .m-bubble { border-right:3px solid #f59e0b !important; }
.mw.has-status-in_progress .m-bubble,
.mw.has-status-in_progress .m-grp-body .m-bubble { border-right:3px solid #3b82f6 !important; }
.mw.has-status-done        .m-bubble,
.mw.has-status-done        .m-grp-body .m-bubble { border-right:3px solid #22c55e !important; }
.mw.has-status-rejected    .m-bubble,
.mw.has-status-rejected    .m-grp-body .m-bubble { border-right:3px solid #ef4444 !important; }
/* دکمه تغییر وضعیت در action sheet */
.status-pick-row { display:flex; gap:6px; padding:8px 12px; flex-wrap:wrap; justify-content:center; }
.status-pick-btn {
  border:none; padding:7px 12px; border-radius:8px; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:600; transition:transform .1s,opacity .15s;
}
.status-pick-btn:active { transform:scale(.93); }
@keyframes stkBounce { 0%{transform:scale(0)rotate(-15deg);opacity:0} 50%{transform:scale(1.15)rotate(3deg);opacity:1} 70%{transform:scale(.92)rotate(-1deg)} 100%{transform:scale(1)rotate(0)} }
@keyframes stkFadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
/* حباب استیکر: شفاف */
.sticker-bubble { background:transparent !important; box-shadow:none !important; border:none !important; padding:4px !important; }
.mw.me .sticker-bubble { background:transparent !important; }

/* ── CLEAR CHAT MODAL ────────────────────────────── */
.clear-chat-modal { position:fixed; inset:0; z-index:500; display:flex; align-items:flex-end; justify-content:center; padding:0; }
.clear-chat-modal-bg { position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(3px); }
.clear-chat-modal-box {
  position:relative; background:var(--bg2);
  border-radius:22px 22px 0 0; width:100%; max-width:480px;
  overflow:hidden; box-shadow:0 -4px 32px rgba(0,0,0,.18);
  animation:slideUp .25s cubic-bezier(0.34,1.1,0.64,1) both;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.ccm-header {
  padding:20px 20px 14px; border-bottom:1px solid var(--border2);
  text-align:center;
}
.ccm-header h3 { font-size:16px; font-weight:700; color:var(--t1); margin:0 0 4px; }
.ccm-header p  { font-size:12px; color:var(--t2); margin:0; }
.ccm-opt {
  display:flex; align-items:center; gap:14px;
  padding:15px 20px; cursor:pointer; font-size:14px;
  transition:background .12s; border-bottom:1px solid var(--border2);
  border:none; background:transparent; width:100%; text-align:right;
  font-family:inherit; color:var(--t1);
}
.ccm-opt:last-of-type { border-bottom:none; }
.ccm-opt:active { background:var(--bgh); }
.ccm-opt-ico {
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.ccm-opt-ico.red   { background:rgba(239,68,68,.12); }
.ccm-opt-ico.amber { background:rgba(245,158,11,.12); }
.ccm-opt-txt strong { display:block; font-size:14px; font-weight:700; }
.ccm-opt-txt span   { font-size:11px; color:var(--t2); }
.ccm-opt.danger .ccm-opt-txt strong { color:var(--err); }
.ccm-cancel {
  width:100%; padding:16px; background:transparent;
  border:none; border-top:1px solid var(--border2);
  font-family:inherit; font-size:15px; font-weight:700;
  cursor:pointer; color:var(--accent);
  transition:background .12s;
}
.ccm-cancel:active { background:var(--bgh); }


/* ── QUALITY PATCH ── */
/* ════════════════════════════════════════════════════
   QUALITY PATCH - بهبود کیفیت بصری و روانی برنامه
   فایل را در <head> بعد از استایل‌های اصلی اضافه کن
════════════════════════════════════════════════════ */

/* ── ۰. performance ─────────────────────────────── */
#msgs {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto !important;
}

#channel-list, .contacts-list {
  -webkit-overflow-scrolling: touch;
}
.mw {
  /* contain و will-change حذف شد - باعث چشمک در scroll میشد */
}
.ch-item {
  /* contain حذف شد */
}
/* ── ۱. بهبود رندرینگ فونت و متن ─────────────────── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* فونت Vazirmatn - جایگزین مدرن با کیفیت بالا */

body {
  font-family: 'Vazirmatn', 'Yekan', Tahoma, 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.01em;
}

/* ── ۲. بهبود حباب‌های پیام ───────────────────────── */
.m-bubble {
  font-size: 14px !important;    /* بزرگ‌تر از ۱۳px قبلی */
  line-height: 1.65 !important;
  letter-spacing: 0.01em;
  border-radius: 18px !important;
  padding: 10px 14px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06) !important;
  transition: none !important;
  /* بهبود انتخاب متن */
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* پیام من - سبز ظریف‌تر */
.mw.me .m-bubble {
  background: #e7fbd9 !important;
  border-bottom-left-radius: 5px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 1px 6px rgba(0,150,0,0.06) !important;
}

/* پیام دیگری - سفید خالص */
.mw.other .m-bubble {
  background: #ffffff !important;
  border-bottom-right-radius: 5px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.07) !important;
}

/* ── ۳. پس‌زمینه چت باکیفیت ──────────────────────── */
#msgs {
  background-color: #dae8f5 !important;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.1) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234a90d9' fill-opacity='0.04'%3E%3Cpath d='M0 0h26v26H0V0zm26 26h26v26H26V26z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  /* scroll روان‌تر */

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* تم تاریک */
[data-theme="dark"] #msgs {
  background-color: #0d1927 !important;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(43,155,244,0.05) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232b9bf4' fill-opacity='0.03'%3E%3Cpath d='M0 0h26v26H0V0zm26 26h26v26H26V26z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

[data-theme="dark"] .mw.me .m-bubble {
  background: #1d3e2a !important;
  color: #e8f5e0 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

[data-theme="dark"] .mw.other .m-bubble {
  background: #1c2333 !important;
  color: #e8edf3 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* ── ۴. scrollbar بهتر ────────────────────────────── */
#msgs::-webkit-scrollbar { width: 5px; }
#msgs::-webkit-scrollbar-track { background: transparent; }
#msgs::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 10px;
}
#msgs::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.25);
}

#channel-list::-webkit-scrollbar { width: 4px; }
#channel-list::-webkit-scrollbar-track { background: transparent; }
#channel-list::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 4px;
}

/* ── ۵. انیمیشن پیام‌های جدید (حذف شد - کند بود) ─── */

/* ── ۶. بهبود header چت ──────────────────────────── */
.chat-head {
  box-shadow: 0 1px 8px rgba(0,0,0,0.08) !important;
  height: 60px !important;
}

.head-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

/* ── ۷. بهبود آواتارها ─────────────────────────────── */
.ch-av, .head-av, .ur-av, .m-grp-av {
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

.ch-av {
  width: 48px !important;
  height: 48px !important;
  font-size: 20px !important;
}

/* ── ۸. بهبود لیست چت‌ها ──────────────────────────── */
.ch-item {
  padding: 11px 16px !important;
  transition: background 0.12s ease !important;
}

.ch-name {
  font-size: 14px !important;
  font-weight: 700;
}

.ch-last {
  font-size: 12px !important;
  opacity: 0.75;
  margin-top: 3px !important;
}

.ch-time {
  font-size: 11px !important;
  opacity: 0.65;
}

/* ── ۹. بهبود input area ──────────────────────────── */
.input-area {
  padding: 10px 14px !important;
  padding-bottom: max(14px, env(safe-area-inset-bottom, 14px)) !important;
  background: rgba(255,255,255,0.98) !important;
  box-shadow: 0 -1px 8px rgba(0,0,0,0.06) !important;
}

[data-theme="dark"] .input-area {
  background: rgba(28, 35, 51, 0.98) !important;
}

#msg-input {
  font-size: 14px !important;
  line-height: 1.55 !important;
  border-radius: 24px !important;
  padding: 10px 18px !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
  max-height: 200px !important;
}
#msg-input::-webkit-scrollbar { display:none; }

#msg-input:focus {
  box-shadow: 0 0 0 3px rgba(43,155,244,0.12) !important;
}

/* ── ۱۰. دکمه ارسال ──────────────────────────────── */
.send-btn {
  width: 44px !important;
  height: 44px !important;
  font-size: 18px !important;
  box-shadow: 0 3px 12px rgba(43,155,244,0.35) !important;
  transition: transform 0.15s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.15s !important;
}

.send-btn:active {
  transform: scale(0.92) !important;
}

/* ── ۱۱. زمان پیام ────────────────────────────────── */
.m-time {
  font-size: 11px !important;
  letter-spacing: 0.02em;
}

.m-ticks {
  font-size: 13px !important;
}

/* ── ۱۲. badge خوانده‌نشده ─────────────────────────── */
.ubadge {
  font-size: 11px !important;
  padding: 2px 7px !important;
  border-radius: 12px !important;
  min-width: 22px !important;
  box-shadow: 0 1px 4px rgba(43,155,244,0.3) !important;
}

/* ── ۱۳. toast بهتر ────────────────────────────────── */
.toast {
  font-size: 13px !important;
  padding: 10px 20px !important;
  border-radius: 24px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
  animation: toastIn 0.25s cubic-bezier(0.34,1.2,0.64,1) both !important;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── ۱۴. عکس‌ها ─────────────────────────────────── */
.m-img {
  border-radius: 14px !important;
  max-width: 260px !important;
  min-width: 120px;
  min-height: 80px;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--bg2, #f0f0f0);
  transition: opacity 0.2s !important;
}
.m-img.loaded {
  aspect-ratio: unset;
  min-height: unset;
  object-fit: unset;
}
.m-img:active { opacity: 0.85 !important; }

/* ── ویدیو با تامبنیل مثل تلگرام ──────────────── */
.m-vid-wrap {
  position: relative; max-width: 260px; border-radius: 14px;
  overflow: hidden; cursor: pointer; background: #000;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.m-vid-wrap canvas.m-vid-thumb {
  display: block; width: 100%; border-radius: 14px;
  background: #1a1a1a;
}
.m-vid-wrap .m-vid-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
  transition: transform .15s, background .15s;
  pointer-events: none;
}
.m-vid-wrap:active .m-vid-play { transform: translate(-50%,-50%) scale(.9); background: rgba(0,0,0,.7); }
.m-vid-wrap .m-vid-dur {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 11px; font-weight: 600; padding: 2px 7px;
  border-radius: 8px;
  pointer-events: none;
}
.m-vid-wrap.playing canvas { display: none; }
.m-vid-wrap.playing .m-vid-play { display: none; }
.m-vid-wrap.playing .m-vid-dur { display: none; }
.m-vid-wrap.playing .m-vid-el { display: block !important; width: 100%; border-radius: 14px; }

/* ── انتخاب چندتایی ───────────────────────────── */
.multi-select-mode .mw { cursor: pointer; }
.multi-select-mode .mw .m-bubble { transition: background .15s; }
.mw.msg-selected .m-bubble { outline: 2px solid var(--accent); outline-offset: -2px; }
.mw.msg-selected { background: var(--accent-g); border-radius: 12px; }

/* ── ۱۵. reply preview بهتر ──────────────────────── */
.m-reply {
  border-right: 3px solid var(--accent) !important;
  border-radius: 0 10px 10px 0 !important;
  margin-bottom: 8px !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
}

/* ── ۱۶. جداکننده تاریخ بهتر ─────────────────────── */
.date-sep span {
  background: rgba(0,0,0,0.26) !important;
  padding: 4px 16px !important;
  border-radius: 16px !important;
  font-size: 12px !important;
  letter-spacing: 0.02em;
}

/* ── ۱۷. sidebar header ──────────────────────────── */
.sb-head {
  background: rgba(255,255,255,0.98) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
}

.sb-head h2 {
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}

/* ── ۱۸. typing indicator ─────────────────────────── */
/* ── Status line زیر نام (مثل تلگرام) ── */
.head-status {
  height: 15px;
  display: flex;
  align-items: center;
  margin-top: 2px;
  position: relative;
  overflow: hidden;
}
.head-status #head-sub {
  font-size: 12px;
  color: var(--t2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .18s ease, transform .18s ease;
  display: block;
}
#typing-indicator {
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center;
  gap: 5px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
#typing-indicator.active {
  opacity: 1;
  transform: translateY(0);
}
#typing-indicator .typing-text {
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* وقتی typing فعاله، head-sub مخفی میشه */
.head-status.typing-active #head-sub {
  opacity: 0;
  transform: translateY(-6px);
}
.typing-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  flex-shrink: 0;
}
.typing-dots span {
  width: 4px !important;
  height: 4px !important;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  animation: tdot 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }

/* ── ۱۹. modal بهتر ───────────────────────────────── */
.modal {
  border-radius: 22px !important;
  box-shadow: 0 12px 48px rgba(0,0,0,0.2) !important;
}

.msg-sheet-box {
  border-radius: 22px 22px 0 0 !important;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.15) !important;
}

/* ── ۲۰. بهبود لمس روی موبایل ─────────────────────── */
@media (pointer: coarse) {
  .ch-item { min-height: 68px; }
  .ibtn { width: 40px !important; height: 40px !important; }
  .react-big { font-size: 30px !important; padding: 8px !important; }
  .sheet-act { padding: 15px 20px !important; font-size: 15px !important; }
}

/* ── ۲۱. روانی scroll با momentum ─────────────────── */
#msgs, #channel-list, .contacts-list, .ur-list {
  -webkit-overflow-scrolling: touch;

}

/* ── ۲۲. بهبود search bar ─────────────────────────── */
.sb-search input {
  font-size: 14px !important;
  padding: 10px 16px !important;
  border-radius: 24px !important;
  transition: all 0.2s !important;
}

.sb-search input:focus {
  box-shadow: 0 0 0 3px rgba(43,155,244,0.12) !important;
  transform: none !important;
}

/* ── ۲۳. بهبود auth screen ────────────────────────── */
.auth-box {
  border-radius: 24px !important;
  box-shadow: 0 8px 48px rgba(0,0,0,0.12) !important;
}

.btn-p {
  border-radius: 10px !important;
  font-size: 14px !important;
  padding: 10px 18px !important;
  letter-spacing: 0.01em;
  box-shadow: none !important;
  font-weight: 600 !important;
  transition: background 0.15s, opacity 0.15s !important;
}

.btn-p:active {
  opacity: 0.82 !important;
  box-shadow: none !important;
}

/* ── ۲۴. focus states بهتر ─────────────────────────── */
.fg input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(43,155,244,0.12) !important;
  background: #fff !important;
  outline: none;
}

/* ── ۲۵. scroll to bottom button ──────────────────── */
.scroll-down-btn {
  width: 44px !important;
  height: 44px !important;
  box-shadow: 0 3px 16px rgba(0,0,0,0.18) !important;
  font-size: 20px !important;
  border-radius: 50% !important;
  transition: transform 0.2s, opacity 0.2s !important;
}

.scroll-down-btn:active { transform: scale(0.92) !important; }



/* ── NEW SIDEBAR ── */
.sb-head { height:var(--hh); padding:0 12px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--border); background:var(--bg2); flex-shrink:0; }
.head-acts { display:flex; gap:2px; }
.ibtn { width:36px; height:36px; border:none; background:transparent; color:var(--t2); border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; transition:background .15s,color .15s; }
.ibtn:hover { background:var(--bgh); color:var(--accent); }
.sb-search-bar { max-height:0; overflow:hidden; transition:max-height .25s cubic-bezier(.4,0,.2,1); background:var(--bg2); flex-shrink:0; }
.sb-search-bar.open { max-height:56px; }
.sb-search-inner { display:flex; align-items:center; gap:8px; padding:8px 12px; }
.sb-search-inner input { flex:1; padding:8px 12px; background:var(--bg3); border:none; border-radius:20px; color:var(--t1); font-family:inherit; font-size:13px; outline:none; }
.sb-search-inner input:focus { box-shadow:0 0 0 1.5px var(--accent); }
.sb-search-inner input::placeholder { color:var(--tm); }
.sb-search-close { width:28px; height:28px; border:none; background:transparent; color:var(--t2); cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#sb-search-btn.active { color:var(--accent); }
.filter-tabs { display:flex; overflow-x:auto; background:var(--bg2); flex-shrink:0; border-bottom:1.5px solid var(--border); }
.filter-tabs::-webkit-scrollbar { display:none; }
.filter-tab { flex:1; padding:11px 4px; border:none; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:4px; background:transparent; color:var(--t2); border-bottom:2.5px solid transparent; margin-bottom:-1.5px; white-space:nowrap; }
.filter-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:700; }
.filter-tab .ft-badge { background:var(--accent); color:#fff; font-size:10px; font-weight:800; padding:1px 5px; border-radius:10px; min-width:17px; text-align:center; line-height:1.6; }
.contacts-add-bar { display:none; padding:8px 12px; background:var(--bg2); border-bottom:1px solid var(--border2); gap:8px; align-items:center; flex-shrink:0; }
.contacts-add-bar input { flex:1; padding:8px 12px; background:var(--bg3); border:1.5px solid var(--border); border-radius:20px; font-family:inherit; font-size:13px; color:var(--t1); outline:none; }
.contacts-add-bar button { padding:7px 14px; background:var(--accent-g); color:var(--accent); border:1.5px solid var(--accent); border-radius:8px; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background 0.15s; }
.contacts-add-bar button:hover { background:var(--accent); color:#fff; }
#channel-list { flex:1; overflow-y:auto; background:var(--bg2); -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.ch-item-wrap { position:relative; overflow:hidden; border-bottom:1px solid var(--border2); }
.ch-item { display:flex; align-items:center; gap:12px; padding:10px 14px; cursor:pointer; background:var(--bg2); width:100%; position:relative; z-index:2; user-select:none; -webkit-user-select:none; }
.ch-item:active, .ch-item:hover { background:var(--bgh); }
.ch-item.active { background:var(--accent-g); border-right:3px solid var(--accent); }
.ch-item-wrap.pinned .ch-item { background:rgba(43,155,244,.05); }
.ch-item-delete-bg { position:absolute; left:0; top:0; bottom:0; width:80px; background:#ef4444; display:none; align-items:center; justify-content:center; color:#fff; font-size:26px; z-index:1; }
.ch-item-wrap.swiping .ch-item-delete-bg { display:flex; }
.ch-av { width:52px; height:52px; border-radius:50%; flex-shrink:0; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--accent-d),var(--accent)); }
.ch-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.on-dot { width:13px; height:13px; background:#22c55e; border:2.5px solid var(--bg2); border-radius:50%; position:absolute; bottom:1px; left:1px; }
.ch-info { flex:1; min-width:0; overflow:hidden; }
.ch-row1 { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:3px; }
.ch-name-area { display:flex; align-items:center; gap:4px; flex:1; min-width:0; }
.ch-name-txt { font-size:15px; font-weight:700; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-verified { color:#2b9bf4; font-size:13px; flex-shrink:0; }
.ch-time-sb { font-size:11px; color:var(--tm); white-space:nowrap; flex-shrink:0; }
.ch-row2 { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.ch-last-sb { font-size:13px; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; line-height:1.4; }
.ubadge-new { background:var(--accent); color:#fff; font-size:11px; font-weight:800; border-radius:12px; padding:2px 8px; min-width:22px; text-align:center; line-height:1.6; flex-shrink:0; }
.ch-pin-new { font-size:13px; opacity:.4; flex-shrink:0; }

.add-member-btn { padding:5px 12px; background:transparent; color:var(--accent); border:1.5px solid var(--accent); border-radius:8px; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; transition:all 0.15s; flex-shrink:0; }
.add-member-btn:hover,.add-member-btn:active { background:var(--accent); color:#fff; }
.add-member-btn.added { background:var(--bg3); color:var(--t3); border-color:var(--border); cursor:default; }

/* ═══ PERF PATCH (new1) ═══ */
/* جلوگیری از منوی سیستمی iOS روی لمس طولانی پیام (به جای preventDefault که اسکرول را کند می‌کرد) */
.m-bubble, .ch-item, .ig-item img, .m-img { -webkit-touch-callout: none; }
.ch-item-wrap { contain: layout paint; }
#channel-list, #msgs { overscroll-behavior: contain; }
#msgs { overflow-anchor: none; }
/* در حین اسکرول انیمیشن‌های تزئینی متوقف */
#msgs.is-scrolling .reaction-btn, #msgs.no-anim * { animation: none !important; }
.m-file, .m-reply, .reaction-btn, .vp-play, .ch-item { touch-action: manipulation; }
body.chat-open #install-mini-btn { display: none !important; }

/* ═══ بنر فعال‌سازی اعلان ═══ */
.push-banner { display:flex; align-items:center; gap:8px; padding:9px 12px; background:var(--accent-g); border-bottom:1px solid var(--border2); flex-shrink:0; font-size:12.5px; color:var(--t1); }
.push-banner .pb-ico { font-size:17px; flex-shrink:0; }
.push-banner .pb-txt { flex:1; min-width:0; line-height:1.5; }
.push-banner .pb-on { border:none; background:var(--accent); color:#fff; font-family:inherit; font-size:12px; font-weight:700; padding:6px 12px; border-radius:16px; cursor:pointer; flex-shrink:0; }
.push-banner .pb-x { border:none; background:transparent; color:var(--t2); font-size:14px; cursor:pointer; padding:4px 6px; flex-shrink:0; }