/* =====================================================================
   chat.css — چتِ بوستی‌لرن با حس‌وحالِ تلگرام (assets/ui/chat.js)
   همه‌چیز زیرِ .bnc / .bnp / .tgp اسکوپ شده تا به بقیه‌ی سایت دست نزنه.
   انیمیشن‌ها فقط با transform/opacity (روونِ ۶۰ فریم روی گوشی‌های ضعیف هم)
   ===================================================================== */

.bnc, .bnp, .bnc-ask, .bnc-toast, .bnc-note, .tgp {
  --c-bg: #0E0B1A;
  --c-panel: #17132A;
  --c-panel-2: #1D1835;
  --c-line: rgba(255,255,255,.07);
  --c-hover: rgba(255,255,255,.045);
  --c-text: #F3F1FF;
  --c-mid: #A9A2CC;
  --c-low: #6F6894;
  --c-accent: #2BFFC6;
  --c-accent-ink: #062A22;
  --c-link: #5CE1FF;
  --c-out: #1F5450;
  --c-out-meta: rgba(220,255,245,.62);
  --c-in: #201B39;
  --c-in-meta: rgba(200,192,235,.55);
  --c-read: #2BFFC6;
  --c-danger: #FF5C7A;
  --c-gold: #FFC94A;
  --c-bar: rgba(23,19,42,.82);
  --c-wall: #0C0917;
  --c-wall-ink: rgba(150,130,255,.05);
  --c-shadow: 0 1px 1.5px rgba(0,0,0,.35);
  font-family: var(--font-fa, 'Vazirmatn', sans-serif);
}
:root[data-theme="light"] .bnc, :root[data-theme="light"] .bnp, :root[data-theme="light"] .bnc-ask,
:root[data-theme="light"] .bnc-toast, :root[data-theme="light"] .bnc-note, :root[data-theme="light"] .tgp {
  --c-bg: #FFFFFF;
  --c-panel: #FFFFFF;
  --c-panel-2: #F2F1F7;
  --c-line: rgba(20,10,60,.08);
  --c-hover: rgba(20,10,60,.04);
  --c-text: #17132A;
  --c-mid: #5D5878;
  --c-low: #8E89A8;
  --c-accent: #12B98C;
  --c-accent-ink: #FFFFFF;
  --c-link: #1D8FE0;
  --c-out: #E1FAEE;
  --c-out-meta: #3FA57E;
  --c-in: #FFFFFF;
  --c-in-meta: #9A95B4;
  --c-read: #12B98C;
  --c-bar: rgba(255,255,255,.9);
  --c-wall: #DCE8DF;
  --c-wall-ink: rgba(40,90,60,.07);
  --c-shadow: 0 1px 1.5px rgba(30,50,40,.16);
}

html.bnc-lock, html.bnc-lock body { overflow: hidden !important; overscroll-behavior: none; }

/* ---------- لایه‌ی اصلی ---------- */
.bnc {
  position: fixed; left: 0; right: 0; top: 0; height: 100%;
  z-index: 9000; direction: rtl; color: var(--c-text); background: var(--c-bg);
  display: none; overflow: hidden;
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
}
.bnc.open { display: block; animation: bncFade .22s ease-out; }
.bnc.closing { animation: bncFadeOut .2s ease-in forwards; }
@keyframes bncFade { from { opacity: 0; transform: scale(.985); } }
@keyframes bncFadeOut { to { opacity: 0; transform: scale(.985); } }
.bnc *, .bnp *, .tgp * { box-sizing: border-box; }
.bnc button, .bnp button, .tgp button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
.bnc-shell { position: absolute; inset: 0; display: flex; }

/* ستونِ لیست و ستونِ گفتگو */
.bnc-list, .bnc-conv { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--c-bg); }
.bnc-conv { transform: translate3d(-100%,0,0); transition: transform .32s cubic-bezier(.2,.85,.25,1); will-change: transform; z-index: 2; box-shadow: 0 0 40px rgba(0,0,0,.35); }
.bnc.in-chat .bnc-conv { transform: none; }
.bnc-list { transition: transform .32s cubic-bezier(.2,.85,.25,1), filter .32s; }
.bnc.in-chat .bnc-list { transform: translate3d(22%,0,0); filter: brightness(.8); }
@media (min-width: 900px) {
  .bnc-list { position: relative; inset: auto; width: 380px; flex: 0 0 380px; border-left: 1px solid var(--c-line); transform: none !important; filter: none !important; }
  .bnc-conv { position: relative; inset: auto; flex: 1; transform: none; box-shadow: none; }
}

/* ---------- نوارِ بالا ---------- */
.bnc-bar {
  position: relative; z-index: 3; flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  min-height: 56px; padding: calc(6px + env(safe-area-inset-top)) 8px 6px;
  background: var(--c-bar); border-bottom: 1px solid var(--c-line);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
}
.bnc-ic {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: 0; background: none;
  color: var(--c-mid); display: grid; place-items: center; cursor: pointer; transition: background .15s, transform .15s;
}
.bnc-ic:hover { background: var(--c-hover); }
.bnc-ic:active { transform: scale(.9); }
.bnc-ic svg { width: 24px; height: 24px; }
.bnc-title { flex: 1; min-width: 0; font-size: 19px; font-weight: 800; padding: 0 6px; }
.bnc-title small { display: block; font-size: 12px; font-weight: 500; color: var(--c-low); margin-top: -2px; }

/* ---------- جست‌وجو ---------- */
.bnc-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.bnc-search input {
  flex: 1; min-width: 0; height: 40px; border-radius: 20px; border: 0; outline: none;
  background: var(--c-panel-2); color: var(--c-text); padding: 0 16px; font: inherit; font-size: 15px; direction: ltr; text-align: right;
}
.bnc-search input::placeholder { color: var(--c-low); direction: rtl; }

/* ---------- ردیف‌های لیست ---------- */
.bnc-rows { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 0 96px; }
.bnc-row {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px 14px; border: 0; background: none; color: inherit; text-align: right; cursor: pointer;
  transition: background .15s;
}
.bnc-row:hover { background: var(--c-hover); }
.bnc-row:active { background: var(--c-hover); transform: none; }
.bnc-row.sel { background: rgba(43,255,198,.10); }
.bnc-row .rb { flex: 1; min-width: 0; padding: 4px 0; border-bottom: 1px solid var(--c-line); align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.bnc-row:last-child .rb { border-bottom: 0; }
.bnc-row .r1, .bnc-row .r2 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bnc-row .nm { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bnc-row .tm { flex: 0 0 auto; font-size: 12px; color: var(--c-low); display: inline-flex; align-items: center; gap: 3px; }
.bnc-row .pv { flex: 1; min-width: 0; font-size: 14px; color: var(--c-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bnc-row .pv b { color: var(--c-text); font-weight: 600; }
.bnc-row .pv.typing { color: var(--c-accent); }
.bnc-badge {
  flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
  background: var(--c-accent); color: var(--c-accent-ink); font-size: 12.5px; font-weight: 800;
  display: inline-grid; place-items: center; line-height: 1;
}
.bnc-tag { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 6px; background: rgba(255,201,74,.14); color: var(--c-gold); }
.bnc-row .tk { color: var(--c-read); display: inline-flex; }
.bnc-row .tk svg { width: 17px; height: 17px; }
.bnc-row .tk.one { color: var(--c-low); }

/* آواتار — ۷ رنگِ تلگرامی */
.bnc-av {
  position: relative; flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 21px; line-height: 1;
  background: linear-gradient(180deg, var(--a1), var(--a2)); user-select: none;
}
.bnc-av.s40 { width: 40px; height: 40px; font-size: 16px; }
.bnc-av.s36 { width: 36px; height: 36px; font-size: 15px; }
.bnc-av.s110 { width: 110px; height: 110px; font-size: 44px; }
.bnc-av.on::after {
  content: ''; position: absolute; bottom: 1px; left: 1px; width: 14px; height: 14px; border-radius: 50%;
  background: #34D399; box-shadow: 0 0 0 3px var(--c-bg);
}
.bnc-av.s40.on::after, .bnc-av.s36.on::after { width: 11px; height: 11px; box-shadow: 0 0 0 2.5px var(--c-bar); }
.c0 { --a1: #FF885E; --a2: #FF516A; } .c1 { --a1: #FFCD6A; --a2: #FFA85C; } .c2 { --a1: #82B1FF; --a2: #665FFF; }
.c3 { --a1: #A0DE7E; --a2: #54CB68; } .c4 { --a1: #53EDD6; --a2: #28C9B7; } .c5 { --a1: #72D5FD; --a2: #2A9EF1; }
.c6 { --a1: #E0A2F3; --a2: #D669ED; }

/* اسکلتِ در حالِ بارگذاری */
.bnc-sk { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.bnc-sk i { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--c-panel-2) 25%, var(--c-hover) 50%, var(--c-panel-2) 75%); background-size: 200% 100%; animation: bncSk 1.2s linear infinite; }
.bnc-sk .a { width: 54px; height: 54px; border-radius: 50%; }
@keyframes bncSk { to { background-position: -200% 0; } }

.bnc-empty { text-align: center; padding: 56px 28px; color: var(--c-mid); line-height: 1.9; font-size: 14.5px; }
.bnc-empty .e { font-size: 64px; display: block; margin-bottom: 10px; animation: bncFloat 3s ease-in-out infinite; }
.bnc-empty b { display: block; font-size: 17px; color: var(--c-text); margin-bottom: 4px; }
@keyframes bncFloat { 50% { transform: translateY(-6px); } }

.bnc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; cursor: pointer;
  height: 44px; padding: 0 22px; border-radius: 22px; font-size: 15px; font-weight: 800;
  background: var(--c-accent); color: var(--c-accent-ink); transition: transform .15s, filter .15s;
}
.bnc-btn:active { transform: scale(.96); }
.bnc-btn.ghost { background: var(--c-panel-2); color: var(--c-text); }
.bnc-btn.wide { width: 100%; }

.bnc-fab {
  position: absolute; left: 18px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 4;
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--c-accent); color: var(--c-accent-ink); display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(43,255,198,.35), 0 2px 6px rgba(0,0,0,.3);
  transition: transform .25s cubic-bezier(.2,1.4,.4,1);
}
.bnc-fab:active { transform: scale(.9); }
.bnc-fab svg { width: 26px; height: 26px; }

/* کارتِ «پروفایلت رو کامل کن» بالای لیست */
.bnc-setup {
  margin: 10px 12px 6px; padding: 12px 14px; border-radius: 16px; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(43,255,198,.12), rgba(92,225,255,.08)); border: 1px solid rgba(43,255,198,.22);
  cursor: pointer; text-align: right; color: inherit; width: calc(100% - 24px);
}
.bnc-setup .t { flex: 1; font-size: 13.5px; line-height: 1.7; color: var(--c-mid); }
.bnc-setup .t b { display: block; color: var(--c-text); font-size: 14.5px; }

/* ---------- گفتگو ---------- */
.bnc-placeholder { flex: 1; display: grid; place-items: center; background: var(--c-wall); color: var(--c-mid); position: relative; }
.bnc-placeholder span { position: relative; z-index: 1; padding: 6px 14px; border-radius: 14px; background: rgba(0,0,0,.25); color: #fff; font-size: 14px; }
:root[data-theme="light"] .bnc-placeholder span { background: rgba(40,70,50,.25); }
.bnc-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
.bnc-head { cursor: pointer; }
.bnc-head .who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; color: inherit; text-align: right; cursor: pointer; padding: 2px 0; }
.bnc-head .who .tx { min-width: 0; }
.bnc-head .who b { display: block; font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bnc-head .who small { display: block; font-size: 12.5px; color: var(--c-low); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bnc-head .who small.on { color: var(--c-accent); }
.bnc-dots { display: inline-flex; gap: 2px; margin-inline-start: 4px; vertical-align: middle; }
.bnc-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: bncDot 1.2s infinite ease-in-out; }
.bnc-dots i:nth-child(2) { animation-delay: .15s; } .bnc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bncDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* بنرِ «سؤالِ خرید» زیرِ هدر */
.bnc-askbar {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: var(--c-bar); border-bottom: 1px solid var(--c-line); font-size: 13px; line-height: 1.75; color: var(--c-mid);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.bnc-askbar .i { font-size: 20px; }
.bnc-askbar p { flex: 1; margin: 0; }
.bnc-askbar b { color: var(--c-text); }
.bnc-askbar button { flex: 0 0 auto; border: 0; background: none; color: var(--c-accent); font-weight: 800; font-size: 13px; cursor: pointer; padding: 6px; }

/* پس‌زمینه‌ی گفتگو: الگوی ریزِ کدی (مثلِ والپیپرِ تلگرام) */
.bnc-msgs {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 10px 10px 8px; background-color: var(--c-wall); overflow-anchor: none; position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%239682ff' stroke-opacity='.045' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 30l-10 10 10 10M40 30l10 10-10 10M34 26l-6 28'/%3E%3Cpath d='M112 22c-6 0-6 4-6 8s0 6-4 6c4 0 4 2 4 6s0 8 6 8M136 22c6 0 6 4 6 8s0 6 4 6c-4 0-4 2-4 6s0 8-6 8'/%3E%3Ccircle cx='80' cy='92' r='9'/%3E%3Cpath d='M20 118h20M20 128h12M108 108l14 14m0-14l-14 14M64 140l8-8 8 8M138 92a8 8 0 1 1-16 0 8 8 0 0 1 16 0z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 160px;
}
:root[data-theme="light"] .bnc-msgs { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23285a3c' stroke-opacity='.09' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 30l-10 10 10 10M40 30l10 10-10 10M34 26l-6 28'/%3E%3Cpath d='M112 22c-6 0-6 4-6 8s0 6-4 6c4 0 4 2 4 6s0 8 6 8M136 22c6 0 6 4 6 8s0 6 4 6c-4 0-4 2-4 6s0 8-6 8'/%3E%3Ccircle cx='80' cy='92' r='9'/%3E%3Cpath d='M20 118h20M20 128h12M108 108l14 14m0-14l-14 14M64 140l8-8 8 8M138 92a8 8 0 1 1-16 0 8 8 0 0 1 16 0z'/%3E%3C/g%3E%3C/svg%3E"); }
.bnc-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; min-height: 100%; justify-content: flex-end; }

.bnc-more { text-align: center; padding: 8px; color: var(--c-mid); font-size: 12.5px; }
.bnc-day { position: sticky; top: 6px; z-index: 1; align-self: center; margin: 8px 0; padding: 3px 11px; border-radius: 13px; font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(0,0,0,.32); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
:root[data-theme="light"] .bnc-day { background: rgba(40,75,55,.32); }
.bnc-unread-line { align-self: stretch; text-align: center; margin: 8px -10px; padding: 4px; font-size: 13px; font-weight: 600; color: var(--c-mid); background: var(--c-bar); }
.bnc-sys { align-self: center; max-width: 86%; margin: 8px 0; padding: 6px 13px; border-radius: 14px; font-size: 13px; line-height: 1.8; text-align: center; color: #fff; background: rgba(0,0,0,.34); }
:root[data-theme="light"] .bnc-sys { background: rgba(40,75,55,.38); }

/* حباب‌ها */
.bm { display: flex; padding: 1px 0; position: relative; contain: layout style; }
.bm.out { justify-content: flex-start; padding-inline-start: 8px; }   /* راست */
.bm.in { justify-content: flex-end; padding-inline-end: 8px; }        /* چپ */
.bm.gl { padding-bottom: 6px; }
.bb {
  position: relative; max-width: min(78%, 520px); min-width: 64px;
  padding: 6px 10px 7px; border-radius: 18px; box-shadow: var(--c-shadow);
  font-size: 15.5px; line-height: 1.6; word-wrap: break-word; overflow-wrap: anywhere;
  transition: transform .2s cubic-bezier(.2,.9,.3,1.2), filter .2s;
  user-select: text; -webkit-user-select: text; -webkit-touch-callout: none;
}
.bm.out .bb { background: var(--c-out); color: var(--c-text); }
:root:not([data-theme="light"]) .bm.out .bb { color: #EFFFFA; }
.bm.in .bb { background: var(--c-in); }
.bm.out.gl .bb { border-top-right-radius: 18px; border-bottom-right-radius: 5px; }
.bm.in.gl .bb { border-bottom-left-radius: 5px; }
.bm.out:not(.gf) .bb { border-top-right-radius: 6px; }
.bm.out:not(.gl) .bb { border-bottom-right-radius: 6px; }
.bm.in:not(.gf) .bb { border-top-left-radius: 6px; }
.bm.in:not(.gl) .bb { border-bottom-left-radius: 6px; }
/* دمِ حباب (مثلِ تلگرام) */
.bm.gl .bb::after { content: ''; position: absolute; bottom: 0; width: 11px; height: 17px; background: inherit; }
.bm.out.gl .bb::after { right: -6px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='17' viewBox='0 0 11 17'%3E%3Cpath d='M0 0v17h10a1 1 0 0 0 .7-1.7C6.4 11.3 1.6 6.6 0 0z'/%3E%3C/svg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='17' viewBox='0 0 11 17'%3E%3Cpath d='M0 0v17h10a1 1 0 0 0 .7-1.7C6.4 11.3 1.6 6.6 0 0z'/%3E%3C/svg%3E") no-repeat; }
.bm.in.gl .bb::after { left: -6px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='17' viewBox='0 0 11 17'%3E%3Cpath d='M11 0v17H1a1 1 0 0 1-.7-1.7C4.6 11.3 9.4 6.6 11 0z'/%3E%3C/svg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='17' viewBox='0 0 11 17'%3E%3Cpath d='M11 0v17H1a1 1 0 0 1-.7-1.7C4.6 11.3 9.4 6.6 11 0z'/%3E%3C/svg%3E") no-repeat; }
.bt { white-space: pre-wrap; unicode-bidi: plaintext; }
.bsp { display: inline-block; width: 46px; height: 1px; }
.bm.out .bsp { width: 62px; }
.bmeta { position: absolute; bottom: 4px; left: 10px; display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; line-height: 1; direction: ltr; white-space: nowrap; pointer-events: none; }
.bm.out .bmeta { color: var(--c-out-meta); }
.bm.in .bmeta { color: var(--c-in-meta); }
.bmeta svg { width: 16px; height: 16px; }
.bmeta .rd { color: var(--c-read); }
:root:not([data-theme="light"]) .bm.out .bmeta .rd { color: #7BFFE0; }
.bmeta .err { color: var(--c-danger); font-weight: 900; font-size: 14px; }
.bm.failed .bb { cursor: pointer; }
.bm.pending .bb { opacity: .92; }
.bfl { display: block; font-size: 11.5px; margin-top: 2px; opacity: .7; }

/* نقل‌قول داخلِ حباب */
.bq { display: block; margin: 2px 0 5px; padding: 3px 9px 3px 8px; border-radius: 8px; border-right: 3px solid var(--c-accent); background: rgba(43,255,198,.08); cursor: pointer; max-width: 100%; overflow: hidden; }
:root[data-theme="light"] .bm.out .bq { background: rgba(18,185,140,.10); }
.bq b { display: block; font-size: 13px; color: var(--c-accent); font-weight: 700; }
.bq span { display: block; font-size: 13.5px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ایموجیِ تنها = بزرگ و بدونِ حباب */
.bm.jumbo .bb { background: none !important; box-shadow: none; padding: 0 2px 18px; font-size: 44px; line-height: 1.2; }
.bm.jumbo .bb::after { display: none; }
.bm.jumbo .bmeta { left: auto; right: 0; bottom: 0; padding: 3px 7px; border-radius: 10px; background: rgba(0,0,0,.3); color: #fff !important; }
.bm.jumbo .bsp { display: none; }

/* ورودِ پیامِ جدید */
.bm.enter .bb { animation: bmIn .26s cubic-bezier(.2,.9,.3,1.15); }
.bm.out.enter .bb { transform-origin: 100% 100%; }
.bm.in.enter .bb { transform-origin: 0 100%; }
@keyframes bmIn { from { opacity: 0; transform: translateY(14px) scale(.92); } }
.bm.flash .bb { animation: bmFlash 1.2s ease; }
@keyframes bmFlash { 20%, 60% { filter: brightness(1.35); transform: scale(1.02); } }

/* کشیدن برای پاسخ (مثلِ تلگرام) */
.bm .swipe-ic { position: absolute; top: 50%; left: 4px; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.28); color: #fff; opacity: 0; transform: scale(.4); transition: opacity .15s, transform .15s; pointer-events: none; }
.bm .swipe-ic svg { width: 18px; height: 18px; }

/* دکمه‌ی «برو پایین» */
.bnc-jump {
  position: absolute; left: 14px; bottom: 86px; z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--c-panel); color: var(--c-mid); box-shadow: 0 2px 10px rgba(0,0,0,.3); display: grid; place-items: center;
  transform: scale(.4); opacity: 0; pointer-events: none; transition: transform .25s cubic-bezier(.2,1.3,.4,1), opacity .2s;
}
.bnc-jump.show { transform: none; opacity: 1; pointer-events: auto; }
.bnc-jump svg { width: 24px; height: 24px; }
.bnc-jump .bnc-badge { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); }

/* ---------- نوارِ نوشتن ---------- */
.bnc-compose { position: relative; z-index: 3; flex: 0 0 auto; background: var(--c-bar); border-top: 1px solid var(--c-line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.bnc-reply { display: flex; align-items: center; gap: 10px; padding: 4px 6px 8px; animation: bncUp .2s ease-out; }
@keyframes bncUp { from { opacity: 0; transform: translateY(8px); } }
.bnc-reply svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--c-accent); }
.bnc-reply .q { flex: 1; min-width: 0; border-right: 2px solid var(--c-accent); padding-right: 8px; }
.bnc-reply .q b { display: block; font-size: 13px; color: var(--c-accent); }
.bnc-reply .q span { display: block; font-size: 13.5px; color: var(--c-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bnc-row2 { display: flex; align-items: flex-end; gap: 6px; max-width: 760px; margin: 0 auto; }
.bnc-field { flex: 1; min-width: 0; display: flex; align-items: flex-end; background: var(--c-panel-2); border-radius: 22px; padding: 0 4px 0 14px; }
.bnc-field textarea {
  flex: 1; min-width: 0; border: 0; outline: none; resize: none; background: none; color: var(--c-text);
  font: inherit; font-size: 16px; line-height: 1.5; padding: 10px 2px; max-height: 148px; height: 44px; overflow-y: auto;
  unicode-bidi: plaintext;
}
.bnc-field textarea::placeholder { color: var(--c-low); }
.bnc-send {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--c-accent); color: var(--c-accent-ink); display: grid; place-items: center;
  transform: scale(.6); opacity: 0; pointer-events: none; transition: transform .22s cubic-bezier(.2,1.5,.4,1), opacity .15s;
}
.bnc-send.show { transform: none; opacity: 1; pointer-events: auto; }
.bnc-send:active { transform: scale(.88); }
.bnc-send svg { width: 22px; height: 22px; transform: scaleX(-1); }
.bnc-locked { text-align: center; padding: 12px; font-size: 14px; color: var(--c-mid); }
.bnc-locked button { border: 0; background: none; color: var(--c-accent); font: inherit; font-weight: 800; cursor: pointer; }

/* ---------- منوی لمسِ طولانی ---------- */
.bnc-menu-back { position: absolute; inset: 0; z-index: 20; background: rgba(0,0,0,.25); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: bncFade .15s ease-out; }
.bnc-menu {
  position: absolute; z-index: 21; min-width: 190px; padding: 6px; border-radius: 14px; background: var(--c-panel);
  box-shadow: 0 12px 40px rgba(0,0,0,.4); animation: bncPop .2s cubic-bezier(.2,1.3,.4,1); transform-origin: top center;
}
@keyframes bncPop { from { opacity: 0; transform: scale(.8); } }
.bnc-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; background: none; color: var(--c-text); font-size: 15px; cursor: pointer; text-align: right; }
.bnc-menu button:hover, .bnc-menu button:active { background: var(--c-hover); }
.bnc-menu button.red { color: var(--c-danger); }
.bnc-menu svg { width: 20px; height: 20px; opacity: .85; }
.bm.lifted .bb { transform: scale(1.03); filter: brightness(1.08); }

/* ---------- صفحه‌های رو (پروفایلِ طرف، ویرایش، گزارش) ---------- */
.bnp {
  position: fixed; inset: 0; z-index: 9100; direction: rtl; color: var(--c-text); background: var(--c-panel-2);
  display: flex; flex-direction: column; transform: translate3d(-100%,0,0); transition: transform .32s cubic-bezier(.2,.85,.25,1);
  will-change: transform;
}
.bnp.on { transform: none; }
@media (min-width: 900px) {
  .bnp { left: auto; width: 420px; box-shadow: 0 0 60px rgba(0,0,0,.45); transform: translate3d(100%,0,0); right: 0; }
  .bnp.on { transform: none; }
  .bnp.center { left: 50%; right: auto; top: 50%; bottom: auto; width: 440px; max-height: 86vh; border-radius: 18px; transform: translate(-50%,-46%) scale(.96); opacity: 0; transition: transform .25s cubic-bezier(.2,1.2,.4,1), opacity .2s; }
  .bnp.center.on { transform: translate(-50%,-50%); opacity: 1; }
  .bnp-dim { position: fixed; inset: 0; z-index: 9099; background: rgba(0,0,0,.45); animation: bncFade .2s; }
}
.bnp .bnc-bar { background: var(--c-bar); }
.bnp-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.bnp-done { border: 0; background: none; color: var(--c-accent); font-size: 16px; font-weight: 800; padding: 8px 10px; cursor: pointer; }
.bnp-done[disabled] { opacity: .35; cursor: default; }

/* هدرِ پروفایلِ تلگرامی */
.tg-hero { text-align: center; padding: 22px 16px 18px; position: relative; overflow: hidden; }
.tg-hero::before { content: ''; position: absolute; inset: -40% -20% auto; height: 150%; background: radial-gradient(closest-side, var(--hero, rgba(43,255,198,.18)), transparent); opacity: .9; pointer-events: none; }
.tg-hero > * { position: relative; }
.tg-hero .bnc-av { margin: 0 auto 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.tg-hero h2 { font-size: 22px; font-weight: 800; margin: 0; line-height: 1.5; }
.tg-hero p { margin: 2px 0 0; font-size: 14px; color: var(--c-low); }
.tg-hero p.on { color: var(--c-accent); }
.tg-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 4px 11px; border-radius: 12px; font-size: 12.5px; font-weight: 800; background: rgba(255,201,74,.14); color: var(--c-gold); }
.tg-acts { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.tg-act { flex: 0 1 96px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; border: 0; background: var(--c-panel); color: var(--c-accent); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.tg-act svg { width: 24px; height: 24px; }
.tg-act.red { color: var(--c-danger); }

/* لیست‌های گروهیِ تلگرامی */
.tg-group { margin: 0 12px 14px; border-radius: 14px; overflow: hidden; background: var(--c-panel); }
.tg-row { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 50px; padding: 9px 14px; border: 0; background: none; color: var(--c-text); text-align: right; font-size: 15.5px; cursor: pointer; transition: background .15s; }
.tg-row:hover, .tg-row:active { background: var(--c-hover); }
.tg-row + .tg-row::before { content: ''; position: absolute; top: 0; left: 0; right: 58px; height: 1px; background: var(--c-line); }
.tg-row.plain + .tg-row::before, .tg-row.plain::before { right: 14px; }
.tg-row .ti { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 16px; }
.tg-row .ti svg { width: 18px; height: 18px; }
.tg-row .tx { flex: 1; min-width: 0; }
.tg-row .tx b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-row .tx small { display: block; font-size: 13px; color: var(--c-low); margin-top: 1px; }
.tg-row .tx .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.tg-row .tx .ph { color: var(--c-accent); font-weight: 600; }
.tg-row .tv { flex: 0 0 auto; color: var(--c-low); font-size: 14.5px; }
.tg-row .chev { flex: 0 0 auto; color: var(--c-low); opacity: .6; }
.tg-row .chev svg { width: 18px; height: 18px; display: block; }
.tg-row.red { color: var(--c-danger); }
.tg-row.info { cursor: default; }
.tg-row.info:hover { background: none; }
.tg-note { margin: -6px 26px 16px; font-size: 13px; line-height: 1.8; color: var(--c-low); }
.i-teal { background: linear-gradient(180deg,#3BE8C1,#14B892); } .i-blue { background: linear-gradient(180deg,#5AB8FF,#2D86F0); }
.i-gold { background: linear-gradient(180deg,#FFD15C,#F5A623); } .i-pink { background: linear-gradient(180deg,#FF7BC9,#E8459E); }
.i-violet { background: linear-gradient(180deg,#A58BFF,#7259F0); } .i-red { background: linear-gradient(180deg,#FF7A8A,#F0465C); }
.i-green { background: linear-gradient(180deg,#6EE38A,#2FBF5B); } .i-gray { background: linear-gradient(180deg,#9AA0B4,#6E7488); }

/* کلیدِ روشن/خاموشِ iOS */
.tg-sw { position: relative; flex: 0 0 auto; width: 51px; height: 31px; border-radius: 16px; background: rgba(120,120,128,.32); transition: background .25s; }
.tg-sw::after { content: ''; position: absolute; top: 2px; right: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.18); transition: transform .3s cubic-bezier(.3,1.4,.5,1); }
.tg-sw.on { background: #34C759; }
.tg-sw.on::after { transform: translateX(-20px); }

/* فیلدهای صفحه‌ی ویرایش */
.tg-field { margin: 16px 12px 8px; border-radius: 12px; background: var(--c-panel); display: flex; align-items: center; padding: 0 14px; }
.tg-field input, .tg-field textarea { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--c-text); font: inherit; font-size: 16px; padding: 14px 0; resize: none; }
.tg-field .at { color: var(--c-low); font-size: 16px; direction: ltr; padding-left: 1px; }
.tg-field.ltr { direction: ltr; }
.tg-field.ltr input { direction: ltr; text-align: left; }
.tg-field .cnt { color: var(--c-low); font-size: 13px; align-self: flex-start; padding-top: 15px; }
.tg-label { margin: 18px 26px -8px; font-size: 13px; color: var(--c-low); }
.tg-status { margin: 4px 26px 0; min-height: 22px; font-size: 13.5px; }
.tg-status.ok { color: #34C759; } .tg-status.no { color: var(--c-danger); } .tg-status.wait { color: var(--c-low); }
.tg-help { margin: 8px 26px; font-size: 13.5px; line-height: 1.9; color: var(--c-low); }
.tg-help b { color: var(--c-mid); }
.tg-err { margin: 6px 26px; color: var(--c-danger); font-size: 13.5px; min-height: 20px; }
.tg-radio { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: 0; background: none; color: var(--c-text); font-size: 15.5px; text-align: right; cursor: pointer; }
.tg-radio + .tg-radio { border-top: 1px solid var(--c-line); }
.tg-radio i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c-low); flex: 0 0 auto; transition: all .15s; }
.tg-radio.on i { border-color: var(--c-accent); box-shadow: inset 0 0 0 4px var(--c-panel); background: var(--c-accent); }

/* ---------- اعلانِ بالای صفحه (مثلِ نوتیفِ داخلِ تلگرام) ---------- */
.bnc-note {
  position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 50%; z-index: 9200; width: min(420px, calc(100vw - 20px));
  display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-radius: 18px; direction: rtl; cursor: pointer;
  background: var(--c-bar); color: var(--c-text); border: 1px solid var(--c-line);
  box-shadow: 0 14px 40px rgba(0,0,0,.4); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  transform: translate(-50%, -140%); transition: transform .45s cubic-bezier(.2,1.2,.35,1);
}
.bnc-note.on { transform: translate(-50%, 0); }
.bnc-note .tx { flex: 1; min-width: 0; }
.bnc-note b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bnc-note span { display: block; font-size: 13.5px; color: var(--c-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bnc-toast { position: fixed; bottom: calc(96px + env(safe-area-inset-bottom)); left: 50%; z-index: 9300; transform: translate(-50%, 20px); opacity: 0; padding: 10px 16px; border-radius: 14px; background: rgba(20,16,36,.94); color: #fff; font-size: 14px; direction: rtl; max-width: calc(100vw - 32px); text-align: center; transition: transform .3s cubic-bezier(.2,1.2,.4,1), opacity .2s; pointer-events: none; font-family: var(--font-fa, 'Vazirmatn', sans-serif); }
.bnc-toast.on { transform: translate(-50%, 0); opacity: 1; }

/* ---------- پاپ‌آپِ «از یه خریدار بپرس» ---------- */
.bnc-ask { position: fixed; inset: 0; z-index: 9050; display: grid; place-items: center; padding: 20px; background: rgba(5,3,12,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .25s; direction: rtl; }
.bnc-ask.on { opacity: 1; }
.bnc-ask .card { width: min(380px, 100%); text-align: center; padding: 26px 22px 16px; border-radius: 28px; background: radial-gradient(120% 60% at 50% 0%, rgba(43,255,198,.14), transparent 60%), var(--c-panel); color: var(--c-text); border: 1px solid var(--c-line); box-shadow: 0 30px 80px rgba(0,0,0,.5); transform: scale(.88) translateY(14px); transition: transform .45s cubic-bezier(.2,1.3,.35,1); }
.bnc-ask.on .card { transform: none; }
.bnc-ask .faces { display: flex; justify-content: center; margin-bottom: 14px; }
.bnc-ask .faces .bnc-av { width: 52px; height: 52px; font-size: 20px; box-shadow: 0 0 0 3px var(--c-panel); margin: 0 -7px; animation: bncFaces .6s cubic-bezier(.2,1.4,.4,1) backwards; }
.bnc-ask .faces .bnc-av:nth-child(2) { animation-delay: .08s; } .bnc-ask .faces .bnc-av:nth-child(3) { animation-delay: .16s; }
.bnc-ask .faces .bubble { position: relative; width: 52px; height: 52px; margin: 0 -7px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: var(--c-accent); box-shadow: 0 0 0 3px var(--c-panel); animation: bncFaces .6s .24s cubic-bezier(.2,1.4,.4,1) backwards; }
@keyframes bncFaces { from { opacity: 0; transform: translateY(10px) scale(.6); } }
.bnc-ask h3 { margin: 0 0 6px; font-size: 19px; font-weight: 900; line-height: 1.6; }
.bnc-ask p { margin: 0 0 18px; font-size: 14px; line-height: 1.95; color: var(--c-mid); }
.bnc-ask p b { color: var(--c-text); }
.bnc-ask .no { display: block; width: 100%; margin-top: 6px; padding: 10px; border: 0; background: none; color: var(--c-low); font: inherit; font-size: 13.5px; cursor: pointer; }
.bnc-ask .card { will-change: transform; touch-action: pan-x; }
.bnc-ask .bnc-btn.ghost { margin-top: 8px; }
.bnc-ask .grab { display: none; }
.bnc-ask .no:focus-visible, .bnc-ask .bnc-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
/* گوشی: از پایینِ صفحه بالا میاد (جای شست)، با کشیدن به پایین بسته می‌شه */
@media (max-width: 560px) {
  .bnc-ask { place-items: end stretch; padding: 0; }
  .bnc-ask .card { width: 100%; border-radius: 28px 28px 0 0; border-bottom: 0; padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .42s cubic-bezier(.22,1,.36,1); }
  .bnc-ask.on .card { transform: none; }
  .bnc-ask .grab { display: block; width: 42px; height: 5px; margin: 0 auto 14px; border-radius: 99px; background: var(--c-line); }
}
/* دکمه‌ی پرداخت وقتی «برگردم سراغِ پرداخت» زده می‌شه */
.bnc-pulse { animation: bncPulse 1.1s cubic-bezier(.2,.8,.3,1) 2; }
@keyframes bncPulse { 0% { box-shadow: 0 0 0 0 rgba(43,255,198,.55); } 100% { box-shadow: 0 0 0 16px rgba(43,255,198,0); } }

/* ---------- دکمه‌ی شناورِ «پیام‌ها» روی دسکتاپ + نشانِ نخونده روی تب‌بار ---------- */
.bnc-desk {
  position: fixed; left: 24px; bottom: 96px; z-index: 89; display: none; align-items: center; gap: 8px;
  height: 48px; padding: 0 18px 0 14px; border-radius: 24px; border: 1px solid var(--border-mid, rgba(255,255,255,.14));
  background: var(--bg-panel, #1B1535); color: var(--text-hi, #fff); font-family: var(--font-fa, 'Vazirmatn', sans-serif); font-size: 14.5px; font-weight: 800;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); cursor: pointer; transition: transform .2s cubic-bezier(.2,1.4,.4,1);
}
.bnc-desk:hover { transform: translateY(-2px); }
.bnc-desk svg { width: 22px; height: 22px; color: var(--neon-teal, #2BFFC6); }
.bnc-desk .bnc-badge { --c-accent: #2BFFC6; --c-accent-ink: #062A22; }
@media (min-width: 861px) { .bnc-desk.show { display: inline-flex; } }
.bnav-item .bnav-badge {
  position: absolute; top: 2px; left: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #FF4F6E; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px rgba(20,16,36,.95); animation: bncPop .3s cubic-bezier(.2,1.5,.4,1);
}

/* ---------- پروفایلِ تلگرامی داخلِ صفحه‌ی پروفایل ---------- */
.tgp { max-width: 640px; margin: 18px auto 34px; color: var(--c-text); }
.tgp .tg-hero { border-radius: 22px; background: var(--c-panel); margin: 0 0 14px; padding: 26px 16px 20px; border: 1px solid var(--c-line); }
.tgp .tg-hero::before { --hero: rgba(43,255,198,.22); }
.tgp .tg-group { margin: 0 0 12px; border: 1px solid var(--c-line); }
.tgp .tg-note { margin: -4px 14px 16px; }
.tgp-xp { padding: 12px 14px 14px; }
.tgp-xp .l { display: flex; justify-content: space-between; font-size: 13px; color: var(--c-low); margin-bottom: 8px; font-weight: 600; }
.tgp-xp .l b { color: var(--c-text); font-weight: 700; }
.tgp-xp .bar { height: 8px; border-radius: 99px; overflow: hidden; background: var(--c-panel-2); }
.tgp-xp .bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #2BFFC6, #5CE1FF); transition: width .6s cubic-bezier(.2,.8,.2,1); }

@media (prefers-reduced-motion: reduce) {
  .bnc, .bnc-conv, .bnc-list, .bnp, .bnc-note, .bnc-ask .card, .bm.enter .bb, .bnc-pulse { transition: none !important; animation: none !important; }
}

.bnc-badge[hidden], .bnav-badge[hidden], .tg-chip[hidden], .tg-row[hidden], .tg-note[hidden] { display: none !important; }
@media (pointer: coarse) { .bb { -webkit-user-select: none; user-select: none; } .bnc-msgs { touch-action: pan-y; } }
.bnc-setup > svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--c-low); }
.bm.lifted { z-index: 22; }

/* =====================================================================
   v2 — عکسِ پروفایل، واکنش‌ها، ویرایش/حذف، ایموجی، موجِ لمس، اکشن‌شیت، پروفایلِ کاملِ تلگرامی
   ===================================================================== */
.bnc-av { overflow: visible; }
.bnc-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.bns, .bnp, .bnc { overscroll-behavior: none; }

/* موجِ لمس */
.bnc-row, .tg-row, .bnc-ic, .tg-act, .bnc-btn, .bnc-menu button, .bns-item, .bnc-fab, .bnc-send, .tg-radio, .bnc-emo-tabs button { position: relative; overflow: hidden; }
.rpl { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .14; transform: scale(0); animation: rpl .6s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes rpl { to { transform: scale(1); opacity: 0; } }

/* اکشن‌شیت (مثلِ iOS/تلگرام) */
.bns { position: fixed; inset: 0; z-index: 9400; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); background: rgba(0,0,0,0); transition: background .25s; direction: rtl;
  font-family: var(--font-fa, 'Vazirmatn', sans-serif);
  --c-panel: #221C3D; --c-text: #F3F1FF; --c-low: #8E87B5; --c-line: rgba(255,255,255,.08); --c-danger: #FF5C7A; --c-accent: #2BFFC6; }
:root[data-theme="light"] .bns { --c-panel: #FFFFFF; --c-text: #17132A; --c-low: #8E89A8; --c-line: rgba(20,10,60,.08); --c-accent: #0E9F78; }
.bns.on { background: rgba(0,0,0,.42); }
.bns-card, .bns-cancel { width: min(460px, 100%); border-radius: 16px; background: var(--c-panel); color: var(--c-text); transform: translateY(120%); transition: transform .38s cubic-bezier(.2,1,.3,1); overflow: hidden; }
.bns-cancel { border: 0; padding: 16px; font: inherit; font-size: 17px; font-weight: 800; color: var(--c-accent); cursor: pointer; }
.bns.on .bns-card, .bns.on .bns-cancel { transform: none; }
.bns-head { padding: 14px 18px 12px; text-align: center; border-bottom: 1px solid var(--c-line); }
.bns-head b { display: block; font-size: 14px; color: var(--c-low); font-weight: 700; }
.bns-head p { margin: 4px 0 0; font-size: 13px; color: var(--c-low); line-height: 1.8; }
.bns-item { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px; border: 0; background: none; color: var(--c-accent); font: inherit; font-size: 17px; cursor: pointer; }
.bns-item + .bns-item { border-top: 1px solid var(--c-line); }
.bns-item.red { color: var(--c-danger); }
.bns-item.bold { font-weight: 800; }
.bns-item svg { width: 20px; height: 20px; }

/* واکنش‌ها داخلِ حباب */
.brx { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 1px; }
.rx { display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 8px; border-radius: 13px; border: 0; cursor: pointer; font: inherit; font-size: 14px; line-height: 1;
  background: rgba(43,255,198,.14); color: var(--c-text); transition: transform .2s cubic-bezier(.2,1.5,.4,1); }
.bm.in .rx { background: rgba(92,225,255,.14); }
.rx b { font-size: 12px; font-weight: 700; }
.rx.mine { background: var(--c-accent); color: var(--c-accent-ink); }
:root:not([data-theme="light"]) .bm.out .rx.mine { background: #7BFFE0; color: #063A30; }
.rx:active { transform: scale(.88); }
.rx.pop { animation: rxPop .55s cubic-bezier(.2,1.6,.4,1); }
@keyframes rxPop { 0% { transform: scale(.2); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.bm.jumbo .brx { margin-top: 2px; }
.bmeta .ed { font-style: normal; font-size: 11px; margin-left: 3px; opacity: .85; }
.bm.edited .bsp { width: 104px; }
.bm.out.edited .bsp { width: 120px; }

/* نوارِ واکنشِ بالای منوی لمسِ طولانی */
.bnc-rxbar { position: absolute; z-index: 22; display: flex; gap: 2px; padding: 5px 7px; border-radius: 26px; background: var(--c-panel); box-shadow: 0 10px 34px rgba(0,0,0,.4); animation: bncPop .25s cubic-bezier(.2,1.4,.4,1); direction: ltr; }
.bnc-rxbar button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; font-size: 24px; cursor: pointer; animation: rxIn .35s cubic-bezier(.2,1.6,.4,1) backwards; transition: transform .15s; }
.bnc-rxbar button:hover { transform: scale(1.22); }
.bnc-rxbar button:active { transform: scale(.85); }
@keyframes rxIn { from { opacity: 0; transform: scale(.3) translateY(8px); } }

/* حذف: جمع شدن و محو شدن */
.bm.gone { transition: height .25s ease, opacity .2s ease, transform .25s ease; height: 0 !important; opacity: 0; transform: scale(.8); overflow: hidden; }

/* تیکِ «خونده شد» که خودش کشیده می‌شه */
.bmeta .rd.anim path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: tickDraw .4s ease-out forwards; }
.bmeta .rd.anim path + path { animation-delay: .12s; }
@keyframes tickDraw { to { stroke-dashoffset: 0; } }

/* ورود/خروجِ پیام‌ها نرم‌تر و تلگرامی‌تر */
.bm.out.enter .bb { animation: bmSend .34s cubic-bezier(.2,1,.3,1); }
.bm.in.enter .bb { animation: bmRecv .32s cubic-bezier(.2,1,.3,1); }
@keyframes bmSend { from { opacity: .3; transform: translate3d(0, 34px, 0) scale(.86); } }
@keyframes bmRecv { from { opacity: 0; transform: translate3d(-14px, 8px, 0) scale(.94); } }

/* دکمه‌ی ایموجی و پنل */
.bnc-emo-btn { flex: 0 0 auto; width: 40px; height: 44px; border: 0; background: none; color: var(--c-low); display: grid; place-items: center; cursor: pointer; transition: color .15s, transform .2s; }
.bnc-emo-btn:active { transform: scale(.85); }
.bnc-emo-btn svg { width: 24px; height: 24px; }
.bnc-field { padding: 0 2px 0 14px; }
.bnc-send.edit svg { transform: none; }
.bnc-emo { max-width: 760px; margin: 8px auto 0; height: 270px; display: flex; flex-direction: column; border-radius: 14px; background: var(--c-panel-2); overflow: hidden; animation: bncUp .22s ease-out; }
.bnc-emo-tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--c-line); }
.bnc-emo-tabs button { flex: 1; height: 36px; border: 0; border-radius: 10px; background: none; font-size: 20px; cursor: pointer; opacity: .55; }
.bnc-emo-tabs button.on { opacity: 1; background: var(--c-hover); }
.bnc-emo-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); padding: 6px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.bnc-emo-grid button { height: 44px; border: 0; background: none; font-size: 27px; cursor: pointer; border-radius: 10px; transition: transform .12s; }
.bnc-emo-grid button:active { transform: scale(1.3); }
@media (hover: hover) { .bnc-emo-grid button:hover { background: var(--c-hover); } }
.bnc-row .pv.typing { color: var(--c-accent); }

/* برشِ عکس */
.bnp.crop { background: #000; color: #fff; }
.bnp.crop .bnc-bar { background: rgba(0,0,0,.6); border-color: rgba(255,255,255,.08); }
.bnp.crop .bnc-ic { color: #fff; }
.crop-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 16px; }
.crop-box { position: relative; width: min(86vw, 360px); aspect-ratio: 1; overflow: hidden; touch-action: none; cursor: grab; }
.crop-box:active { cursor: grabbing; }
.crop-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.crop-mask { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0,0,0,.6); border: 2px solid rgba(255,255,255,.85); pointer-events: none; }
.crop-zoom { display: flex; align-items: center; gap: 12px; width: min(86vw, 360px); color: rgba(255,255,255,.7); font-size: 18px; }
.crop-zoom input { flex: 1; accent-color: #2BFFC6; }
.bnp.crop .tg-help { color: rgba(255,255,255,.55); }

/* ---------- صفحه‌ی پروفایلِ کامل ---------- */
.tgp-screen { padding-top: 0 !important; }
.tgp { position: relative; padding-bottom: 20px; }
.tgp-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; height: calc(54px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 4px 0;
  margin: 0 -4px 6px; background: transparent; border-bottom: 1px solid transparent; transition: background .25s, border-color .25s; }
.tgp-bar.solid { background: var(--c-bar); border-color: var(--c-line); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); }
.tgp-bar-btn { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; color: var(--c-accent); font: inherit; font-size: 16px; font-weight: 600; padding: 8px 6px; cursor: pointer; }
.tgp-bar-btn svg { width: 24px; height: 24px; }
.tgp-bar-btn.end { margin-inline-start: auto; }
.tgp-bar-mid { position: absolute; left: 50%; transform: translateX(-50%) translateY(6px); display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; max-width: 55%; }
.tgp-bar-mid b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgp-bar.solid .tgp-bar-mid { opacity: 1; transform: translateX(-50%); }
.tgp .tg-hero { background: none; border: 0; padding: 4px 16px 18px; margin: 0; }
.tgp .tg-hero::before { inset: -60% -20% auto; }
.tgp-av-btn { position: relative; display: block; margin: 0 auto 12px; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; width: 110px; }
.tgp-av-btn .bnc-av { margin: 0; transition: transform .1s linear, opacity .1s linear; will-change: transform; box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.tgp-cam { position: absolute; bottom: 2px; left: 2px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent); color: var(--c-accent-ink); box-shadow: 0 0 0 3px var(--c-bg, #0E0B1A); }
.tgp-cam svg { width: 17px; height: 17px; }
.tgp #tgp-sub .on { color: var(--c-accent); }
.tgp-sec { margin: 18px 14px 7px; font-size: 13px; font-weight: 600; color: var(--c-low); }
.tgp-sec small { font-weight: 500; margin-inline-start: 6px; }
.tgp .tg-group .tg-row.info .tv { font-weight: 600; color: var(--c-text); }
.tgp-code { direction: ltr; font-family: var(--font-code, monospace); font-weight: 800; letter-spacing: 2px; color: var(--c-gold); font-size: 15px; }
.tgp-mini { border: 0; border-radius: 14px; padding: 6px 12px; background: rgba(43,255,198,.14); color: var(--c-accent); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.tgp-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.tgp-badge { text-align: center; padding: 12px 4px 10px; border-radius: 12px; background: var(--c-panel-2); opacity: .38; filter: grayscale(1); transition: opacity .3s, filter .3s, transform .3s; }
.tgp-badge.got { opacity: 1; filter: none; }
.tgp-badge span { display: block; font-size: 30px; line-height: 1.2; }
.tgp-badge.got span { animation: bncFloat 3.4s ease-in-out infinite; }
.tgp-badge small { display: block; font-size: 12px; margin-top: 4px; color: var(--c-mid); font-weight: 600; }
.tgp-foot { text-align: center; margin: 22px 0 6px; font-size: 12.5px; color: var(--c-low); }
.tgp .tg-note b { color: var(--c-mid); }
/* کارتِ اشتراک (از app.js) داخلِ پروفایلِ تلگرامی */
.tgp #bn-profile-plan { margin: 0 0 12px; border-radius: 14px; border: 1px solid var(--c-line) !important; background: var(--c-panel) !important; box-shadow: none !important; }
@media (min-width: 700px) { .tgp-badges { grid-template-columns: repeat(6, 1fr); } }
.tgp .tg-hero { overflow: visible; } .tgp .tg-hero::before { inset: -30% 0 auto; height: 120%; opacity: .55; }
/* نوارِ بالای پروفایل: ثابت روی صفحه (sticky به‌خاطرِ overflowِ والد کار نمی‌کرد) */
.tgp { padding-top: calc(52px + env(safe-area-inset-top)); }
.tgp-bar { position: fixed; top: 0; left: 0; right: 0; margin: 0; padding: env(safe-area-inset-top) max(10px, calc(50% - 330px)) 0; }
.brx { align-items: center; }
.brx .bsp { flex: 0 0 auto; height: 20px; }