* { box-sizing: border-box; }
        @font-face {
            font-family: 'Vazirmatn';
            src: url('/static/fonts/Vazirmatn-Regular.woff2') format('woff2');
            font-weight: 400;
            font-display: swap;
        }
        :root, :root.theme-dark {
            --bg:           #0e1621;
            --bg-elev:      #17212b;
            --bg-elev-2:    #1f2c39;
            --border:       #1f2c39;
            --text:         #e6edf3;
            --text-muted:   #708499;
            --text-dim:     #5a6b7c;
            --accent:       #5288c1;
            --accent-soft:  #2b5278;
            --bubble-out:   #2b5278;
            --bubble-in:    #182533;
            --green:        #4fae4e;
            --red:          #ff7b72;
            --yellow:       #d29922;
            --shadow:       0 4px 16px rgba(0,0,0,0.4);
        }
        :root.theme-light {
            --bg:           #f5f5f7;
            --bg-elev:      #ffffff;
            --bg-elev-2:    #ebebef;
            --border:       #e1e4e8;
            --text:         #1d1d1f;
            --text-muted:   #6e6e73;
            --text-dim:     #a1a1a6;
            --accent:       #0a84ff;
            --accent-soft:  #d6e9ff;
            --bubble-out:   #0a84ff;
            --bubble-in:    #e8e8ed;
            --green:        #34c759;
            --red:          #ff3b30;
            --yellow:       #ff9f0a;
            --shadow:       0 2px 8px rgba(0,0,0,0.08);
        }
        :root.theme-light .msg.in { color: var(--text); }
        :root.theme-light .msg.in .meta { color: var(--text-muted); }
        :root.theme-light .ph-avatar-actions button { border-color: var(--bg); }
        :root.theme-light ::-webkit-scrollbar-thumb { background: #c5c5c8; }
        html, body {
            height: 100%; margin: 0; padding: 0;
            font-family: Vazirmatn, Tahoma, sans-serif;
            background: var(--bg); color: var(--text);
            font-size: 14px;
            -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
            overscroll-behavior: none;
            /* صفحه را کاملاً قفل می کنیم: با position:fixed هیچ اسکرولِ
               «ویوپورتِ چیدمان» وجود ندارد، پس iOS هنگامِ بازشدنِ کیبورد
               صفحه را نمی لغزانَد (offsetTop صفر می مانَد) و کامپوزر هرگز
               از کیبورد جدا/کشیده نمی شود. تنها اسکرول، داخلِ لیستِ پیام هاست. */
            position: fixed; inset: 0; width: 100%;
            overflow: hidden;
        }

        /* ─── Mobile/Safari viewport plumbing ─────────────────────────────
           --app-height: ارتفاعِ واقعیِ دیداری (نه 100vh که در سافاری موبایل
           نوارِ آدرس را هم می شمارد). با JS از visualViewport پر می شود؛
           اگر JS نبود، dvh و در نهایت vh به عنوان fallback. */
        :root {
            --app-height: 100vh;
            --safe-top:    env(safe-area-inset-top, 0px);
            --safe-bottom: env(safe-area-inset-bottom, 0px);
            --safe-left:   env(safe-area-inset-left, 0px);
            --safe-right:  env(safe-area-inset-right, 0px);
            /* ارتفاع = ۵۶ + ناحیهٔ امن، تا پس زمینهٔ نوار تا لبهٔ فیزیکیِ پایین (زیرِ هوم ایندیکیتور) برسد و «بچسبد».
               ولی padding-bottomِ safe-area را روی خودِ نوار نمی گذاریم؛ پس آیکون ها وسط چین می مانند (نه پرت شده به بالا). */
            --nav-h: calc(56px + var(--safe-bottom));
        }
        @supports (height: 100dvh) {
            :root { --app-height: 100dvh; }
        }
        /* اسکرولِ نرمِ iOS + جلوگیری از کشیده شدنِ اسکرول به کلِ صفحه */
        .contacts, .messages, .ph-body, .cp-body, .sheet-list, .log,
        #storyTab, #miniAppTab, #spacesTab, .vs-panel {
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }

        button { font: inherit; cursor: pointer; }
        input, textarea { font: inherit; }
        /* اسکرول بار مخفی — اسکرول با انگشت/چرخ همچنان کار می کند (به خواستِ کاربر) */
        ::-webkit-scrollbar { width: 0; height: 0; display: none; }
        * { scrollbar-width: none; -ms-overflow-style: none; }

        /* ─── Login screen ───────────────────────────────────────────── */
        .login-wrap {
            /* ارتفاع = ناحیه ی دیداری (--app-height با کیبورد کوچک می شود، عینِ adjustResizeِ اندروید)،
               تا کارت با بازشدنِ کیبورد بالای آن جمع شود و دکمه ی «ارسال کد تایید» همیشه دیده/اسکرول شود. */
            position: fixed; top: 0; left: 0; right: 0;
            height: var(--app-height, 100%);
            display: flex; align-items: flex-start; justify-content: center;
            overflow-y: auto; -webkit-overflow-scrolling: touch;
            padding: calc(14px + var(--safe-top)) 16px calc(14px + var(--safe-bottom));
        }
        .login {
            background: var(--bg-elev);
            border: 1px solid var(--border);
            border-radius: 10px; padding: 20px 22px;
            width: 380px; max-width: 92vw;
            /* وسط چینِ اسکرول امن: جا که هست وسط می ماند، بلندتر از دیدرس که شد از بالا اسکرول می شود (کلیپ نمی شود) */
            margin: auto;
        }
        .login h1 { margin: 0 0 6px; font-size: 18px; }
        .login p  { margin: 0 0 18px; color: var(--text-muted); font-size: 13px; }
        .login label {
            display: block; font-size: 13px; color: var(--text-muted);
            margin-bottom: 6px;
        }
        .login input {
            width: 100%; padding: 10px 12px;
            background: var(--bg); color: var(--text);
            border: 1px solid var(--border); border-radius: 6px;
            direction: ltr; text-align: left;
        }
        .login input:focus { border-color: var(--accent); outline: none; }
        /* ─── intl-tel-input: تطبیقِ کاملِ تمِ تیره + RTL (زیبا سازیِ دراپ داونِ کشور) ─── */
        .login .iti { width: 100%; direction: ltr; }
        .login .iti__tel-input { width: 100%; }
        /* متغیرهای خودِ کتابخانه را یک جا تم می دهیم */
        .iti {
            --iti-hover-color: rgba(255,255,255,.06);
            --iti-border-color: var(--border);
            --iti-country-selector-bg: transparent;
            --iti-icon-color: var(--text-muted);
        }
        .iti__selected-dial-code { color: var(--text-muted); }
        /* دراپ داون به body ضمیمه می شود، پس بدونِ .login تم می دهیم */
        .iti__dropdown-content {
            background: var(--bg-elev); color: var(--text);
            border: 1px solid var(--border); border-radius: 10px;
            box-shadow: 0 12px 32px rgba(0,0,0,.45); overflow: hidden;
        }
        .iti__search-input {
            background: var(--bg) !important; color: var(--text);
            border: 0 !important; border-bottom: 1px solid var(--border) !important;
            padding-top: 12px; padding-bottom: 12px; font-size: 14px;
        }
        .iti__search-input::placeholder { color: var(--text-dim); }
        .iti__country-list { background: var(--bg-elev); max-height: 320px; }
        /* ردیفِ هر کشور: پرچم | نام (کش) | کدِ کشور — جمع وجور و خوانا */
        .iti__country { color: var(--text); padding: 9px 12px; font-size: 14px; line-height: 1.5; }
        .iti__country-name { flex-grow: 1; }
        .iti__country .iti__dial-code { color: var(--text-muted); font-variant-numeric: tabular-nums; }
        /* ردیفِ انتخاب شده/هاور: پس زمینهٔ اکسنت + همهٔ متن ها سفیدِ خوانا (نه محو) */
        .iti__country.iti__highlight,
        .iti__country.iti__highlight .iti__country-name,
        .iti__country.iti__highlight .iti__dial-code { background: var(--accent); color: #fff; }
        /* autofillِ مرورگر پس زمینهٔ فیلد را سفید/زرد می کند و با تمِ تیره ناهم خوان می شود (مثلاً موقعِ
           پُر کردنِ رمزِ ذخیره شده). با box-shadowِ inset پوششش می دهیم تا فیلدِ پُرشده هم تیره و هم خونِ
           سیستم بماند؛ transitionِ بلند هم فلشِ زردِ لحظه ایِ اول را حذف می کند. */
        .login input:-webkit-autofill,
        .login input:-webkit-autofill:hover,
        .login input:-webkit-autofill:focus,
        .login input:-webkit-autofill:active {
            -webkit-text-fill-color: var(--text);
            -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
            box-shadow: 0 0 0 1000px var(--bg) inset;
            caret-color: var(--text);
            transition: background-color 9999s ease-out 0s;
        }
        /* نامِ کاربرِ ثبت نام شده قفل/read-only (عینِ اندروید): کم رنگ تر + قفلِ کوچک، یعنی «شناسایی شدی» */
        .login input.locked { opacity: .8; cursor: default; background: var(--bg-elev); }
        .login input.locked:focus { border-color: var(--border); }
        .login button.primary {
            width: 100%; margin-top: 14px;
            background: var(--accent); color: white; border: 0;
            border-radius: 6px; padding: 10px;
        }
        .login button.primary:hover { background: #6fa0d5; }
        .login .err {
            margin-top: 10px; color: var(--red); font-size: 13px; min-height: 18px;
        }
        .login .ok {
            margin-top: 10px; color: var(--green); font-size: 13px; min-height: 18px;
        }
        .login .step { display: none; }
        .login .step.show { display: block; }
        .login .back {
            background: transparent; color: var(--text-muted);
            border: 0; font-size: 13px; padding: 4px 0;
            cursor: pointer; margin-bottom: 8px;
        }
        .login .back:hover { color: var(--text); }
        .login .terms {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 6px; padding: 12px;
            font-size: 12px; color: var(--text-muted);
            max-height: 140px; overflow-y: auto;
            line-height: 1.7; margin: 12px 0 8px;
        }
        .login .terms strong { color: var(--text); }
        .login .check {
            display: flex; align-items: center; gap: 8px;
            font-size: 13px; color: var(--text); user-select: none;
            cursor: pointer; margin: 6px 0 4px;
        }
        .login .check input[type=checkbox] {
            width: 16px; height: 16px; accent-color: var(--accent);
            margin: 0; cursor: pointer;
        }
        .login .code-input {
            font-size: 22px; letter-spacing: 8px; text-align: center;
            font-family: ui-monospace, monospace;
        }
        .login .resend {
            background: transparent; color: var(--accent);
            border: 0; font-size: 13px; padding: 6px 0;
            cursor: pointer; width: 100%;
        }
        .login .resend:disabled { color: var(--text-dim); cursor: default; }
        .login .mobile-display {
            font-family: ui-monospace, monospace; direction: ltr;
            color: var(--text); font-weight: 600;
        }
        /* کارت کاربر شناسایی شده در صفحه ی کد */
        .login .user-card {
            display: none;
            align-items: center; gap: 12px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 10px; padding: 12px;
            margin: 14px 0 6px;
        }
        .login .user-card.show { display: flex; }
        .login .user-card .av {
            width: 44px; height: 44px; border-radius: 50%;
            background: var(--accent-soft);
            box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
            background-size: cover; background-position: center;
            display: flex; align-items: center; justify-content: center;
            color: white; font-weight: 600; flex-shrink: 0;
        }
        .login .user-card .nm {
            font-weight: 600; color: var(--text); font-size: 14px;
            line-height: 1.3;
        }
        .login .user-card .hint {
            color: var(--text-muted); font-size: 12px; margin-top: 2px;
        }
        /* برندِ بالای صفحه ی شماره (لوگو + OnpChat) — عینِ اندروید */
        .login .auth-brand { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; transition: margin .2s ease; }
        .login .auth-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
        .login .auth-brand-name { font-size: 20px; font-weight: 700; color: var(--accent); }
        /* چک باکسِ «به خاطرسپاریِ شماره» */
        .login .auth-remember { display: flex; align-items: center; gap: 8px; justify-content: flex-start; font-size: 13px; color: var(--text-dim); margin: 8px 2px 4px; cursor: pointer; }
        .login .auth-remember input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
        /* آواتارِ هویتِ بزرگ روی صفحه ی کد — عینِ اندروید (دایره ی وسط) */
        .login .auth-av {
            width: 90px; height: 90px; border-radius: 50%; margin: 4px auto 18px;
            background: var(--accent-soft, rgba(80,130,200,.18));
            box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
            background-size: cover; background-position: center;
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-weight: 700; font-size: 34px; flex-shrink: 0;
        }
        /* بنرِ صفحه ی لاگین — اسلایدرِ محو شونده + نقطه ها (عینِ اندروید، چرخش هر ۴ ثانیه) */
        .login .auth-banner { position: relative; width: 100%; height: 104px; border-radius: 10px; overflow: hidden; margin-bottom: 12px; background: var(--bg); transition: height .22s ease, margin .22s ease, opacity .22s ease; }
        .login .auth-banner .ab-track { position: absolute; inset: 0; }
        .login .auth-banner .ab-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
        .login .auth-banner .ab-slide.show { opacity: 1; }
        .login .auth-banner .ab-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .login .auth-banner .ab-dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; }
        .login .auth-banner .ab-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); transition: background .2s, transform .2s; }
        .login .auth-banner .ab-dot.on { background: #fff; transform: scale(1.25); }
        /* هنگامِ تایپ (کیبورد بالا) بنرِ تزئینی جمع می شود تا فیلد + دکمه ی «ارسال کد تایید» کامل دیده شوند — بی حذفِ المان */
        .login.kb-typing .auth-banner { height: 0; margin-bottom: 0; opacity: 0; pointer-events: none; }
        .login.kb-typing .auth-brand { margin-bottom: 6px; }
        /* دکمه ی انتخابِ سرور (عینِ اندروید) */
        .login .auth-server { width: 100%; margin-top: 12px; background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 9px; font-size: 13px; cursor: pointer; }
        .login .auth-server:hover { background: #6fa0d5; }
        /* وقتی شماره ی واردشده ادمین تشخیص داده شد، دکمه ی سرور کهربایی می شود (عینِ اندروید F59E0B) */
        .login .auth-server.is-admin { background: #f59e0b; }
        .login .auth-server.is-admin:hover { background: #d98a08; }
        /* تیکِ «ورود با رمز» + فیلدِ رمز با چشمِ نمایش/مخفی (عینِ اندروید) */
        .login .auth-pw-toggle { display: flex; align-items: center; gap: 8px; justify-content: flex-start; font-size: 13px; color: var(--text-dim); margin: 10px 2px 2px; cursor: pointer; }
        .login .auth-pw-toggle input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
        .login .auth-pw-wrap { position: relative; }
        .login .auth-pw-wrap input { width: 100%; padding-right: 66px; box-sizing: border-box; }
        .login .auth-pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 5px; color: var(--accent); font-size: 12px; cursor: pointer; padding: 5px 9px; line-height: 1; }
        .login .auth-pw-eye:hover { background: rgba(255,255,255,.12); }
        /* دیالوگِ انتخابِ سرور */
        .auth-server-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); padding: 16px; }
        .auth-server-modal .asm-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 18px; width: 300px; max-width: 92vw; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
        .auth-server-modal .asm-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 14px; text-align: center; }
        .auth-server-modal .asm-opt { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 11px; font-size: 14px; margin-bottom: 8px; cursor: pointer; }
        .auth-server-modal .asm-opt:hover { border-color: var(--accent); }
        .auth-server-modal .asm-opt.on { border-color: var(--accent); background: var(--accent-soft, rgba(80,130,200,.18)); }
        /* بخشِ سرورهای ادمین — فقط برای شماره ی ادمین (عینِ اندروید) */
        .auth-server-modal .asm-admin { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
        .auth-server-modal .asm-admin-title { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; text-align: right; }
        .auth-server-modal .asm-opt-admin { background: #f59e0b; color: #fff; border-color: #f59e0b; font-size: 13px; }
        .auth-server-modal .asm-opt-admin:hover { border-color: #d98a08; background: #d98a08; }
        .auth-server-modal .asm-opt-admin.on { border-color: #fff; background: #d98a08; }
        .auth-server-modal .asm-cancel { width: 100%; background: transparent; color: var(--text-muted); border: 0; padding: 8px; font-size: 13px; cursor: pointer; margin-top: 2px; }
        /* دکمه ی ورود با QR (عینِ تلگرام) — همون استایلِ توپرِ دکمه ی سرور تا واضح دیده شه */
        .login .auth-qr-btn { width: 100%; margin-top: 8px; background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 9px; font-size: 13px; cursor: pointer; }
        .login .auth-qr-btn:hover { background: #6fa0d5; }
        /* دیالوگِ ورودِ QR */
        .qr-login-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); padding: 16px; }
        .qr-login-modal .qlm-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 20px; width: 300px; max-width: 92vw; box-shadow: 0 20px 60px rgba(0,0,0,.45); text-align: center; }
        .qr-login-modal .qlm-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
        .qr-login-modal .qlm-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
        .qr-login-modal .qlm-qr { display: flex; align-items: center; justify-content: center; min-height: 176px; background: #fff; border-radius: 8px; padding: 8px; margin: 0 auto; width: fit-content; }
        .qr-login-modal .qlm-status { font-size: 13px; color: var(--text-dim); margin-top: 14px; min-height: 18px; }
        .qr-login-modal .qlm-status.err { color: #e05555; }
        .qr-login-modal .qlm-status.ok { color: #2fa84f; }
        .qr-login-modal .qlm-cancel { width: 100%; background: transparent; color: var(--text-muted); border: 0; padding: 8px; font-size: 13px; cursor: pointer; margin-top: 6px; }

        /* 📷 اسکنرِ QRِ ورودِ دستگاهِ دیگر (وب‌کَم) — عینِ اندروید */
        .qr-scan-modal { position: fixed; inset: 0; z-index: 2147483600; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.72); padding: 16px; }
        .qr-scan-modal .qsm-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 16px; padding: 20px; width: 340px; max-width: 94vw; box-shadow: 0 24px 70px rgba(0,0,0,.5); text-align: center; }
        .qr-scan-modal .qsm-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
        .qr-scan-modal .qsm-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; line-height: 1.6; }
        .qr-scan-modal .qsm-video-wrap { position: relative; width: 260px; height: 260px; max-width: 78vw; max-height: 78vw; margin: 0 auto; border-radius: 12px; overflow: hidden; background: #000; }
        .qr-scan-modal .qsm-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scaleX(-1); }
        .qr-scan-modal .qsm-frame { position: absolute; inset: 22px; border: 2px solid rgba(255,255,255,.9); border-radius: 10px; box-shadow: 0 0 0 2000px rgba(0,0,0,.28); pointer-events: none; }
        .qr-scan-modal .qsm-status { font-size: 13px; color: var(--text-dim); margin-top: 14px; min-height: 18px; }
        .qr-scan-modal .qsm-status.err { color: #e05555; }
        .qr-scan-modal .qsm-status.ok { color: #2fa84f; }
        .qr-scan-modal .qsm-cancel { width: 100%; background: transparent; color: var(--text-muted); border: 0; padding: 10px; font-size: 13px; cursor: pointer; margin-top: 8px; }
        .qr-scan-modal .qsm-cancel:hover { color: var(--text); }

        /* ─── Main app layout ────────────────────────────────────────── */
        .app {
            display: grid;
            grid-template-columns: clamp(280px, 28vw, 420px) minmax(0, 1fr);
            grid-template-rows: minmax(0, 1fr);
            grid-template-areas: "side pane";
            height: var(--app-height);
            min-width: 0;
        }
        .app > * { min-width: 0; }
        .app > .sidebar { grid-area: side; }
        .app > .pane    { grid-area: pane; }
        /* نماهای تمام صفحه را با position:fixed روی ویوپورت میخ می کنیم.
           چون صفحه (html/body) قفل است و اسکرول ندارد، top همیشه 0 است؛
           فقط ارتفاع (--app-height = visualViewport.height) با JS تنظیم
           می شود تا با بازشدنِ کیبورد کوچک شود و کامپوزر بچسبد بالای کیبورد.
           در iOS نه dvh و نه interactive-widget کیبورد را حساب نمی کنند. */
        .app, #tabPlaceholder, #storyTab, #spacesTab, #miniAppTab, #callsTab, #miniAppView {
            position: fixed; top: var(--head-h, 0px); left: 0; right: 0;
        }
        @media (max-width: 900px) {
            .app {
                grid-template-columns: 1fr;
                grid-template-areas: "side";
            }
            .app.show-chat { grid-template-areas: "pane"; }
            .app.show-chat .sidebar { display: none; }
            .app:not(.show-chat) .pane { display: none; }
            .sb-head {                     /* روی موبایل/PWA: باکس نه — نوارِ تختِ تمام عرض و چسبیده به نوار وضعیت */
                margin: 0;
                border: 0; border-bottom: 1px solid var(--border);
                border-radius: 0; box-shadow: none;
                padding: calc(10px + var(--safe-top)) 14px 10px;
            }
        }

        /* ─── Bottom navigation (مثلِ اندروید) ───────────────────────── */
        #bottomNav { display: none; }
        body.has-nav #bottomNav {
            display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
            height: var(--nav-h);   /* صاف چسبیده به کف؛ بدونِ padding-bottomِ safe-area که پایین خالی می گذاشت */
            background: var(--bg-elev); border-top: 1px solid var(--border);
            align-items: stretch; justify-content: space-around;
        }
        body.has-nav .app, body.has-nav #tabPlaceholder,
        body.has-nav #storyTab, body.has-nav #miniAppTab, body.has-nav #spacesTab,
        body.has-nav #callsTab, body.has-nav #miniAppView {
            height: calc(var(--app-height) - var(--nav-h) - var(--head-h, 0px));
        }
        #bottomNav button {
            flex: 1; background: none; border: 0; color: var(--text-dim); cursor: pointer;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 2px; font-size: 11px; padding: 5px 0; position: relative;
        }
        #bottomNav button.active { color: var(--accent); }
        #bottomNav button svg { width: 22px; height: 22px; }
        #bottomNav .nav-badge {
            position: absolute; top: 4px; left: 50%; margin-inline-start: 4px;
            background: var(--accent); color: #fff; font-size: 9px; min-width: 16px; height: 16px;
            border-radius: 8px; display: none; align-items: center; justify-content: center; padding: 0 3px;
        }
        #tabPlaceholder {
            display: none; flex-direction: column; align-items: center; justify-content: center;
            gap: 12px; color: var(--text-muted); text-align: center;
            padding: calc(24px + var(--safe-top)) 24px 24px;
        }
        #spacesTab { display: none; flex-direction: column; overflow-y: auto; padding-top: var(--safe-top); }
        #tabPlaceholder .ph-icon { font-size: 46px; opacity: .5; }
        /* ─── تبِ تماس ها (Call Log — مو به مو عینِ اندروید CallLogTab) ───── */
        #callsTab { display: none; flex-direction: column; overflow: hidden; padding-top: var(--safe-top); }
        #callsTab .cl-head { padding: 16px; font-size: 20px; font-weight: 700; color: var(--text); flex-shrink: 0; }
        #callsTab .cl-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
        #callsTab .cl-empty { height: 70%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--text-muted); }
        #callsTab .cl-empty .cl-empty-ic { font-size: 56px; opacity: .35; }
        .cl-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--border); }
        .cl-row:active { background: var(--bg-elev); }
        .cl-av { width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 20px; }
        .cl-mid { flex: 1; min-width: 0; }
        .cl-name { font-weight: 700; font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .cl-name.missed { color: #E53935; }
        .cl-sub { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 13px; color: var(--text-muted); }
        .cl-sub .cl-dir { width: 16px; height: 16px; flex-shrink: 0; }
        .cl-sub .cl-vid { width: 14px; height: 14px; flex-shrink: 0; opacity: .7; }
        .cl-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
        .cl-time { font-size: 12px; color: var(--text-muted); }
        .cl-callbtn { color: var(--accent); background: none; border: 0; cursor: pointer; padding: 0; display: flex; }
        .cl-callbtn svg { width: 22px; height: 22px; }
        /* ─── نمای مینی اپ داخلِ اپ (iframe) ───────────────────────────────── */
        #miniAppView { display: none; flex-direction: column; background: var(--bg); z-index: 55; }
        #miniAppView .mav-head {
            display: flex; align-items: center; gap: 8px; flex-shrink: 0;
            padding: calc(7px + var(--safe-top)) 8px 7px; min-height: 46px;
            background: var(--bg-elev); border-bottom: 1px solid var(--border);
        }
        #miniAppView .mav-back {
            display: flex; align-items: center; gap: 3px; background: none; border: 0;
            color: var(--accent); font-size: 15px; font-weight: 600; cursor: pointer; padding: 6px 6px;
        }
        #miniAppView .mav-back svg { width: 20px; height: 20px; }
        #miniAppView .mav-title {
            flex: 1; min-width: 0; font-size: 16px; font-weight: 700; color: var(--text);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        #miniAppView iframe { flex: 1; width: 100%; border: 0; background: var(--bg); }
        /* نوارِ پایین همیشه نمایش داده می شود — حتی در نمای باریک وقتی چت باز است (طبق خواسته ی کاربر).
           قانونِ مخفی کردنِ نوار و فول هایت کردنِ اپ برداشته شد؛ ارتفاعِ اپ همان
           calc(var(--app-height) - var(--nav-h)) از «body.has-nav .app» می ماند تا کامپوزر روی نوار نیفتد. */

        /* ─── Sidebar ────────────────────────────────────────────────── */
        .sidebar {
            background: var(--bg-elev);
            border-left: 1px solid var(--border);
            display: flex; flex-direction: column;
            min-width: 0; min-height: 0;
        }
        body:not(.has-nav) .sb-head { display: none; }   /* روی صفحهٔ ورود هدر نباشد */
        .sb-head {
            display: flex; align-items: center; gap: 10px;
            position: fixed; top: 0; left: 0; right: 0; z-index: 60;  /* هدرِ ثابتِ سراسری روی همهٔ تب ها */
            /* یک باکسِ مجزا: فاصله از بالا/دوطرف/پایین + پس زمینهٔ اله وِیتد + گوشهٔ گرد + سایه
               تا چسبیده به نوارِ بالا دیده نشود. (وقتی از سایدبار بیرون آمد پس زمینه اش را از دست داد.) */
            margin: calc(12px + var(--safe-top)) 12px 12px;
            padding: 12px 16px;
            background: var(--bg-elev);
            border: 1px solid var(--border);
            border-radius: 16px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, .22);
        }
        .sb-head .me { min-width: 0; }                          /* دیگر کشیده نشود؛ نام+شماره کنارِ آواتار جمع بمانند */
        .sb-head .me .nm { font-weight: 600; line-height: 1.2; }
        .sb-head .me .mb { color: var(--text-muted); font-size: 12px; direction: ltr; text-align: right; }
        .sb-head .theme-btn { margin-inline-start: auto; }      /* تمِ خورشید برود گوشهٔ چپ؛ بقیه راست جمع شوند */
        .sb-head .conn {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: 12px; color: var(--text-muted);
        }
        /* وضعیت اتصال خود کاربر = حلقه دور آواتار خودش (مثل بقیه ی کاربرها) */
        /* در حال اتصال = نارنجیِ پررنگ + هاله، مثلِ سبز */
        #meAvatar.conn-connecting {
            box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px #ff9100, 0 0 6px 0 #ff9100;
            animation: pulse 1s infinite;
        }
        /* آنلاین = حلقه ی سبزِ پررنگ و روشن + هاله ی سبز تا واضح دیده شود */
        #meAvatar.conn-connected {
            box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px #00e676, 0 0 6px 0 #00e676;
        }
        /* خطا/قطع = قرمزِ نازک تر و بی هاله تا کمتر به چشم بزند */
        #meAvatar.conn-error {
            box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--red);
        }
        @keyframes pulse { 50% { opacity: 0.6; } }

        .signout {
            background: transparent; color: var(--text-muted);
            border: 1px solid var(--border); border-radius: 6px;
            padding: 4px 8px; font-size: 12px;
        }
        .signout:hover { color: var(--text); border-color: var(--text-muted); }

        .theme-btn {
            background: var(--bg-elev-2); color: var(--text-muted);
            border: 1px solid var(--border); border-radius: 50%;
            width: 32px; height: 32px;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .theme-btn:hover { color: var(--text); border-color: var(--text-muted); }
        .theme-btn svg { width: 16px; height: 16px; }
        :root.theme-light .theme-btn .moon { display: none; }
        :root.theme-dark  .theme-btn .sun  { display: none; }
        /* دکمه ی تم روی صفحه ی ورود — چون هدرِ اپ (شاملِ theme-btnِ اصلی) قبلِ لاگین مخفی است. */
        .auth-theme-btn {
            position: fixed; top: calc(14px + var(--safe-top)); left: 16px; z-index: 5;
            background: var(--bg-elev);
        }

        .sb-search {
            padding: 8px 12px; border-bottom: 1px solid var(--border);
        }
        .sb-search input {
            width: 100%; padding: 8px 12px;
            background: var(--bg); color: var(--text);
            border: 1px solid var(--border); border-radius: 18px;
            outline: none;
        }
        .sb-search input:focus { border-color: var(--accent); }

        .contacts {
            flex: 1; overflow-y: auto; min-height: 0;
        }
        .contact {
            display: flex; align-items: center; gap: 12px;
            padding: 10px 14px; cursor: pointer;
            /* جداکننده هم اندازهٔ .ch-row (لیستِ کانال ها) — محو و یک دست، نه پررنگ */
            border-bottom: 1px solid rgba(125,125,125,.08);
            transition: background 0.12s;
        }
        .contact:hover { background: var(--bg-elev-2); }
        .contact.active { background: var(--accent); }
        /* ⋮ دکمه‌ی اکشنِ سریع (پین/بی‌صدا) — فقط رو دستگاه‌هایی که موس/هاور واقعی دارند نشان داده می‌شود؛
           رو موبایل/تاچ اصلاً رندر نمی‌شود (نگه‌داشتنِ ردیف/long-press همان کار را می‌کند، جای اضافه نگیرد). */
        .contact-menu-btn { display: none; }
        @media (hover: hover) and (pointer: fine) {
            .contact-menu-btn {
                display: flex; align-items: center; justify-content: center;
                width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; font-size: 18px; line-height: 1;
                background: transparent; border: 0; color: var(--text-dim); cursor: pointer;
                opacity: 0; transition: opacity .12s, background .12s; -webkit-tap-highlight-color: transparent;
            }
            .contact:hover .contact-menu-btn { opacity: 1; }
            .contact-menu-btn:hover { background: rgba(125,125,125,.2); color: var(--text); }
            .contact.active .contact-menu-btn { color: rgba(255,255,255,.85); }
            .contact.active .contact-menu-btn:hover { background: rgba(255,255,255,.2); color: #fff; }
        }
        /* لانگ پرس برای «حذفِ مخاطب» (فقط تویِ شیتِ «گفتگوی جدید») نباید با انتخابِ متن/منویِ
           بلندمدتِ خودِ مرورگر تداخل کند — عینِ رفتارِ .messages .msg برای منویِ پیام. */
        .sheet-list .contact { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
        .contact.active .c-name,
        .contact.active .c-last,
        .contact.active .c-time { color: white; }
        .contact.active .c-last { color: rgba(255,255,255,0.85); }

        .avatar {
            width: 44px; height: 44px; border-radius: 50%;
            background: linear-gradient(135deg, #4a9c5a, #2e7a3e);
            display: flex; align-items: center; justify-content: center;
            color: white; font-weight: 600; font-size: 17px;
            flex-shrink: 0; position: relative;
            background-size: cover; background-position: center;
        }
        /* فقط کاربر آنلاین حلقه ی سبز دور آواتار داره (هم رنگِ حلقه ی خودِ کاربر) */
        .avatar.online {
            box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px #00e676;
        }
        .contact.active .avatar.online {
            box-shadow: 0 0 0 2px #00e676, 0 0 0 4px white;
        }
        /* بَجِ نوعِ گفتگو روی آواتارِ لیست — مو به مو اندروید (دایره ی آبیِ #1565C0، آیکنِ سفید، گوشه ی پایین -end) */
        .type-badge {
            position: absolute; bottom: -1px; inset-inline-end: -1px;
            width: 17px; height: 17px; border-radius: 50%;
            background: #1565c0; border: 1.5px solid var(--bg);
            display: flex; align-items: center; justify-content: center;
            color: #fff; pointer-events: none; box-sizing: border-box;
        }
        .type-badge svg { width: 11px; height: 11px; display: block; }
        /* نشانگرِ سرورِ داخلی روی آواتارِ هدر — مو به مو اندروید (📶 در دایرهٔ کهربایی #F59E0B، گوشهٔ پایین-start) */
        .me-av-wrap { position: relative; flex: 0 0 auto; line-height: 0; }
        .me-av-wrap .lan-badge {
            position: absolute; bottom: -2px; inset-inline-start: -2px;
            width: 18px; height: 18px; border-radius: 50%;
            background: #f59e0b; border: 2px solid var(--bg-elev);
            display: flex; align-items: center; justify-content: center;
            font-size: 10px; line-height: 1; pointer-events: none; box-sizing: border-box;
        }

        .c-body { flex: 1; min-width: 0; }
        /* نکته: justify-content:space-between با ۲ فرزند (نام/زمان) خوب بود، ولی با اضافه‌شدنِ
           c-flags (پین/بی‌صدا) به‌عنوانِ فرزندِ سوم، فاصله‌ها بینِ هر جفت پخش می‌شد و آیکون وسطِ ردیف
           شناور می‌ماند. راه‌حل: نام flex-grow بگیرد و بقیه (flags/زمان/بَج) طبیعی ته بچسبند. */
        .c-row1 { display: flex; align-items: center; }
        .c-name { flex: 1 1 auto; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .c-time { color: var(--text-dim); font-size: 11px; flex-shrink: 0; margin-right: 8px; }
        /* 📌🔕 آیکون های پین/بی‌صدا کنارِ زمان (مو به مو اندروید: پین = رنگِ اصلی، بی‌صدا = طوسی) */
        .c-flags { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; margin-inline-start: 6px; }
        .c-flags svg { width: 13px; height: 13px; }
        .c-flags .cf-pin { color: var(--accent); }
        .c-flags .cf-mute { color: var(--text-dim); }
        .contact.active .c-flags .cf-pin { color: #fff; }
        .contact.active .c-flags .cf-mute { color: rgba(255,255,255,.75); }
        /* 📌🔕 پاپ‌اوورِ اکشن‌های سریع (نگه‌داشتنِ ردیفِ لیست) */
        .chat-quick-pop {
            display: none; position: fixed; z-index: 2147483000;
            background: var(--bg-elev-2, var(--bg-elev)); border: 1px solid var(--border);
            border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.4); padding: 6px; min-width: 190px;
        }
        .chat-quick-pop.show { display: block; }
        .chat-quick-pop .cqp-btn {
            display: flex; align-items: center; gap: 12px; width: 100%;
            background: none; border: 0; color: var(--text); font: inherit; font-size: 14px;
            padding: 11px 14px; border-radius: 10px; cursor: pointer; text-align: start;
        }
        .chat-quick-pop .cqp-btn:hover { background: var(--bg-elev); }
        .chat-quick-pop .cqp-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
        .c-last {
            color: var(--text-muted); font-size: 13px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            margin-top: 2px;
        }
        .c-badge {
            display: none; background: var(--accent); color: white;
            border-radius: 10px; padding: 1px 7px;
            font-size: 11px; min-width: 20px; text-align: center;
            margin-right: 8px;
        }
        .c-badge.show { display: inline-block; }

        .empty-list {
            padding: 28px 14px; text-align: center;
            color: var(--text-muted); font-size: 13px;
        }
        .empty-start-btn {
            margin: 16px auto 0; display: inline-flex; align-items: center; gap: 7px;
            background: var(--accent); color: #fff; border: 0; border-radius: 22px;
            padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer;
            box-shadow: var(--shadow); transition: transform .12s, background .12s;
        }
        .empty-start-btn:hover { transform: scale(1.04); background: #6fa0d5; }
        .empty-start-btn svg { width: 18px; height: 18px; }

        /* ─── Chat pane ──────────────────────────────────────────────── */
        .pane {
            display: flex; flex-direction: column;
            min-width: 0; min-height: 0; background: var(--bg);
            position: relative;   /* لنگرِ دکمهٔ شناورِ «پرش به آخرین پیام» */
        }
        /* 🔽 دکمهٔ گردِ پرش به ته — مو به مو اندروید (46dp، دایره، فلشِ پایین، بَجِ نخوانده بالای آن).
           در RTL سمتِ «انتها» = چپ (Alignment.BottomEnd اندروید). bottom را JS بالای کامپوزر می گذارد. */
        .chat-scroll-fab {
            position: absolute; left: 16px; bottom: 84px; z-index: 20;
            width: 46px; height: 46px; border-radius: 50%;
            display: none; align-items: center; justify-content: center;
            background: var(--bg-elev); color: var(--accent);
            border: 1px solid var(--border);
            box-shadow: 0 2px 10px rgba(0,0,0,.28);
            cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent;
        }
        .chat-scroll-fab:hover { background: var(--bg-elev-2); }
        .chat-scroll-fab svg { width: 24px; height: 24px; display: block; }
        .chat-scroll-fab .csf-badge {
            position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
            min-width: 20px; height: 20px; box-sizing: border-box;
            padding: 0 5px; border-radius: 999px;
            background: var(--accent); color: #fff;
            font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
            white-space: nowrap;
        }
        .pane-empty {
            flex: 1; display: flex; align-items: center; justify-content: center;
            color: var(--text-muted); font-size: 15px;
        }
        .pane-head {
            display: none;
            /* ردیفِ افقی مثلِ اپِ اندروید: [برگشت] [آواتار] [نام/وضعیتِ کشیده تا انتها] [منو]
               — نه ستونِ وسط چین که آواتار/نام را وسط می انداخت و دکمه ی برگشت را به لبه پرت می کرد.
               برگشت/منو/تماس همگی position:absolute اند؛ این paddingها جا برایشان رزرو می کند. */
            flex-direction: row; align-items: center; justify-content: flex-start;
            gap: 10px;
            padding: calc(10px + var(--safe-top)) 56px 10px 52px; min-height: 64px;
            background: var(--bg-elev);
            border-bottom: 1px solid var(--border);
            position: relative;
        }
        .pane.active .pane-head { display: flex; }
        .pane-head .back {
            display: flex; align-items: center; justify-content: center;
            position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
            background: transparent; color: var(--accent); border: 0;
            width: 40px; height: 40px; border-radius: 50%;
            font-size: 32px; line-height: 1; padding: 0; cursor: pointer;
        }
        .pane-head .back:hover { background: var(--bg-elev-2); }
        @media (max-width: 720px) {
            .pane-head .back { display: flex; }
        }
        .pane-head .avatar {
            width: 44px; height: 44px; font-size: 17px;
            flex: 0 0 auto; margin: 0;
        }
        .pane-head .hd-text { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; min-width: 0; max-width: 100%; }
        .pane-head .nm { font-weight: 600; font-size: 15px; text-align: start; }
        .pane-head .st { color: var(--text-muted); font-size: 12px; margin-top: 1px; text-align: start; }
        /* نام/وضعیتِ بلندِ مخاطب در هدرِ گفتگو روی دسکتاپ هم با … کوتاه شود (نه شکستنِ خط و بهم ریختنِ هدر) */
        .pane-head .nm, .pane-head .st { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .pane-head .menu {
            position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
            background: transparent; color: var(--text-muted); border: 0;
            width: 36px; height: 36px; border-radius: 50%;
            font-size: 22px; line-height: 1; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
        }
        .pane-head .menu:hover {
            background: var(--bg-elev-2); color: var(--text);
        }

        .dropdown {
            position: absolute; top: 56px; left: 12px;
            background: var(--bg-elev);
            border: 1px solid var(--border);
            border-radius: 10px;
            box-shadow: var(--shadow);
            min-width: 200px;
            padding: 4px;
            display: none;
            z-index: 30;
        }
        .dropdown.show {
            display: block;
            animation: ddIn 0.15s ease-out;
        }
        @keyframes ddIn {
            from { transform: translateY(-4px); opacity: 0; }
            to   { transform: translateY(0); opacity: 1; }
        }
        .dropdown button {
            display: flex; align-items: center; gap: 12px;
            width: 100%; padding: 10px 12px;
            background: transparent; border: 0;
            color: var(--text); font: inherit; font-size: 13px;
            border-radius: 6px; cursor: pointer;
            text-align: right;
        }
        .dropdown button:hover { background: var(--bg-elev-2); }
        .dropdown button.danger { color: var(--red); }
        .dropdown button .ic { font-size: 16px; flex-shrink: 0; }
        .dropdown hr {
            border: 0; border-top: 1px solid var(--border);
            margin: 4px 0;
        }

        .msg-search {
            display: none;
            background: var(--bg-elev);
            border-bottom: 1px solid var(--border);
            padding: 8px 12px;
            gap: 8px; align-items: center;
        }
        .msg-search.show { display: flex; }
        .msg-search input {
            flex: 1;
            background: var(--bg); color: var(--text);
            border: 1px solid var(--border); border-radius: 18px;
            padding: 8px 14px; outline: none;
        }
        .msg-search input:focus { border-color: var(--accent); }
        .msg-search .nav {
            color: var(--text-muted); font-size: 12px;
            min-width: 50px; text-align: center;
        }
        .msg-search button {
            background: transparent; color: var(--text-muted); border: 0;
            width: 32px; height: 32px; border-radius: 50%;
            cursor: pointer; font-size: 16px;
        }
        .msg-search button:hover { background: var(--bg-elev-2); color: var(--text); }
        .msg-search button:disabled { opacity: 0.3; cursor: not-allowed; }

        .msg.match-hit { box-shadow: 0 0 0 2px var(--yellow); }
        .msg.match-current {
            box-shadow: 0 0 0 3px var(--accent);
            scroll-margin-top: 80px; scroll-margin-bottom: 80px;
        }
        .msg mark {
            background: var(--yellow); color: #1a1a1a;
            padding: 0 2px; border-radius: 2px;
        }

        .messages {
            flex: 1; overflow-y: auto; min-height: 0;
            padding: 14px 16px;
            /* روی paneِ پهنِ دسکتاپ، ستونِ پیام ها وسط چین و سقفِ خوانا داشته باشد تا
               حباب ها به دو لبه نچسبند و وسط خالی نماند. روی موبایل no-op (min=۱۰۰٪). */
            width: 100%; max-width: min(100%, 760px); margin-inline: auto; box-sizing: border-box;
            display: flex; flex-direction: column; gap: 4px;
            /* پس زمینه ی خودِ این ستونِ ۷۶۰px شفاف است؛ والپیپر روی .pane.active (تمام عرضِ صفحه)
               می نشیند تا کنارهای این ستون هم پر شود و در دسکتاپ ویو هیچ جای خالی نماند. */
        }
        /* والپیپرِ چت روی کلِ paneِ فعال — تمام عرضِ صفحه، نه فقط ستونِ ۷۶۰pxِ پیام ها؛ پس در دسکتاپ ویو
           هر اندازه ای که باشد، هیچ کنارِ خالی نمی مانَد. هدر و composer پس زمینه ی توپُر (bg-elev) دارند و
           رویش را می پوشانند، پس والپیپر فقط در ناحیه ی پیام ها دیده می شود (عینِ واتساپ). کاشیِ تکرارشونده
           با اندازه ی کوچک شده و بدونِ هیچ زومی؛ .pane اسکرول نمی شود پس والپیپر ثابت پشتِ پیام ها می مانَد. */
        .pane.active {
            --chat-bg-fade: 0.50;   /* ۵۰٪ کم رنگ تر */
            /* عکس حالا نسخه ی «آینه ایِ» ۲×۲ و بی درز است؛ عرضِ کاشی ۵۴۰px یعنی هر «تصویرِ اصلی» ۲۷۰px
               (همان تراکمِ قبلی، ~۴ تصویر در عرضِ ۱۰۸۰) ولی این بار لبه ها با بازتاب به هم می خورند و
               هیچ آیکونی سرِ درزِ کاشی بریده نمی شود — پس در صفحه ی بزرگ هم بهم نمی ریزد. */
            --chat-bg-tile: 540px;
            background-image:
                linear-gradient(rgba(14,22,33, var(--chat-bg-fade)), rgba(14,22,33, var(--chat-bg-fade))),
                url(/static/images/chat-bg-dark.webp);
            background-repeat: repeat;
            background-position: top center;
            background-size: var(--chat-bg-tile);
        }
        :root.theme-light .pane.active {
            background-image:
                linear-gradient(rgba(238,241,247, var(--chat-bg-fade)), rgba(238,241,247, var(--chat-bg-fade))),
                url(/static/images/chat-bg-light.webp);
        }
        /* موبایل ویو (نمای باریک/تک ستونه): عکسِ تکیِ اصلی (نه آینه ای)، کاشیِ بزرگ در عرضِ ۷۵٪
           (~۱.۳ کاشی؛ ۵۰٪ بزرگ تر از حالتِ ۵۰٪) تا آیکون ها درشت و خوانا باشند. دسکتاپ همان کاشیِ آینه ایِ ۵۴۰px
           می مانَد و ثابت. این حالتِ درصدی فقط روی «دستگاهِ لمسیِ واقعی» (گوشی) فعال می شود، نه با
           باریک کردنِ پنجره ی دسکتاپ — تا اندازه ی آیکون ها روی دسکتاپ در هر عرضی ثابت بماند (کاشیِ ۵۴۰pxِ ثابت).
           fallback: عرضِ ≤۵۰۰px برای گوشی هایی که hover/pointer را غلط گزارش می کنند. */
        @media (hover: none) and (pointer: coarse), (max-width: 500px) {
            .pane.active {
                --chat-bg-tile: 75%;
                background-image:
                    linear-gradient(rgba(14,22,33, var(--chat-bg-fade)), rgba(14,22,33, var(--chat-bg-fade))),
                    url(/static/images/chat-bg-dark-m.webp);
            }
            :root.theme-light .pane.active {
                background-image:
                    linear-gradient(rgba(238,241,247, var(--chat-bg-fade)), rgba(238,241,247, var(--chat-bg-fade))),
                    url(/static/images/chat-bg-light-m.webp);
            }
        }
        /* تردِ کوتاه به پایین بچسبد (مثلِ تلگرام) بدونِ بریدنِ بالای تردِ بلند — تکنیکِ امنِ spacerِ flex */
        .messages::before { content: ""; margin-top: auto; }
        .pane.active .messages { display: flex; }
        .pane:not(.active) .messages,
        .pane:not(.active) .composer { display: none; }
        .pane:not(.active) .media-picker,
        .pane.channel-view .media-picker { display: none !important; }

        .day-sep {
            align-self: center;
            color: var(--text); font-size: 11px;
            background: rgba(0,0,0,.30);
            padding: 3px 12px;
            border-radius: 12px;
            margin: 8px 0 4px;
            font-weight: 600;
        }
        :root.theme-light .day-sep { background: rgba(0,0,0,.08); color: var(--text-muted); }

        .msg {
            max-width: min(65%, 560px);
            padding: 8px 14px;
            border-radius: 18px;
            line-height: 1.5;
            word-break: break-word;
            overflow-wrap: anywhere;   /* توکن های بلندِ بی فاصله (کارت/کد/لینک) داخلِ حباب بشکنند نه بُرِش بخورند */
            white-space: pre-wrap;
            margin-bottom: 1px;
        }
        .msg + .msg { margin-top: 1px; }
        /* فاصلهٔ بصری بینِ خوشهٔ پیامِ من و طرفِ مقابل تا مرزِ گفتگو پیدا باشد */
        .msg.in + .msg.out, .msg.out + .msg.in { margin-top: 10px; }
        .msg .meta {
            font-size: 10px;
            color: rgba(255,255,255,0.55);
            display: inline-flex; align-items: center; gap: 4px;
            float: inline-end;                /* کنارِ آخرین خطِ متن بنشیند، نه یک خطِ جدا */
            margin-inline-start: 10px;
            position: relative; top: 3px;     /* هم ترازِ پایینِ خطِ متن */
        }
        /* در حباب های مدیا متا نباید کنارِ عکس/ویدئو شناور شود → همان خطِ جدا */
        .msg:has(.chat-img, .chat-video, .chat-gif, .chat-sticker, .chat-map, .chat-audio, .chat-file, .ch-media) .meta {
            float: none; display: flex; margin-inline-start: 0; top: 0; margin-top: 3px;
        }
        .msg.in {
            align-self: flex-end;
            background: var(--bubble-in);
            color: var(--text);
        }
        .msg.in .meta { color: var(--text-dim); justify-content: flex-end; }
        /* انجمن: نامِ فرستنده داخلِ حباب (بالا، رنگِ per-user) + آواتارِ فرستنده بیرونِ حباب، کنارش —
           عینِ واتساپ/تلگرام. پیامِ دیگران (.in) در این اپ سمتِ چپ است؛ پس آواتار بیرونِ چپ، ته چینِ حباب. */
        /* مدتِ پیامِ صوتی هم اینجا نشسته (کنارِ نام یا تنها) — نه چسبیده به پلیر، که تو باریک شدنِ لحظه ای رو هم می افتاد. */
        .msg-top-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
        .msg-sender { font-size: 13px; font-weight: 700; line-height: 1.4; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .msg-dur { font-size: 11px; opacity: .65; white-space: nowrap; flex-shrink: 0; margin-inline-start: auto; }
        .msg.in .msg-av {
            position: absolute; left: -46px; bottom: 0;
            width: 38px; height: 38px; border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 15px; font-weight: 700; color: #fff; line-height: 1;
            background-size: cover; background-position: center; overflow: hidden; user-select: none;
        }
        .msg.in:has(.msg-av) { margin-left: 46px; }
        .msg.out {
            align-self: flex-start;
            background: var(--bubble-out);
            color: white;
        }
        .msg.out .meta { justify-content: flex-start; }

        .ticks { display: inline-flex; }
        .ticks svg { width: 14px; height: 14px; }
        .ticks.t-pending { color: rgba(255,255,255,0.45); }
        .ticks.t-sent    { color: rgba(255,255,255,0.7); }
        .ticks.t-delivered { color: rgba(255,255,255,0.85); }
        .ticks.t-read    { color: #4fc3f7; }

        .composer {
            display: flex; align-items: flex-end;
            gap: clamp(5px, 0.8vw, 8px);
            padding: 10px clamp(8px, 1.2vw, 12px) calc(10px + var(--safe-bottom));
            background: var(--bg-elev);
            border-top: 1px solid var(--border);
            min-width: 0;
            position: relative;   /* لنگرِ آیکون های شناورِ ضبط */
        }
        /* 🔒📻 آیکون های حین ضبط — مو به مو عکسِ اندروید: قفل دقیقاً بالای میک، واکی سمتِ راستِ میک (هم سطح).
           #recHints یک نقطهٔ لنگرِ صفر در مرکزِ دکمهٔ میک است (مختصاتش با JS ست می شود)؛ دو آیکون نسبت به آن absolute. */
        #recHints { display: none; position: fixed; width: 0; height: 0; pointer-events: none; z-index: 2147483000; }
        body.rec-on #recHints { display: block; }
        #recHints .rec-lock, #recHints .rec-walkie {
            position: absolute; width: 44px; height: 44px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center; font-size: 20px;
            background: #424242; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.45); transition: background .15s, transform .15s;
        }
        #recHints .rec-lock   { left: -22px; top: -74px; }   /* بالای میک، وسط چین */
        #recHints .rec-walkie { left: 34px;  top: -22px; }   /* سمتِ راستِ میک، هم سطح */
        #recHints .rec-lock svg, #recHints .rec-walkie svg { width: 22px; height: 22px; }
        #recHints .rec-lock.armed { background: var(--accent); transform: scale(1.15); }
        #recHints .rec-walkie.armed { background: #E53935; transform: scale(1.15); }   /* قرمز = حالتِ واکی */
        /* دکمهٔ ضبط همیشه آبی (var(--accent)) می مانَد — فقط با پالس نشان می دهد در حالِ ضبط است (نه قرمز). */
        .mic.recording { background: var(--accent) !important; color: #fff !important; }
        .mic.cancel-hint { background: #7f1d1d !important; }   /* کشیدن به چپ = لغو */
        /* وقتی کیبورد باز است، فضای امنِ پایین (نوارِ خانه) معنا ندارد چون کیبورد
           آنجا را پوشانده؛ آن paddingِ اضافه را برمی داریم تا کامپوزر دقیقاً
           بچسبد بالای کیبورد بدونِ فاصله ی اضافی. */
        body.kb-open .composer { padding-bottom: 10px; }
        /* پیام نویس: حالا یک divِ contenteditable است (نه textarea) تا نوارِ «قبلی/بعدی/Done»ِ
           iOS Safari نیاید. ظاهر دقیقاً مثلِ قبل می مانَد. */
        .composer #composeInput {
            flex: 1 1 auto; min-width: 0;
            background: var(--bg); color: var(--text);
            border: 1px solid var(--border); border-radius: 18px;
            padding: 9px 14px;
            min-height: 40px; max-height: 140px;
            overflow-y: auto;
            outline: none;
            line-height: 1.45;
            white-space: pre-wrap;        /* خطوطِ چندتایی (Shift+Enter) و فاصله ها حفظ شوند */
            overflow-wrap: anywhere;       /* لینک/کلمهٔ بلند بیرون نزند */
            word-break: break-word;
            cursor: text;
            -webkit-user-select: text; user-select: text;
            box-sizing: border-box;
        }
        .composer #composeInput:focus { border-color: var(--accent); }
        /* جای نگهِ «پیام…» (textarea نیست، پس با CSS می سازیمش). کلاسِ is-empty را JS مدیریت می کند. */
        .composer #composeInput.is-empty::before {
            content: attr(data-placeholder);
            color: var(--text-dim);
            pointer-events: none;
        }
        .composer .send {
            width: clamp(36px, 4.5vw, 40px); height: clamp(36px, 4.5vw, 40px); border-radius: 50%;
            background: var(--accent); color: white; border: 0;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .composer .send:hover { background: #6fa0d5; }
        .composer .send:disabled { background: var(--text-dim); cursor: not-allowed; }
        /* ضبطِ قفل شده: دکمه ی ارسالِ صدا قرمز و پالس دار — عینِ اندروید (آیکونِ Send روی پس زمینه ی قرمز) */
        .composer .send.rec-send { background: #e53935 !important; animation: micpulse 1s infinite; }
        .composer .send.rec-send:hover { background: #e53935 !important; }
        .composer .send svg { width: 20px; height: 20px; transform: scaleX(-1); }
        /* روی لمسی hover نداریم؛ بازخوردِ فشردن با :active داده شود تا کاربر دوبار نزند */
        .composer .send:active:not(:disabled) { background: #5a86b8; transform: scale(.92); }
        .composer .attach:active { background: var(--border); color: var(--text); transform: scale(.92); }
        .composer .mic:active:not(.recording) { background: #5a86b8; transform: scale(.92); }
        .composer .attach {
            width: clamp(36px, 4.5vw, 40px); height: clamp(36px, 4.5vw, 40px); border-radius: 50%;
            background: var(--bg-elev-2); color: var(--text-muted); border: 0;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; font-size: 19px; cursor: pointer; line-height: 1;
            transition: transform .08s, background .12s;
        }
        .composer .attach:hover { background: var(--border); color: var(--text); }
        .composer .attach:disabled { opacity: 0.4; cursor: not-allowed; }
        /* 👁🕐 toggleهای یک بار مصرف + زمان دار */
        .composer .vo-toggle, .composer .sched-toggle { font-size: 17px; }
        .composer .vo-toggle.active, .composer .sched-toggle.active { background: var(--accent); color: #fff; }
        /* دکمهٔ «بیشتر» (⋯) — فقط روی موبایل دیده می شود (پاپ اوورِ یک بار مصرف/زمان دار) */
        .composer .more-toggle { display: none; font-size: 20px; position: relative; }
        .composer .more-toggle.active { background: var(--accent); color: #fff; }
        .composer-more {
            display: none; position: absolute; z-index: 60;
            left: 8px; right: 8px; bottom: calc(100% + 6px);
            background: var(--bg-elev-2, var(--bg-elev)); border: 1px solid var(--border);
            border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.4); padding: 6px;
        }
        .composer-more.show { display: block; }
        .composer-more button {
            display: flex; align-items: center; gap: 12px; width: 100%;
            background: none; border: 0; color: var(--text); font: inherit; font-size: 14px;
            padding: 12px 14px; border-radius: 10px; cursor: pointer; text-align: start;
        }
        .composer-more button:active { background: var(--bg-elev); }
        .composer-more button .cm-ic { font-size: 18px; width: 24px; text-align: center; flex: none; }
        .composer-more button .cm-on { margin-inline-start: auto; color: var(--accent); font-weight: 800; }
        .vo-badge, .vo-spent { display: inline-block; font-size: 11px; color: var(--accent); opacity: .85; margin-inline-end: 6px; }
        .vo-spent { color: var(--text-dim); }
        .vo-open { background: var(--bg-elev-2); color: var(--accent); border: 1px dashed var(--accent); border-radius: 12px; padding: 8px 12px; cursor: pointer; font-family: inherit; font-size: 13px; }
        .vo-open:hover { background: var(--border); }
        .vo-ov { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 24px; }
        /* view-once مدیا (عکس/ویدیوی رمزگشایی شده) — نمایشِ فول اسکرینِ یک بار */
        .vo-media-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
        .vo-media-el { max-width: 96vw; max-height: 86vh; border-radius: 8px; display: block; }
        .vo-media-wrap .vo-ok { background: rgba(255,255,255,.18); color: #fff; border: 0; border-radius: 20px; padding: 8px 22px; cursor: pointer; font-family: inherit; font-size: 14px; }
        .vo-card { background: var(--bg-elev); color: var(--text); border-radius: 16px; padding: 18px; max-width: 360px; width: 100%; font-family: inherit; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
        .vo-card .vo-h { font-weight: 700; margin-bottom: 12px; }
        .vo-card .vo-body { line-height: 1.9; word-break: break-word; max-height: 50vh; overflow:auto; margin-bottom: 14px; white-space: pre-wrap; }
        .vo-card input[type="datetime-local"] { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 9px; font-family: inherit; margin-bottom: 14px; }
        .vo-card .vo-row { display: flex; gap: 10px; }
        .vo-card .vo-ok, .vo-card .vo-cancel { flex: 1; border: 0; border-radius: 10px; padding: 10px; font-family: inherit; font-weight: 700; cursor: pointer; }
        .vo-card .vo-ok { background: var(--accent); color: #fff; }
        .vo-card .vo-cancel { background: var(--bg-elev-2); color: var(--text-muted); }
        /* 🕐 پنلِ زمان بندی (مو به مو اندروید SchedulePickerPanel) */
        .sch-card { max-width: 380px; }
        .sch-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
        .sch-title { font-weight: 700; font-size: 15px; }
        .sch-x { background: none; border: 0; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
        .sch-days-row { display: flex; align-items: center; gap: 4px; }
        .sch-days-row .sch-days { flex: 1; min-width: 0; }
        .sch-days { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: none; }
        .sch-days::-webkit-scrollbar { display: none; }
        /* فلشِ ناوبریِ روز — فقط روی دسکتاپ (pointer ظریف)؛ روی گوشیِ لمسی مخفی */
        .sch-nav { display: none; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--bg-elev-2); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; align-items: center; justify-content: center; }
        .sch-nav:hover { background: var(--border); }
        @media (hover: hover) and (pointer: fine) { .sch-nav { display: flex; } }
        .sch-chip { flex-shrink: 0; white-space: nowrap; border: 0; cursor: pointer; border-radius: 50px; padding: 7px 14px; font-family: inherit; font-size: 12px; background: var(--bg-elev-2); color: var(--text); }
        .sch-chip.active { background: var(--accent); color: #fff; }
        .sch-time { display: flex; align-items: center; justify-content: center; margin: 12px 0 2px; }
        .sch-stepper { display: flex; flex-direction: column; align-items: center; }
        .sch-pm { width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; color: var(--accent); font-size: 22px; line-height: 1; cursor: pointer; }
        .sch-pm:hover { background: var(--bg-elev-2); }
        .sch-val { background: var(--bg-elev-2); border-radius: 10px; padding: 5px 18px; margin: 3px 0; font-size: 24px; font-weight: 700; direction: ltr; }
        .sch-lbl { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
        .sch-colon { font-size: 24px; font-weight: 700; padding: 0 10px; align-self: flex-start; margin-top: 36px; }
        .sch-err { color: #EF5350; font-size: 12px; min-height: 16px; padding-top: 6px; text-align: center; }
        .sch-confirm { width: 100%; margin-top: 12px; border: 0; border-radius: 24px; background: var(--accent); color: #fff; font-family: inherit; font-weight: 700; font-size: 15px; padding: 11px; cursor: pointer; }
        /* متاِ حبابِ زمان بندی شده (مو به مو اندروید): شمارشِ ریز + ساعتِ آبی */
        .sched-remain { font-size: 10px; opacity: .7; }
        .sched-clock { color: #00A7F6; font-size: 11px; }
        /* ریپلای و فوروارد */
        .reply-bar { display:flex; align-items:center; gap:8px; padding:6px 12px; background:var(--bg-elev); border-top:1px solid var(--border); }
        .reply-bar .rb-accent { width:3px; align-self:stretch; min-height:30px; background:var(--accent); border-radius:2px; flex:none; }
        .reply-bar .rb-body { flex:1; min-width:0; }
        .reply-bar .rb-name { color:var(--accent); font-size:12px; font-weight:700; }
        .reply-bar .rb-text { color:var(--text-muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .reply-bar .rb-x { background:transparent; border:0; color:var(--text-muted); font-size:18px; cursor:pointer; flex:none; line-height:1; }
        .msg .msg-reply { display:flex; gap:6px; align-items:stretch; background:rgba(127,127,127,.13); border-radius:6px; padding:4px 6px; margin-bottom:4px; cursor:pointer; max-width:100%; }
        .msg .msg-reply .mr-accent { width:3px; background:var(--accent); border-radius:2px; flex:none; }
        .msg .msg-reply .mr-name { color:var(--accent); font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .msg .msg-reply .mr-text { color:var(--text-muted); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .msg .msg-reply .mr-body { flex:1; min-width:0; }
        .msg .msg-reply .mr-thumb { width:36px; height:36px; border-radius:5px; object-fit:cover; flex:none; background:rgba(127,127,127,.15); }
        .reply-bar .mr-thumb { width:38px; height:38px; border-radius:5px; object-fit:cover; flex:none; background:rgba(127,127,127,.15); }
        .msg .msg-fwd { color:var(--accent); font-size:11px; margin-bottom:3px; opacity:.9; }
        .msg.flash { animation: msgFlash 1.6s ease; }
        @keyframes msgFlash { 0%,100%{ box-shadow:none; } 25%{ box-shadow:0 0 0 3px var(--accent); } }
        .fwd-picker { position:fixed; inset:0; z-index:1100; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; }
        .fwd-box { width:min(420px,92vw); max-height:80vh; background:var(--bg-elev); border-radius:14px; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow); }
        .fwd-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; font-weight:700; color:var(--text); border-bottom:1px solid var(--border); }
        .fwd-head button { background:transparent; border:0; color:var(--text-muted); font-size:18px; cursor:pointer; }
        #fwdSearch { margin:8px 12px; padding:9px 12px; border-radius:18px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-family:inherit; font-size:13px; }
        .fwd-list { overflow-y:auto; padding:4px 6px 10px; }
        .fwd-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; cursor:pointer; color:var(--text); }
        .fwd-row:hover { background:var(--bg-elev-2); }
        .fwd-row .fr-av { width:38px; height:38px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:700; flex:none; }
        .fwd-row .fr-name { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

        /* media bubbles */
        .msg .chat-img {
            display: block; max-width: 360px; max-height: 480px;
            border-radius: 12px; cursor: pointer; object-fit: cover;
            background: rgba(127,127,127,0.12);
        }
        .msg .chat-save, .msg .chat-file {
            display: inline-block; margin-top: 4px;
            font-size: 12px; color: inherit; text-decoration: underline; opacity: 0.85;
        }
        .msg .chat-save:hover, .msg .chat-file:hover { opacity: 1; }
        .msg .chat-img.uploading { opacity: 0.55; }
        .msg .chat-video { display: block; max-width: 360px; max-height: 480px; border-radius: 12px; background: #000; margin-top: 2px; cursor: pointer; }
        .msg .chat-audio { display: block; width: 100%; max-width: none; min-width: 190px; height: 42px; margin-top: 2px; color-scheme: dark; }
        :root.theme-light .msg .chat-audio { color-scheme: light; }   /* وگرنه کنترلِ نیتیوِ audio همیشه سفید می ماند، حتی تو تمِ شب */
        /* دکمه های اضافیِ پلیرِ نیتیو لازم نیست: بلندگو/ولوم + منوی ۳نقطه (overflow) مخفی → جا برای نوارِ زمان/پخش باز می شود.
           pseudo-elementهای مخصوصِ Chromium اند (اپ رو کروم/وب ویو اجرا می شود). */
        .msg .chat-audio::-webkit-media-controls-mute-button,
        .msg .chat-audio::-webkit-media-controls-volume-slider,
        .msg .chat-audio::-webkit-media-controls-volume-control-container,
        .msg .chat-audio::-webkit-media-controls-overflow-button { display: none !important; }
        /* 🎤 پیامِ صوتی: حباب به تناسبِ عرضِ ستونِ چت بزرگ می شود (نه عرضِ ثابتِ کوچک) و پلیر کاملاً پُرش می کند.
           سقفِ ۳۴۰px تا رو دسکتاپ زیادی پهن/دراز نشود؛ رو موبایل ۸۲٪ (کوچک تر از سقف) پس درصدی می ماند. */
        .msg:has(.voice-wrap) { width: min(82%, 340px); max-width: min(82%, 340px); }
        /* 🎤/📻 پیامِ صوتی: آیکونِ تمایزِ ضبطِ معمولی (میکروفون) از واکی تاکی (رادیوی دستی) کنارِ پلیر — عینِ اندروید */
        .msg .voice-wrap { display: flex; align-items: center; gap: 7px; margin-top: 2px; width: 100%; min-width: 0; }
        .msg .voice-wrap .chat-audio { flex: 1 1 auto; min-width: 190px; }   /* کفِ عرض ۱۹۰px تا کنترل های نیتیو موقعِ باریک شدنِ لحظه ای روی هم تا نشوند */
        .msg .voice-kind { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
        .msg .voice-kind svg { width: 16px; height: 16px; }
        .msg .voice-kind.mic    { background: rgba(80,130,200,.18); color: var(--accent, #5b8fd6); }   /* صدای معمولی */
        .msg .voice-kind.walkie { background: rgba(245,158,11,.20);  color: #f59e0b; }                   /* واکی تاکی — کهربایی برای تمایز */
        /* موبایل/لمسی: کلِ ناحیهٔ چت (هر چیزی داخلش: حباب ها، پلیر، عکس، متن، آواتار) ۱۰٪ کوچک تر
           (اول ۲۰٪ بود، به خواستِ کاربر ۱۰٪ برگشت چون خیلی ریز شده بود).
           دو شرط با «یا» (OR): hover:none (دستگاهِ لمسی) — یا — عرضِ واقعاً باریکِ گوشی (≤480px) به عنوانِ
           fallbackِ مطمئن، چون hover:none با موس/USB متصل (مثلِ ابزارِ اسکرین شات/دیباگ) می تواند غلط
           تشخیص داده شود و اصلاً match نکند. پنجرهٔ دسکتاپ (حتی باریک) عملاً به ۴۸۰px نمی رسد.
           zoom با reflow کوچک می کند (بدونِ gap، برخلافِ transform:scale). این zoom مستقل از
           فیکسِ overflowِ پلیرِ صوت (chat-audio/voice-wrap width:100%/max-width) است — آن فیکس همیشه
           برقرار می ماند و به عددِ zoom بستگی ندارد، پس هیچ وقت از صفحه بیرون نمی زند. */
        @media (hover: none), (max-width: 480px) {
            .messages { zoom: 0.9; }
            /* کامپوزرِ پایین (position:relative → zoomِ مستقیم امن است) و دکمه های تب بار
               (نه خودِ #bottomNavِ fixed — zoom روی position:fixed رفتارِ غیرِقابلِ پیش بینی دارد؛
               روی فرزندهای position:relative اعمال شد تا خودِ نوار fixed دست نخورده بماند) */
            .composer { zoom: 0.9; }
            #bottomNav button { zoom: 0.9; }
            /* پنلِ استیکر/GIF/موردعلاقه — استایلش با <style> از خودِ media-picker.js تزریق می شود
               (نه اینجا)، ولی zoom اونجا ست نشده پس تداخلی نیست؛ position:static است → امن.
               کاربر ۵۰٪ خواست (این پنل تایل های بزرگی داره، جای بیشتری لازم داشت کوچک بشه). */
            .media-picker { zoom: 0.5; }
        }
        /* 🎵 کارتِ موزیک (کاور + نام + آرتیست + پلیر) — عینِ اندروید، نه audioِ سادهٔ پیامِ صوتی */
        /* 🎵 کارتِ موزیک — مو به مو اندروید: کاورِ مربعِ ۶۴px با دکمه ی پخش روی آن + نوارِ پیشرفتِ نازک.
           کنترلِ نیتیوِ <audio> (که روی iOS زشت بود) حذف شد؛ پلیرِ سفارشی با JS کار می کند. */
        .msg .chat-music { display: flex; gap: 12px; align-items: center; max-width: 320px; background: var(--bg-elev-2, var(--bg-elev)); border: 1px solid var(--border); border-radius: 12px; padding: 8px; margin-top: 2px; }
        .msg .chat-music .mc-cover { position: relative; width: 64px; height: 64px; flex-shrink: 0; border-radius: 6px; background: var(--accent-soft, rgba(80,130,200,.18)); color: var(--accent); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; }
        .msg .chat-music .mc-cover > svg { width: 28px; height: 28px; }
        .msg .chat-music .mc-cover.has-img { background: none; }
        .msg .chat-music .mc-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
        /* اورلیِ نیمه شفاف + دکمه ی پخش/توقفِ سفیدِ مرکزی (روی کاور) */
        .msg .chat-music .mc-ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.32); color: #fff; transition: background .15s; }
        .msg .chat-music .mc-cover:active .mc-ov { background: rgba(0,0,0,.45); }
        .msg .chat-music .mc-ov svg { width: 30px; height: 30px; }
        .msg .chat-music .mc-info { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
        .msg .chat-music .mc-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .msg .chat-music .mc-artist { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        /* نوارِ پیشرفتِ نازکِ رند + بخشِ پرشده (RTL: از سمتِ راست پر می شود) */
        .msg .chat-music .mc-bar { position: relative; height: 6px; border-radius: 50px; background: var(--accent-soft, rgba(80,130,200,.18)); margin-top: 6px; cursor: pointer; overflow: hidden; }
        .msg .chat-music .mc-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0%; background: var(--accent); border-radius: 50px; }
        .msg .chat-music .mc-row2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; }
        .msg .chat-music .mc-cur, .msg .chat-music .mc-size { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
        .msg .chat-music .mc-audio { display: none !important; }
        .msg .chat-sticker { display: block; width: 160px; height: 160px; margin-top: 2px; }
        .msg img.chat-sticker { object-fit: contain; }
        .msg .chat-gif { display: block; max-width: 220px; max-height: 260px; border-radius: 12px; margin-top: 2px; background: rgba(0,0,0,.12); }
        /* استیکر/GIفِ خالص — عینِ اندروید (noBubble) و تلگرام: بدونِ پس زمینه/پدینگِ حباب، مستقیم روی
           بکگراندِ چت شناور. margin-bottom برای فاصلهٔ طبیعی با پیامِ بعدی (چون padding رفته). */
        .msg.no-bubble { background: transparent; padding: 0; border-radius: 0; margin-bottom: 6px; }
        .msg .chat-video.videonote { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; background: #000; }
        .msg .chat-map { position: relative; width: 240px; height: 160px; overflow: hidden; border-radius: 12px; margin-top: 2px; cursor: pointer; background: #243240; }
        .msg .chat-map .map-tile { position: absolute; width: 256px; height: 256px; user-select: none; pointer-events: none; }
        .msg .chat-map .map-pin { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin-left: -12px; margin-top: -24px; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
        .msg .chat-map .map-badge { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 8px; pointer-events: none; }
        #mapFs { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.6); display: none; }
        #mapFs.open { display: block; }
        #mapFs .map-fs-canvas { position: absolute; inset: 0; }
        #mapFs .map-fs-close { position: absolute; top: 12px; right: 12px; z-index: 1001; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: #111; font-size: 20px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
        .msg .chat-file {
            display: flex; align-items: center; gap: 8px; padding: 8px 10px;
            background: rgba(127,127,127,0.14); border-radius: 10px; max-width: 240px;
            text-decoration: none; color: inherit;
        }
        .msg .chat-file .fi { font-size: 22px; flex-shrink: 0; }
        .msg .chat-file .fn { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        /* 📄 کارتِ پیش نمایشِ PDF (عینِ اندروید: صفحهٔ اول + نام + سایز) */
        .msg .chat-pdf { display: block; max-width: 300px; background: var(--bg-elev-2, var(--bg-elev)); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-top: 2px; }
        .msg .chat-pdf .pdf-prev { height: 200px; background: #fff; overflow: hidden; }
        .msg .chat-pdf .pdf-prev embed { width: 100%; height: 290px; border: 0; display: block; }
        .msg .chat-pdf .pdf-meta { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
        .msg .chat-pdf .pdf-meta .fi { font-size: 20px; flex-shrink: 0; }
        .msg .chat-pdf .pdf-meta .fn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
        .msg .chat-pdf .pdf-meta .fsz { font-size: 11px; color: var(--text-dim); flex-shrink: 0; }
        .msg .chat-pdf .pdf-meta .pdf-open { font-size: 12px; color: var(--accent); text-decoration: none; flex-shrink: 0; }
        /* تیکِ سبزِ «فایل رو سرور تأیید شد» */
        .file-ok { color: #2ecc71; font-weight: bold; margin-inline-start: 2px; }
        .file-ok svg { width: 13px; height: 13px; vertical-align: middle; }

        /* 🔗 کارتِ پیش نمایشِ لینک — مو به مو اندروید LinkPreviewCard:
           ترتیب [تصویر → دامنه → عنوان → توضیح]، رنگ/اندازه ها یکی، کلِ کارت کلیک پذیر، بدونِ دکمه ی «مشاهده». */
        .msg .lp-cap { margin-bottom: 4px; }
        .msg .lp-card {
            display: block; width: 320px; max-width: 100%;
            margin-top: 2px; border-radius: 8px; overflow: hidden;
            background: #2A2A2A; color: inherit; text-decoration: none; cursor: pointer;
        }
        :root.theme-light .msg .lp-card { background: #F5F5F5; }
        .msg .lp-card .lp-img { width: 100%; background: #3A3A3A; }
        :root.theme-light .msg .lp-card .lp-img { background: #E8E8E8; }
        /* عکسِ پریویو با نسبتِ واقعیِ خودش کامل نشان داده شود (نه کراپ شده به ۲۴۰px). سقفِ بلندِ ۵۲۰px فقط
           برای اینکه یک تصویرِ خیلی درازِ افراطی کلِ چت را نگیرد؛ contain تا چیزی بریده نشود. */
        .msg .lp-card .lp-img img { width: 100%; height: auto; max-height: 520px; object-fit: contain; display: block; }
        .msg .lp-card .lp-noimg { height: 80px; display: flex; align-items: center; justify-content: center; }
        .msg .lp-card .lp-noimg svg { width: 36px; height: 36px; color: #888; }
        .msg .lp-card .lp-text { padding: 8px; }
        .msg .lp-card .lp-domain {
            font-size: 11px; color: #9aa0a6; line-height: 1.3;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        :root.theme-light .msg .lp-card .lp-domain { color: #5f6368; }
        .msg .lp-card .lp-title {
            font-size: 14px; font-weight: 700; color: #fff; line-height: 1.35; margin-top: 1px;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        :root.theme-light .msg .lp-card .lp-title { color: #000; }
        .msg .lp-card .lp-desc {
            font-size: 12px; color: #9aa0a6; line-height: 1.4; margin-top: 2px;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        :root.theme-light .msg .lp-card .lp-desc { color: #5f6368; }

        /* 🔗 نوارِ پیش نمایشِ لینک بالای کامپوزر (حینِ تایپ از کیبورد) — عینِ واتساپ/تلگرام */
        .lp-bar { display: none; }
        .lp-bar.show {
            display: flex; align-items: center; gap: 12px;
            padding: 9px 14px; background: var(--bg-elev); border-top: 1px solid var(--border);
        }
        .lp-bar .lpbar-img {
            width: 60px; height: 60px; flex: none; border-radius: 7px; overflow: hidden;
            background: rgba(127,127,127,.15); display: flex; align-items: center; justify-content: center;
        }
        .lp-bar .lpbar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .lp-bar .lpbar-noimg svg { width: 30px; height: 30px; color: var(--text-muted); }
        .lp-bar .lpbar-spin {
            width: 30px; height: 30px; border-radius: 50%;
            border: 2px solid rgba(127,127,127,.3); border-top-color: var(--accent);
            animation: lpspin .8s linear infinite;
        }
        @keyframes lpspin { to { transform: rotate(360deg); } }
        .lp-bar .lpbar-text { flex: 1; min-width: 0; }
        .lp-bar .lpbar-title { color: var(--text); font-size: 16px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .lp-bar .lpbar-domain { color: var(--text-muted); font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .lp-bar .lpbar-close { background: transparent; border: 0; color: var(--text-muted); font-size: 22px; cursor: pointer; flex: none; line-height: 1; padding: 6px; }
        .lp-bar .lpbar-close:hover { color: var(--text); }

        /* fullscreen image viewer */
        .img-viewer {
            position: fixed; inset: 0; z-index: 9999;
            background: rgba(0,0,0,0.93);
            display: flex; align-items: center; justify-content: center;
        }
        /* viewer: عکس بزرگ تر از اندازهٔ طبیعیِ کوچک، ولی نه تمام صفحه — یک اندازهٔ «وسط».
           width/height صریح ⇒ عکسِ کوچک هم scale می شود؛ سقفِ px تا روی دسکتاپ غول پیکر نشود.
           برای بزرگ تر/کوچک ترکردن فقط دو عددِ ۶۰۰px و ۷۰۰px را تغییر بده. */
        .img-viewer .iv-img { width: min(90vw, 600px); height: min(80vh, 700px); object-fit: contain; border-radius: 8px; }
        .iv-close {
            position: absolute; top: calc(14px + var(--safe-top)); right: 16px; font-size: 22px;
            background: rgba(255,255,255,0.14); color: #fff; border: 0;
            width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
        }
        .iv-close:hover { background: rgba(255,255,255,0.26); }
        .iv-save {
            position: absolute; top: calc(20px + var(--safe-top)); left: 18px; color: #fff; font-size: 14px;
            text-decoration: none; background: rgba(255,255,255,0.14);
            padding: 8px 14px; border-radius: 20px;
        }
        .iv-save:hover { background: rgba(255,255,255,0.26); }

        /* mic button + recording state — هم استایلِ دکمه ی ارسال: دایره ی آبی + آیکونِ سفیدِ تخت (نه اموجی) */
        .composer .mic {
            width: clamp(36px, 4.5vw, 40px); height: clamp(36px, 4.5vw, 40px); border-radius: 50%;
            background: var(--accent); color: #fff; border: 0;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; cursor: pointer; line-height: 1;
        }
        .composer .mic svg { width: 20px; height: 20px; }
        .composer .mic:hover { background: #6fa0d5; }
        .composer .mic.recording { background: var(--accent); color: #fff; animation: micpulse 1s infinite; }
        /* میکروفن همیشه آبی (خواستهٔ صریحِ کاربر، بارها) — هیچ قانونی نباید خاکستری اش کند؛ hover/active/recording مستثنا */
        .composer .mic:not(.recording):not(:hover):not(:active) { background: var(--accent) !important; color: #fff !important; }
        @keyframes micpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
        /* 🎙 حینِ ضبط (مو به مو اندروید): فیلدِ متن و دکمه های میانی می روند، نوارِ ضبط (تایمر + waveform) جایشان می آید */
        .composer.recording #composeInput,
        .composer.recording #btnAttach,
        .composer.recording #btnSticker,
        .composer.recording #btnViewOnce,
        .composer.recording #btnSchedule,
        .composer.recording #btnComposerMore { display: none !important; }
        .composer .rec-bar { display: none; }
        .composer.recording .rec-bar { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 10px; height: 40px; padding: 0 6px; }
        .rec-bar .rec-timer { color: #e53935; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 38px; }
        .rec-bar .rec-wave { flex: 1 1 auto; min-width: 0; width: 100%; height: 32px; }
        /* 📻 بلندگوی واکی در هدرِ چت (مو به مو ir.onpchat: نارنجی #EA580C، VolumeUp/Off) */
        .pane-head .walkie-speaker { background: transparent; border: 0; color: #EA580C; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
        .pane-head .walkie-speaker svg { width: 22px; height: 22px; }
        .pane-head .walkie-speaker.muted { color: rgba(234,88,12,.45); }
        .pane-head .walkie-speaker:hover { background: rgba(234,88,12,.12); }
        /* 📻 پاپ‌اوورِ ولومِ مستقلِ واکی — با تپِ بلندگو باز می‌شود؛ موقعیتش را JS زیرِ دکمه ست می‌کند. */
        .walkie-vol-pop {
            display: none; position: fixed; z-index: 2147483000;
            background: var(--bg-elev-2, var(--bg-elev)); border: 1px solid var(--border);
            border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.4); padding: 8px 14px;
            align-items: center; gap: 10px; min-width: 190px;
        }
        .walkie-vol-pop.show { display: flex; }
        .walkie-vol-pop .wvp-mute {
            flex: 0 0 auto; background: transparent; border: 0; color: #EA580C; cursor: pointer;
            width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        }
        .walkie-vol-pop .wvp-mute:hover { background: rgba(234,88,12,.12); }
        .walkie-vol-pop .wvp-mute svg { width: 20px; height: 20px; }
        .walkie-vol-pop .wvp-mute.muted { color: rgba(234,88,12,.45); }
        .walkie-vol-pop .wvp-slider { flex: 1 1 auto; min-width: 0; accent-color: #EA580C; }
        .walkie-vol-pop .wvp-pct { flex: 0 0 auto; font-size: 12px; color: var(--text-dim); min-width: 32px; text-align: center; font-variant-numeric: tabular-nums; }
        /* 📻 دکمه ی شناورِ واکی تاکی — نارنجی، گوشه ی پایینِ چت، نگه دار و حرف بزن (برای همه ی اعضا) */
        .pane .walkie-fab { position: absolute; bottom: 86px; inset-inline-start: 18px; width: 56px; height: 56px; border-radius: 50%;
            background: #EA580C; color: #fff; border: 0; box-shadow: 0 4px 16px rgba(0,0,0,.42);
            display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 40; touch-action: none;
            transition: transform .12s, background .15s; }
        .pane .walkie-fab svg { width: 26px; height: 26px; }
        .pane .walkie-fab:active { transform: scale(.94); }
        .pane .walkie-fab.recording { background: #e53935; transform: scale(1.14); animation: micpulse 1s infinite; }
        .pane .walkie-fab .wf-timer { display: none; position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
            white-space: nowrap; font-size: 11px; color: #fff; font-weight: 600; background: #e53935; padding: 1px 8px; border-radius: 10px; }
        .rec-hint { font-size: 12px; color: #e53935; align-self: center; }
        /* هدفِ لمسِ ۴۴px روی هر دستگاهِ لمسی — حتی تبلت/لپ تاپِ لمسی با عرض > ۹۰۰px.
           (بلوکِ max-width:۹۰۰px همین را برای موبایل می گذارد؛ این مکمّلِ آن برای لمسیِ پهن است.) */
        @media (pointer: coarse) {
            .composer .attach, .composer .mic, .composer .send {
                width: 44px; height: 44px; min-width: 44px; flex: 0 0 44px;
            }
        }

        /* per-message 3-dot menu */
        .msg { position: relative; }
        .msg .msg-menu-btn {
            position: absolute; top: 50%; transform: translateY(-50%);
            width: 28px; height: 28px; border-radius: 50%;
            background: var(--accent); color: #fff;        /* آبی */
            border: 0; cursor: pointer;
            font-size: 16px; line-height: 1; opacity: 0; transition: opacity .12s;
            display: flex; align-items: center; justify-content: center;
        }
        /* بیرونِ حباب، سمتِ مرکزِ چت (نه روی کارت) */
        .msg.out .msg-menu-btn { left: -36px; }
        .msg.in  .msg-menu-btn { right: -36px; }
        /* فقط وقتی موس روی پیام است، ⋮ آبی ظاهر می شود */
        .msg:hover .msg-menu-btn { opacity: 1; }
        .msg .msg-menu-btn:hover { background: #6fa0d5; }
        /* روی موبایل ⋮ همیشه دیده نشود (مو به مو اندروید) — فقط با لمسِ بلند روی حباب باز می شود
           (مکانیزمِ touchstart/setTimeout در chat-core.js). قبلاً همیشه نمایان بود؛ کاربر گزارش داد
           که مدام کنارِ پیام‌ها می‌ماند و شلوغ است. */
        .msg-menu {
            position: fixed; z-index: 9998; min-width: 150px;
            background: var(--bg-elev-2, var(--bg-elev)); border: 1px solid var(--border);
            border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); overflow: hidden; padding: 4px;
        }
        .msg-menu button {
            display: block; width: 100%; text-align: start; background: none; border: 0;
            color: var(--text); padding: 9px 12px; font-size: 13px; cursor: pointer; border-radius: 7px;
        }
        .msg-menu button:hover { background: var(--bg-elev); }
        .msg-menu button.danger { color: #e53935; }
        /* ─── واکنش ها (Reactions) — مو به مو اندروید ─── */
        .reaction-picker {
            position: fixed; z-index: 9999; display: none; padding: 6px;
            background: var(--bg-elev-2, var(--bg-elev)); border: 1px solid var(--border);
            border-radius: 24px; box-shadow: 0 8px 28px rgba(0,0,0,0.4);
        }
        .reaction-picker .rp-row { display: flex; }
        .reaction-picker .rp-emoji {
            width: 40px; height: 40px; border: 0; background: none; cursor: pointer;
            font-size: 22px; line-height: 1; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            transition: transform .1s, background .12s;
        }
        .reaction-picker .rp-emoji:hover { background: var(--bg-elev); }
        .reaction-picker .rp-emoji:active { transform: scale(.82); }
        .reaction-picker .rp-emoji.active { background: var(--accent-soft); }
        /* بَجِ واکنش زیرِ حباب، کمی روی لبهٔ پایین (مثلِ اندروید) */
        .msg-reactions {
            position: absolute; bottom: -9px; inset-inline-start: 8px; z-index: 1;
            display: flex; flex-wrap: wrap; gap: 4px;
        }
        .msg:has(.msg-reactions) { margin-bottom: 14px; }
        .reaction-chip {
            display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
            background: var(--bg-elev-2, var(--bg-elev)); border: 1px solid var(--border);
            border-radius: 11px; padding: 1px 7px; font-size: 13px; line-height: 1.5;
        }
        .reaction-chip.mine { background: var(--accent); border-color: var(--accent); }
        .reaction-chip i { font-style: normal; font-size: 11px; color: var(--text-muted); }
        .reaction-chip.mine i { color: #fff; }
        .deleted-msg { opacity: .6; font-style: italic; }
        .msg-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; unicode-bidi: isolate; word-break: break-all; }
        .msg-link:hover { opacity: .82; }
        /* روی لمسی، لمسِ بلندِ حباب منو را باز می کند؛ پس منوی/انتخابِ نِیتیوِ مرورگر را خاموش کن تا تداخل نشود */
        @media (hover: none) {
            .messages .msg { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
        }

        /* themed confirm modal */
        .confirm-modal {
            position: fixed; inset: 0; z-index: 10000; padding: 20px;
            background: rgba(0,0,0,0.55);
            display: flex; align-items: center; justify-content: center;
        }
        .confirm-box {
            background: var(--bg-elev); border: 1px solid var(--border); border-radius: 16px;
            padding: 22px 20px; max-width: 340px; width: 100%;
            box-shadow: 0 16px 48px rgba(0,0,0,0.45);
        }
        .confirm-msg { color: var(--text); font-size: 15px; line-height: 1.8; margin-bottom: 18px; text-align: center; }
        .confirm-actions { display: flex; gap: 10px; }
        .confirm-actions button {
            flex: 1; padding: 11px; border-radius: 10px; border: 0;
            font-size: 14px; font-family: inherit; cursor: pointer;
        }
        .cm-cancel { background: var(--bg-elev-2); color: var(--text); }
        .cm-cancel:hover { background: var(--border); }
        .cm-ok { background: #e53935; color: #fff; }
        .cm-ok:hover { background: #c62828; }

        /* ─── Contact profile (read-only) ────────────────────────────── */
        .cp-screen {
            position: fixed; inset: 0;
            background: var(--bg);
            z-index: 75;
            display: flex; flex-direction: column;
            transform: translateX(-100%);
            transition: transform 0.22s ease-out;
        }
        .cp-screen.show { transform: translateX(0); }
        .cp-bar {
            display: flex; align-items: center; gap: 10px;
            padding: calc(12px + var(--safe-top)) 16px 12px;
            background: var(--bg-elev);
            border-bottom: 1px solid var(--border);
        }
        .cp-bar .back {
            background: transparent; color: var(--text); border: 0;
            font-size: 22px; padding: 4px 8px;
        }
        .cp-body {
            flex: 1; overflow-y: auto;
            padding: 24px 18px calc(40px + var(--safe-bottom));
            max-width: 520px; width: 100%; margin: 0 auto;
        }
        .cp-head {
            display: flex; flex-direction: column; align-items: center;
            margin: 12px 0 28px;
        }
        .cp-avatar {
            width: 116px; height: 116px; border-radius: 50%;
            background-size: cover; background-position: center;
            display: flex; align-items: center; justify-content: center;
            color: white; font-size: 42px; font-weight: 600;
            margin-bottom: 14px;
            cursor: pointer;   /* تپ = نمایشِ بزرگ‌شده، بدونِ هیچ دکمه‌ای */
        }
        .cp-avatar.online {
            box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent);
        }
        .cp-name {
            font-size: 20px; font-weight: 700; margin-bottom: 4px;
        }
        .cp-status { color: var(--text-muted); font-size: 13px; }
        .cp-status.online { color: var(--accent); }

        .cp-card {
            background: var(--bg-elev);
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 14px;
            overflow: hidden;
        }
        /* ─── صفحه ی اطلاعاتِ فضا (group/channel/class/santral) — مو به مو اندروید *InfoActivity ─── */
        .si-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0 4px; }
        .si-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-muted); }
        .si-chip.pub { color: #43a047; border-color: rgba(67,160,71,.4); }
        .si-chip.prv { color: #fb8c00; border-color: rgba(251,140,0,.4); }
        .si-chip.sub { color: #1565c0; border-color: rgba(21,101,192,.4); }
        .si-chip.lvl { color: #8e24aa; border-color: rgba(142,36,170,.4); }
        .si-meta { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 4px; }
        .si-id { opacity: .6; font-size: 11px; }
        .si-invite { width: 100%; display: flex; align-items: center; gap: 10px; justify-content: center;
            background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 11px;
            color: var(--accent); font-size: 13px; cursor: pointer; margin: 4px 0 14px; }
        .si-invite svg { width: 20px; height: 20px; flex: 0 0 auto; }
        .si-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
        /* تاگلِ «اجازهٔ پیام به اعضا» — عینِ سوییچِ اندروید */
        .si-perm { margin-bottom: 12px; }
        .si-perm-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
        .si-perm-txt { flex: 1; min-width: 0; }
        .si-perm-title { font-weight: 700; color: var(--text); font-size: 14px; }
        .si-perm-sub { color: var(--text-muted); font-size: 12px; margin-top: 3px; line-height: 1.6; }
        .si-switch { flex-shrink: 0; width: 46px; height: 26px; border-radius: 999px; border: 0; background: var(--bg-elev-2, #333); position: relative; cursor: pointer; transition: background .18s; padding: 0; }
        .si-switch.on { background: #2196f3; }
        .si-switch .si-knob { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
        .si-switch.on .si-knob { transform: translateX(-20px); }
        /* دکمهٔ «تنظیمات» در هدر + عنوانِ صفحهٔ تنظیمات */
        .cp-hbtn { margin-inline-start: auto; background: transparent; border: 0; color: var(--accent, #2196f3); font-weight: 700; font-size: 14px; cursor: pointer; padding: 6px 10px; font-family: inherit; }
        .cp-htitle { margin-inline-start: 12px; font-weight: 700; font-size: 16px; color: var(--text); }
        /* ردیفِ اکشن در صفحهٔ تنظیمات (ویرایش/افزودن/حذف) — عینِ اندروید */
        .ss-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 12px; cursor: pointer; }
        .ss-row:hover { border-color: var(--accent, #2196f3); }
        .ss-row-txt { flex: 1; min-width: 0; }
        .ss-row.danger .si-perm-title { color: #e5484d; }
        .ss-chev { color: var(--text-muted); font-size: 20px; flex-shrink: 0; }
        /* مودالِ ویرایش/افزودن/حذفِ اعضا — از الگوی vo-ov/vo-card بازاستفاده می‌کند */
        .ss-modal .vo-card { max-width: 420px; }
        .ss-field { margin-bottom: 12px; text-align: right; }
        .ss-field label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 5px; }
        .ss-field input, .ss-field textarea { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font-family: inherit; font-size: 14px; box-sizing: border-box; }
        .ss-field .hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; direction: ltr; text-align: left; }
        .ss-picklist { max-height: 46vh; overflow: auto; margin-bottom: 12px; }
        .ss-pick { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px solid var(--border); cursor: pointer; }
        .ss-pick input { width: 18px; height: 18px; flex-shrink: 0; }
        .ss-pick .nm { flex: 1; color: var(--text); font-size: 14px; }
        .ss-rm { background: transparent; border: 0; color: #e5484d; cursor: pointer; font-size: 18px; padding: 4px 8px; }
        .ss-empty { color: var(--text-muted); text-align: center; padding: 24px 0; }
        .si-mhead { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text); }
        .si-count { font-size: 13px; font-weight: 700; color: #fff; background: #1565c0; border-radius: 999px; padding: 1px 10px; min-width: 24px; text-align: center; }
        .si-mlist { max-height: 50vh; overflow-y: auto; }
        .si-mrow { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--border); }
        .si-mrow:first-child { border-top: 0; }
        .si-mav { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 15px; flex: 0 0 auto; }
        .si-mbody { flex: 1 1 auto; min-width: 0; }
        .si-mname { color: var(--text); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .si-mmob { color: var(--text-muted); font-size: 12px; }
        .si-mrole { font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); flex: 0 0 auto; }
        .si-mrole.cr { color: #1565c0; border-color: rgba(21,101,192,.5); }
        .si-mrole.ad { color: #43a047; border-color: rgba(67,160,71,.5); }
        .si-empty, .si-loading { padding: 18px; text-align: center; color: var(--text-muted); font-size: 13px; }
        .si-actions { margin-top: 14px; }
        .si-leave { width: 100%; background: transparent; color: #e53935; border: 1px solid rgba(229,57,53,.5); border-radius: 10px; padding: 11px; font-size: 14px; cursor: pointer; }
        .si-leave:hover { background: rgba(229,57,53,.08); }
        .cp-row {
            display: flex; align-items: center; gap: 14px;
            padding: 14px 16px;
            border-top: 1px solid var(--border);
        }
        .cp-row:first-child { border-top: 0; }
        .cp-row .ic {
            width: 22px; height: 22px;
            color: var(--text-muted);
            flex-shrink: 0;
        }
        .cp-row .ic svg { width: 100%; height: 100%; }
        .cp-row .info { flex: 1; min-width: 0; }
        .cp-row .lab { color: var(--text-muted); font-size: 11px; margin-bottom: 2px; }
        .cp-row .val { color: var(--text); font-size: 14px; word-break: break-word; }
        .cp-row .val.empty { color: var(--text-dim); }

        .cp-actions {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 0;
            background: var(--bg-elev);
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 14px;
            overflow: hidden;
        }
        .cp-actions button {
            background: transparent; color: var(--accent); border: 0;
            padding: 14px 8px;
            display: flex; flex-direction: column; align-items: center; gap: 6px;
            font-size: 12px; font-weight: 500; cursor: pointer;
            border-right: 1px solid var(--border);
        }
        .cp-actions button:first-child { border-right: 0; }
        /* فقط «پیام» (بات/کانال/گروه): تمام‌عرض و وسط */
        .cp-actions.only-msg { grid-template-columns: 1fr; }
        .cp-actions button:hover { background: var(--bg-elev-2); }
        .cp-actions button:disabled {
            color: var(--text-dim); cursor: not-allowed;
        }
        .cp-actions button:disabled:hover { background: transparent; }
        .cp-actions svg { width: 22px; height: 22px; }

        /* ─── Profile screen (full-page overlay) ─────────────────────── */
        .profile-screen {
            position: fixed; top: var(--head-h, 0px); left: 0; right: 0; bottom: 0;
            background: var(--bg);
            z-index: 70;
            display: flex; flex-direction: column;
            transform: translateX(-100%);
            transition: transform 0.22s ease-out;
        }
        .profile-screen.show { transform: translateX(0); }
        body.has-nav #profileMenu { bottom: var(--nav-h); }   /* نوارِ ابزارِ پایین حفظ شود */

        .ph-bar {
            display: flex; align-items: center; gap: 14px;
            padding: calc(12px + var(--safe-top)) 16px 12px;
            background: var(--bg-elev);
            border-bottom: 1px solid var(--border);
            position: sticky; top: 0; z-index: 2;
        }
        .ph-bar .back {
            background: transparent; color: var(--text); border: 0;
            font-size: 22px; padding: 4px 8px;
        }
        .ph-bar h1 {
            margin: 0; font-size: 17px; font-weight: 600;
            flex: 1; text-align: right;
        }
        /* نوارِ بدونِ پسزمینه — فقط دکمهٔ بازگشت (برای منوی پروفایل) */
        .ph-bar.bare { background: transparent; border-bottom: 0; }

        .ph-body {
            flex: 1; overflow-y: auto;
            padding: 24px 18px calc(40px + var(--safe-bottom));
            max-width: 640px; width: 100%;
            margin: 0 auto;
        }

        /* ─── دکمهٔ «پروفایل» در هدرِ اکانت ───────────────────────────── */
        .profile-btn {
            display: inline-flex; align-items: center; gap: 6px;
            background: var(--accent); color: #fff; border: 0; cursor: pointer;
            border-radius: 18px; padding: 7px 14px; font-family: inherit;
            font-size: 13px; font-weight: 700; white-space: nowrap;
        }
        .profile-btn svg { width: 16px; height: 16px; }
        .profile-btn:hover { filter: brightness(1.08); }

        /* ─── صفحهٔ منوی پروفایل (عینِ اندروید) ────────────────────────── */
        .pm-top { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 6px 0 22px; }
        .pm-avatar {
            width: 104px; height: 104px; border-radius: 50%;
            background-size: cover; background-position: center;
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 40px; font-weight: 700; cursor: pointer;
            box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
        }
        .pm-name { display: flex; align-items: center; gap: 6px; font-size: 19px; font-weight: 700; color: var(--text); cursor: pointer; }
        .pm-name .badge { color: var(--accent); display: inline-flex; }
        .pm-name .badge svg { width: 18px; height: 18px; }
        .pm-user-card {
            display: flex; align-items: center; gap: 10px;
            background: var(--bg-elev); border: 1px solid var(--border);
            border-radius: 14px; padding: 12px 14px; margin-bottom: 18px;
        }
        .pm-user-card .u-main { flex: 1; min-width: 0; }
        .pm-user-card .u-val { font-size: 15px; color: var(--text); direction: ltr; unicode-bidi: isolate; text-align: right; }
        .pm-signout { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:14px; background:var(--bg-elev); border:1px solid var(--border); border-radius:14px; padding:14px; font-family:inherit; font-weight:800; font-size:15px; color:#ef5350; cursor:pointer; }
        .pm-signout:hover { border-color:#ef5350; }
        .pm-user-card .u-lbl { font-size: 12px; color: var(--text-muted); }
        .pm-user-card .u-btn {
            width: 40px; height: 40px; flex-shrink: 0; border: 0; cursor: pointer;
            border-radius: 50%; background: var(--bg); color: var(--text);
            display: inline-flex; align-items: center; justify-content: center;
        }
        .pm-user-card .u-btn.share { background: var(--accent); color: #fff; }
        .pm-user-card .u-btn svg { width: 18px; height: 18px; }
        .pm-list {
            display: flex; flex-direction: column;
            background: var(--bg-elev); border: 1px solid var(--border);
            border-radius: 16px; overflow: hidden;
        }
        .pm-row {
            display: flex; align-items: center; gap: 14px; width: 100%;
            background: none; border: 0; cursor: pointer; font-family: inherit;
            padding: 15px 16px; text-align: right; color: var(--text);
            border-bottom: 1px solid var(--border);
        }
        .pm-row:last-child { border-bottom: 0; }
        .pm-row:hover, .pm-row:active { background: var(--bg); }
        .pm-row .pm-ic { width: 26px; flex-shrink: 0; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
        .pm-row .pm-ic svg { width: 24px; height: 24px; }
        .pm-row .pm-lbl { flex: 1; font-size: 15px; font-weight: 600; }
        .pm-row .pm-chev { color: var(--text-muted); font-size: 18px; }

        .ph-avatar-wrap {
            display: flex; flex-direction: column; align-items: center;
            margin: 12px 0 36px;
        }
        .ph-avatar {
            width: 116px; height: 116px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4a9c5a, #2e7a3e);
            display: flex; align-items: center; justify-content: center;
            color: white; font-size: 42px; font-weight: 600;
            border: 3px solid var(--accent);
            position: relative;
            background-size: cover; background-position: center;
        }
        .ph-avatar-actions {
            display: flex; gap: 26px;
            margin-top: -22px;
            position: relative; z-index: 2;
        }
        .ph-avatar-actions button {
            width: 38px; height: 38px; border-radius: 50%;
            border: 3px solid var(--bg);
            display: inline-flex; align-items: center; justify-content: center;
            color: white;
        }
        .ph-avatar-actions .del { background: #c73e3e; }
        .ph-avatar-actions .del:hover { background: #d65454; }
        .ph-avatar-actions .edit { background: var(--accent); }
        .ph-avatar-actions .edit:hover { background: #6fa0d5; }
        .ph-avatar-actions svg { width: 16px; height: 16px; }

        .ph-section { margin-bottom: 28px; }
        .ph-section h2 {
            margin: 0 0 14px;
            font-size: 13px; font-weight: 700;
            color: var(--text); padding-right: 4px;
        }

        .ph-field {
            position: relative;
            background: var(--bg-elev);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 18px 14px 6px;
            margin-bottom: 10px;
            transition: border-color 0.15s;
        }
        .ph-field:focus-within { border-color: var(--accent); }
        .ph-field label {
            position: absolute; top: 5px; right: 12px;
            font-size: 11px; color: var(--text-muted);
            pointer-events: none;
        }
        .ph-field input,
        .ph-field textarea {
            width: 100%; background: transparent; color: var(--text);
            border: 0; outline: 0; padding: 6px 0;
            font: inherit;
            resize: none;
        }
        .ph-field input:disabled,
        .ph-field textarea:disabled { color: var(--text-muted); }
        .ph-field input::placeholder,
        .ph-field textarea::placeholder { color: var(--text-dim); }

        .ph-bio-card {
            display: flex; align-items: center; gap: 12px;
            padding: 14px;
            background: var(--bg-elev);
            border: 1px solid var(--border);
            border-radius: 10px;
            margin-bottom: 28px;
            cursor: pointer;
        }
        .ph-bio-card:hover { background: var(--bg-elev-2); }
        .ph-bio-icon {
            width: 40px; height: 40px; border-radius: 50%;
            background: var(--accent);
            display: flex; align-items: center; justify-content: center;
            color: white; font-weight: 700; font-style: italic;
            flex-shrink: 0;
        }
        .ph-bio-text { flex: 1; min-width: 0; }
        .ph-bio-label { font-weight: 600; }
        .ph-bio-value { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
        .ph-bio-arrow { color: var(--text-muted); font-size: 22px; }

        .ph-address {
            background: var(--bg-elev);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 10px;
        }
        .ph-address .lbl {
            display: flex; align-items: center; gap: 6px;
            font-weight: 600; margin-bottom: 6px;
        }
        .ph-address .txt { color: var(--text); font-size: 14px; line-height: 1.5; }
        .ph-address .coord {
            color: var(--text-muted); font-size: 12px;
            direction: ltr; margin-top: 6px;
        }
        .ph-empty {
            color: var(--text-muted); font-size: 13px;
            padding: 14px; text-align: center;
        }

        .ph-actions {
            display: flex; flex-direction: column; gap: 10px;
            margin-top: 24px;
        }
        .ph-actions button {
            width: 100%; padding: 14px;
            border-radius: 8px; border: 0;
            font-weight: 600;
        }
        .ph-actions .save {
            background: var(--accent); color: white;
        }
        .ph-actions .save:hover { background: #6fa0d5; }
        .ph-actions .signout {
            background: #b73c3c; color: white;
        }
        .ph-actions .signout:hover { background: #c95252; }
        .ph-actions .delete {
            background: transparent; color: var(--red);
            text-align: center; padding: 12px;
            text-decoration: none; cursor: pointer;
        }
        .ph-actions .delete:hover { text-decoration: underline; }

        .toast {
            position: fixed; bottom: calc(24px + var(--safe-bottom)); left: 50%; transform: translateX(-50%);
            background: var(--bg-elev-2); color: var(--text);
            border: 1px solid var(--border);
            padding: 10px 18px; border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.4);
            z-index: 100;
            animation: toastIn 0.2s ease-out;
        }
        @keyframes toastIn {
            from { transform: translate(-50%, 12px); opacity: 0; }
            to   { transform: translate(-50%, 0); opacity: 1; }
        }
        .toast.err { color: var(--red); }
        .toast.ok  { color: var(--green); }

        /* بنرِ اعلانِ درون صفحه حذف شد — اندروید بنرِ این اپ ندارد؛ فقط اعلانِ سیستمیِ خودِ گوشی/مرورگر. */

        /* دکمهٔ بازگشتِ مینی‌اپ — هم‌شکل با بقیهٔ دکمه‌های دایره‌ایِ هدر (log/زنگوله/تم)، نه رنگِ ثابتِ تاریک؛
           قبلاً inline با rgba(255,255,255,..) هارد-کد بود که تو تمِ روشن دیده نمی‌شد. */
        .hdr-mini-back {
            align-items: center; justify-content: center; width: 38px; height: 38px;
            border-radius: 50%; background: var(--bg-elev-2); border: 1px solid var(--border);
            color: var(--text-muted); cursor: pointer; padding: 0;
        }
        .hdr-mini-back:hover { color: var(--text); border-color: var(--text-muted); }
        /* دکمه ی زنگوله ی اعلان ها + پنلِ تاریخچه */
        .notif-bell { position: relative; background: var(--bg-elev-2); color: var(--text-muted); border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
        .notif-bell:hover { color: var(--text); border-color: var(--text-muted); }
        .notif-bell svg { width: 16px; height: 16px; }
        .notif-badge { position: absolute; top: -5px; inset-inline-end: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--red, #e53935); color: #fff; font-size: 10px; line-height: 16px; text-align: center; font-weight: 700; }
        .notif-panel { position: fixed; top: 52px; right: 10px; left: auto; width: min(92vw, 360px); max-height: 70vh; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.5); z-index: 220; display: none; flex-direction: column; overflow: hidden; }
        .notif-panel.show { display: flex; }
        .nf-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 600; }
        .nf-head > span { flex: 1; }
        .nf-clear { background: transparent; border: 0; color: var(--text-muted); font-size: 12px; cursor: pointer; }
        .nf-clear:hover { color: var(--text); }
        .nf-close { background: transparent; border: 0; color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
        .nf-listbox { overflow-y: auto; }
        .nf-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }
        .nf-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); }
        .nf-item:hover { background: var(--bg-elev-2); }
        .nf-item.unread { background: rgba(82,136,193,.08); }
        .nf-av { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 14px; overflow: hidden; }
        .nf-b { flex: 1; min-width: 0; }
        .nf-t { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .nf-x { font-size: 12.5px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
        .nf-time { font-size: 11px; color: var(--text-muted); flex: 0 0 auto; align-self: flex-start; }
        /* بَجِ تعدادِ نخوانده ی همان گفتگو در سینیِ زنگوله (مثلِ بَجِ ردیفِ لیست) */
        .nf-count { flex: 0 0 auto; min-width: 20px; height: 20px; box-sizing: border-box; padding: 0 6px;
            border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
            line-height: 20px; text-align: center; white-space: nowrap; }

        .clickable { cursor: pointer; }
        .clickable:hover { filter: brightness(1.1); }

        /* ─── Floating action button + new-chat sheet ────────────────── */
        /* FAB: گوشه ی پایین-راست (روی سایدبار در RTL) — هرگز روی pane چت نمی افته. */
        .fab {
            position: fixed;
            /* به خواستِ کاربر: دکمهٔ «چت جدید» سمتِ چپ (گوشهٔ پایین-چپ) */
            bottom: calc(24px + var(--safe-bottom)); left: 24px; right: auto;
            width: 56px; height: 56px; border-radius: 50%;
            background: var(--accent); color: white; border: 0;
            box-shadow: var(--shadow);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; z-index: 50;
            transition: transform 0.12s, background 0.12s;
        }
        .fab:hover { transform: scale(1.06); background: #6fa0d5; }
        .fab svg { width: 24px; height: 24px; }
        :root.theme-light .fab:hover { background: #2a94ff; }
        /* روی موبایل وقتی داخل یک چت هستیم، FAB پنهان بشه */
        .app.show-chat .fab { display: none !important; }
        /* وقتی کیبورد باز است (فوکوس روی ورودی)، FAB شناور وسطِ صفحه نیفتد */
        body.kb-open .fab { display: none !important; }
        /* وقتی نوارِ پایین هست، FAB بالاتر از آن بنشیند (نه زیرش) */
        /* FAB بالای کامپوزر بنشیند نه روی نوار/کامپوزر: ارتفاعِ نوار + ارتفاعِ کامپوزر + حاشیه */
        body.has-nav .fab { bottom: calc(var(--nav-h) + 84px + var(--safe-bottom)); }
        /* داخلِ هر گفتگو/گروه/کانال، FABِ «چت جدید» (مداد) اصلاً نباید دیده شود — عینِ اندروید: مداد
           فقط در لیستِ گفتگوهاست. body.chat-open در selectChat (همه ی نماها) ست می شود و در بازگشت به
           لیست پاک می شود؛ روی <body> است تا حتی FABِ بیرون از .app را هم پوشش دهد (نه فقط دسکتاپ). */
        body.chat-open .fab { display: none !important; }

        /* «شروع گفتگوی جدید» = صفحهٔ مستقلِ تمام قد (نه مودالِ وسط چین). روی iPhone مودالِ وسط چین
           زیرِ کیبورد می رفت؛ صفحهٔ تمام قدِ بالا چین این مشکل را ندارد. روی دسکتاپ یک ستونِ وسط چینِ
           حداکثر ۷۲۰px است؛ روی موبایل تمام صفحه. */
        .sheet-backdrop {
            position: fixed; inset: 0;
            background: var(--bg);
            display: none;
            z-index: 90;
        }
        .sheet-backdrop.show { display: flex; }
        /* صفحهٔ «شروع گفتگوی جدید»: نوارِ پایین پنهان، ولی نوارِ ابزارِ بالا (sb-head) دیده می مانَد —
           شیت از زیرِ آن باز می شود (top = پایینِ نوار، با JS اندازه گیری) و نوار بالای شیت می نشیند. */
        /* نوارِ ناوبریِ پایین هم مثلِ بقیه ی صفحات روی شیتِ «گفتگوی جدید» دیده شود (z بالای شیتِ ۹۰) */
        body.sheet-open #bottomNav { z-index: 95; }
        body.sheet-open .sb-head { z-index: 95; }                              /* بالای شیت (z-index ۹۰) */
        /* شیت بینِ هدرِ بالا و نوارِ ناوبریِ پایین جا بگیرد (نه رویشان) — عینِ بقیه ی صفحات */
        body.sheet-open .sheet-backdrop { top: var(--sheet-top, 0); bottom: var(--nav-h); }
        .sheet {
            background: var(--bg);
            border: 0; border-radius: 0;
            width: 100%; max-width: 720px;
            margin-inline: auto;
            height: 100%;
            display: flex; flex-direction: column;
            overflow: hidden;
            animation: sheetIn 0.18s ease-out;
        }
        @keyframes sheetIn {
            from { transform: translateY(8px); opacity: 0; }
            to   { transform: translateY(0);   opacity: 1; }
        }
        /* نوارِ ابزارِ شیت = هدرِ خودش با دکمه ی برگشت (→) + عنوان — عینِ بقیه ی صفحات (نه ضربدر) */
        .sheet-head {
            display: flex; align-items: center; justify-content: flex-start; gap: 8px;
            padding: calc(14px + var(--safe-top)) 18px 14px;
            border-bottom: 1px solid var(--border);
        }
        .sheet-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
        .sheet-head .back {
            background: transparent; border: 0; color: var(--accent);
            font-size: 28px; line-height: 1; padding: 0;
            width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
            display: flex; align-items: center; justify-content: center; cursor: pointer;
        }
        .sheet-head .back:hover { background: var(--bg-elev-2); }

        .sheet-search {
            padding: 12px 14px;
            border-bottom: 1px solid var(--border);
            display: flex; gap: 8px; align-items: center;
        }
        .sheet-search input {
            flex: 1;
            background: var(--bg); color: var(--text);
            border: 1px solid var(--border); border-radius: 18px;
            padding: 9px 16px;
            outline: none;
        }
        .sheet-search input:focus { border-color: var(--accent); }
        .sheet-search .btn-search {
            background: var(--accent); color: white; border: 0;
            border-radius: 18px; padding: 9px 18px;
            font-weight: 600; cursor: pointer;
            display: inline-flex; align-items: center; gap: 6px;
            white-space: nowrap;
        }
        .sheet-search .btn-search:hover { background: #6fa0d5; }
        .sheet-search .btn-search:disabled { opacity: 0.5; cursor: not-allowed; }
        .sheet-search .btn-search svg { width: 16px; height: 16px; }
        .sheet-loading {
            padding: 28px; text-align: center;
            color: var(--text-muted); font-size: 13px;
        }
        .sheet-hint {
            padding: 28px 14px; text-align: center;
            color: var(--text-muted); font-size: 13px;
            line-height: 1.7;
        }
        .sheet-list {
            overflow-y: auto; flex: 1;
        }
        .sheet-online {
            color: var(--accent); font-size: 12px; margin-top: 2px;
        }

        /* ─── Debug log toggle ───────────────────────────────────────── */
        /* دکمه ی لاگ داخلِ هدرِ سایدبار (نه شناور) — هم اندازه ی دکمه ی تم */
        .log-toggle {
            flex: none;
            background: var(--bg-elev-2); color: var(--text-muted);
            border: 1px solid var(--border); border-radius: 50%;
            width: 32px; height: 32px; padding: 0;
            font-size: 10px; font-family: inherit; letter-spacing: .3px;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .log-toggle:hover { color: var(--text); border-color: var(--text-muted); }
        .log-panel {
            position: fixed; bottom: 0; left: 0; right: 0;
            height: 38vh;
            background: var(--bg-elev);
            border-top: 1px solid var(--border);
            display: none; flex-direction: column;
            z-index: 40;
        }
        .log-panel.show { display: flex; }
        .log-panel .log-head {
            display: flex; align-items: center; justify-content: space-between;
            padding: 6px 12px; border-bottom: 1px solid var(--border);
            color: var(--text-muted); font-size: 12px;
        }
        .log-panel .log-head .actions { display: flex; gap: 6px; align-items: center; }
        .log-panel .dev-btn {
            background: transparent; color: var(--red); border: 1px solid var(--red);
            border-radius: 6px; padding: 2px 10px; font-size: 11px;
            cursor: pointer; font-family: inherit;
        }
        .log-panel .dev-btn:hover { background: var(--red); color: #fff; }
        .log {
            flex: 1; overflow-y: auto; padding: 8px 12px;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 11px; line-height: 1.5;
            direction: ltr; text-align: left;
        }
        .log .line { white-space: pre-wrap; word-break: break-word; }
        .log .ts    { color: var(--text-dim); }
        .log .t-info { color: var(--accent); }
        .log .t-ok   { color: var(--green); }
        .log .t-err  { color: var(--red); }
        .log .t-warn { color: var(--yellow); }
        .log .t-rx   { color: var(--text); }
        .log .t-tx   { color: #b08aff; }

        /* ════════════ STORY (استوری) — عینِ اندروید ════════════ */
        #storyTab, #miniAppTab { display: none; flex-direction: column; overflow-y: auto; background: var(--bg); padding-top: var(--safe-top); }
        /* بندِ استوری: همیشه دیده شود و جایش رزرو بماند (یکپارچه با صفحه نشود) */
        .story-head { padding: 14px 16px 6px; font-size: 17px; font-weight: 700; color: var(--text); background: var(--bg-elev); }
        /* نوارِ افقیِ حلقه ها (LazyRow اندروید) — همیشه ارتفاعِ ثابت تا «افزودن» پیدا باشد */
        .story-bar {
            display: flex; flex-direction: row; gap: 12px; overflow-x: auto;
            padding: 10px 12px 14px; -webkit-overflow-scrolling: touch;
            min-height: 116px;
            background: var(--bg-elev);
            border-bottom: 1px solid var(--border);
        }
        .story-bar::-webkit-scrollbar { height: 0; }
        /* عکسِ داخلِ استوری دقیقاً هم اندازه ی آواتارِ کانال ها (۵۴px).
           عکس ۸۰٪ِ رینگ است → رینگِ بیرونی ۶۸px تا عکس = ۵۴px شود. */
        .story-cell {
            flex: 0 0 auto; width: 80px; display: flex; flex-direction: column;
            align-items: center; gap: 6px; cursor: pointer;
        }
        .story-ring { position: relative; width: 68px; height: 68px; }
        /* رینگ+آواتار+بِج همه در یک SVG (یکپارچه و ضدزوم) — viewBox همه چی را با هم scale می کند */
        .story-ring svg, .story-ring .story-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
        /* fallbackِ آواتارِ غیرِ SVG — وسطِ رینگ */
        .story-ring .avatar {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 54px; height: 54px; min-width: 0;
            border-radius: 50%; overflow: hidden;
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-weight: 700; font-size: 18px; background-size: cover; background-position: center;
        }
        .story-ring .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border-radius: 50%; }
        .story-cell.add .add-box {
            width: 68px; height: 68px; border-radius: 20px; background: rgba(33,150,243,.16);
            display: flex; align-items: center; justify-content: center; color: var(--accent);
        }
        .story-cell.add .add-box svg { width: 28px; height: 28px; }
        /* بِج ها روی قوسِ پایین-چپِ دایره (مثلِ اندروید)، تیک/علامت با flex وسطِ خودِ بِج */
        .story-ring .plus-badge, .story-ring .seen-eye {
            position: absolute; bottom: 0; left: 0;
            width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box;
            background: var(--accent); color: #fff;
            border: 2px solid var(--bg);
            display: flex; align-items: center; justify-content: center; line-height: 1;
        }
        .story-ring .plus-badge { font-size: 12px; }
        .story-ring .seen-eye { font-size: 11px; font-weight: 700; }
        .story-cell .name {
            font-size: 12px; color: var(--text-dim); max-width: 80px; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; text-align: center;
        }
        .story-empty { padding: 40px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }

        /* ── کانال = read-only: composer مخفی، دکمه ی «پیوستن» ── */
        #channelFooter { display: none; padding: 10px 14px calc(10px + var(--safe-bottom)); border-top: 1px solid var(--border); }
        .pane.channel-view .composer { display: none !important; }
        .pane.channel-view #channelFooter { display: block; }
        #channelJoinBtn {
            width: 100%; height: 50px; border: 0; border-radius: 25px; background: var(--accent);
            color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        #channelJoinBtn svg { width: 20px; height: 20px; }
        #channelJoinBtn:disabled { opacity: .6; cursor: default; }
        #channelFooter.joined #channelJoinBtn { background: var(--bg-elev); color: var(--text-dim); cursor: default; }
        /* دکمه ی بی صدا/صدادارِ پایینِ کانال (عینِ اندروید) — full-width */
        #channelMuteBtn {
            width: 100%; height: 50px; border: 0; border-radius: 25px; background: var(--bg-elev);
            color: var(--text); font-weight: 700; font-size: 15px; cursor: pointer;
            display: none; align-items: center; justify-content: center; gap: 8px;
        }
        #channelMuteBtn svg { width: 20px; height: 20px; }
        #channelMuteBtn.muted { color: var(--accent); }
        /* بَجِ تعداد پیام/خبرِ جدید روی ردیفِ گفتگو (عینِ اندروید) */
        .unread-badge {
            display: inline-flex; align-items: center; justify-content: center; min-width: 20px;
            height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff;
            font-size: 12px; font-weight: 700; margin-inline-start: 6px; flex: 0 0 auto;
        }
        .c-row1 .unread-badge { margin-inline-start: 8px; }
        /* علامتِ «عضو» روی کانال های عضوشده در لیستِ کاوشِ کانال ها */
        .ch-joined {
            font-size: 11px; font-weight: 700; color: #1aa34a; background: rgba(26,163,74,.14);
            border-radius: 8px; padding: 1px 7px; margin-inline-start: 6px; white-space: nowrap; flex: 0 0 auto;
        }
        .ch-top .unread-badge { margin-inline-start: 6px; }
        /* پستِ کانال: آواتارِ کانال کنارِ هر پست (عینِ اندروید) */
        .ch-post-row { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; }
        .ch-post-av {
            width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
            background: #e3f2fd; display: flex; align-items: center; justify-content: center;
            color: #2196f3; font-weight: 700; font-size: 13px;
        }
        .ch-post-av img { width: 100%; height: 100%; object-fit: cover; }
        .ch-post-row .msg.ch-post { margin: 0; max-width: calc(100% - 46px); }
        .msg.ch-post .ch-post-name { font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 5px; }
        .msg.ch-post .cap { white-space: normal; line-height: 1.7; }
        .ch-post-img { max-width: 280px; width: 100%; border-radius: 10px; display: block; margin-bottom: 6px; cursor: pointer; }
        .ch-media { margin-bottom: 6px; }
        /* کارتِ نرخِ بازار (rates_card کانالِ native) */
        .rates-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 6px; min-width: 240px; }
        .rates-card .rc-head { background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
        .rates-card .rc-time { font-size: 11px; font-weight: 400; opacity: .9; white-space: nowrap; }
        .rates-card .rc-sec { font-weight: 700; font-size: 13px; padding: 8px 12px 4px; color: var(--text-dim); }
        .rates-card .rc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 12px; border-top: 1px solid var(--border); }
        .rates-card .rc-name { font-size: 13px; }
        .rates-card .rc-val { font-size: 13px; font-weight: 600; white-space: nowrap; direction: ltr; }
        .rates-card .rc-up { color: #1aa34a; margin-inline-end: 3px; }
        .rates-card .rc-down { color: #e53935; margin-inline-end: 3px; }
        /* کارتِ عمومیِ مینی‌اپ‌ها (order_card/brush_card/guard_card/...) — عینِ اندروید: هدرِ رنگی + ردیفِ کلید|مقدار */
        .mini-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 6px; min-width: 240px; }
        /* کارتِ عمومیِ کانال (موزیک و …): ~۳۰٪ جمع‌وجورتر — سقفِ عرض تا کلِ کارت (کاورِ مربع + دکمه + پلیرها) رو موبایل و دسکتاپ تمیز جا شود، نه تمام‌عرضِ حباب */
        .mini-card.cc-card { max-width: 300px; }
        .mini-card .mc-head { color: #fff; font-weight: 700; font-size: 13px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
        .mini-card .mc-head .mc-sub { font-size: 11px; font-weight: 400; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .mini-card .mc-body { padding: 10px 12px; }
        .mini-card .mc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; }
        .mini-card .mc-row .k { color: var(--text-dim); }
        .mini-card .mc-row .v { font-weight: 600; }
        .mini-card .mc-note { font-size: 12px; color: var(--text-dim); margin-top: 6px; line-height: 1.7; }
        .mini-card .mc-divider { height: 1px; background: var(--border); margin: 8px 0; }
        .mini-card .mc-reveal { color: var(--accent); font-weight: 600; cursor: pointer; }
        /* لینک‌های داخلِ مینی‌کارت: رنگِ ثابتِ اکسنت — نه آبیِ پیش‌فرض، نه بنفشِ :visited مرورگر (باگِ «دیدن») */
        .mini-card a { color: var(--accent); text-decoration: none; font-weight: 700; }
        .mini-card a:visited, .mini-card a:hover, .mini-card a:active, .mini-card a:focus { color: var(--accent); }
        .mini-card .mc-view {
            flex-shrink: 0; padding: 5px 14px; border-radius: 8px; white-space: nowrap;
            background: var(--accent-soft, rgba(80,130,200,.18)); color: var(--accent);
            font-weight: 700; font-size: 12px; text-decoration: none; -webkit-tap-highlight-color: transparent;
        }
        .mini-card .mc-view:visited, .mini-card .mc-view:hover, .mini-card .mc-view:active { color: var(--accent); }
        .ch-media.failed .ch-post-img { display: none; }
        .ch-media-ph { display: none; }
        .ch-media.failed .ch-media-ph {
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
            width: 170px; height: 120px; background: rgba(125,125,125,.18); border-radius: 10px;
            color: var(--text-dim); cursor: pointer;
        }
        .ch-media-ph .dl {
            width: 44px; height: 44px; border-radius: 50%; background: rgba(125,125,125,.35);
            display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff;
        }
        .ch-media-ph .lbl { font-size: 12px; }

        /* ── تبِ فضاها (GroupTab اندروید — چیپ ها) ── */
        .sp-chips {
            display: flex; gap: 4px; margin: 8px 12px; padding: 4px;
            background: var(--bg-elev); border-radius: 50px;
        }
        .sp-chip {
            flex: 1; border: 0; background: transparent; color: var(--text-dim);
            border-radius: 50px; padding: 9px 4px; font-size: 13px; cursor: pointer; white-space: nowrap;
        }
        .sp-chip.active { background: var(--accent); color: #fff; font-weight: 700; }
        .sp-list { padding-bottom: 16px; }
        /* انیمیشنِ اسلایدِ بخش ها هنگامِ سوایپ/کلیکِ چیپ (RTL) */
        @keyframes spInL { from { transform: translateX(-22px); opacity: .35; } to { transform: translateX(0); opacity: 1; } }
        @keyframes spInR { from { transform: translateX( 22px); opacity: .35; } to { transform: translateX(0); opacity: 1; } }
        .sp-list.slide-l { animation: spInL .2s ease-out; }
        .sp-list.slide-r { animation: spInR .2s ease-out; }
        .sp-empty { padding: 48px 24px; text-align: center; color: var(--text-muted); }
        .sp-empty .ic { font-size: 64px; opacity: .5; display: block; margin-bottom: 14px; }
        .sp-empty .ttl { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
        .sp-empty .desc { font-size: 13px; line-height: 1.8; }
        .sp-row .ch-sub2 { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
        .sp-row { position: relative; }
        .sp-del {
            position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
            width: 32px; height: 32px; border-radius: 50%;
            background: rgba(229,72,77,.12); color: #e5484d; border: 0;
            font-size: 15px; line-height: 1; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            opacity: 0; transition: opacity .12s, background .12s; z-index: 3;
        }
        .sp-row:hover .sp-del { opacity: 1; }
        .sp-del:hover { background: rgba(229,72,77,.24); }
        @media (hover: none) { .sp-row .sp-del { opacity: 1; } }

        /* ── شیتِ ساختِ فضا (ایجاد: انجمن/کانال/کلاس/سانترال) ── */
        .sp-form { padding: 14px 18px; overflow-y: auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
        .spc-field { display: flex; flex-direction: column; gap: 6px; }
        .spc-field > label { font-size: 13px; color: var(--text-muted); }
        .spc-field input[type=text], .spc-field textarea, .spc-field select {
            width: 100%; background: var(--bg); color: var(--text);
            border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
            outline: none; font: inherit; box-sizing: border-box;
        }
        .spc-field input:focus, .spc-field textarea:focus, .spc-field select:focus { border-color: var(--accent); }
        .spc-field textarea { resize: vertical; min-height: 54px; line-height: 1.6; }
        .spc-field .hint { font-size: 11px; color: var(--text-dim); line-height: 1.7; }
        .spc-field .hint.err { color: var(--red); }
        /* نام کاربری (slug انگلیسی، LTR) با پیشوندِ نوع */
        .spc-prefix { display: flex; align-items: stretch; }
        .spc-prefix .pfx {
            display: flex; align-items: center; padding: 0 12px; direction: ltr;
            background: var(--bg-elev-2); color: var(--text-muted);
            border: 1px solid var(--border); border-inline-end: 0; border-radius: 8px 0 0 8px;
        }
        .spc-prefix input { border-radius: 0 8px 8px 0 !important; direction: ltr; text-align: left; }
        /* چیپ های سطحِ کلاس */
        .spc-chips { display: flex; gap: 8px; flex-wrap: wrap; }
        .spc-chips button {
            border: 1px solid var(--border); background: transparent; color: var(--text-muted);
            border-radius: 18px; padding: 7px 16px; cursor: pointer; font: inherit; font-size: 13px;
        }
        .spc-chips button.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
        /* سوییچِ عمومی/خصوصی */
        .spc-toggle { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
        .spc-toggle .lbl { font-size: 14px; color: var(--text); }
        .spc-switch { position: relative; width: 46px; height: 26px; flex: 0 0 auto; cursor: pointer; }
        .spc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
        .spc-switch .track {
            position: absolute; inset: 0; border-radius: 20px;
            background: var(--bg-elev-2); border: 1px solid var(--border); transition: background .15s, border-color .15s;
        }
        .spc-switch .track::after {
            content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
            width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: inset-inline-start .15s;
        }
        .spc-switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
        .spc-switch input:checked + .track::after { inset-inline-start: 23px; }
        .sp-form-foot { padding: 12px 18px calc(12px + var(--safe-bottom)); border-top: 1px solid var(--border); }
        .spc-create {
            width: 100%; background: var(--accent); color: #fff; border: 0; border-radius: 10px;
            padding: 12px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
        }
        .spc-create:hover { background: #6fa0d5; }
        .spc-create:disabled { opacity: .55; cursor: not-allowed; }

        /* منوی سفارشیِ دسته بندی (به جای select نیتیوِ زشت) */
        .spc-dd { position: relative; }
        .spc-dd-btn {
            width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
            background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
            padding: 10px 12px; font: inherit; cursor: pointer; box-sizing: border-box;
        }
        .spc-dd-btn svg { width: 16px; height: 16px; color: var(--text-muted); transition: transform .15s; flex: 0 0 auto; }
        .spc-dd.open .spc-dd-btn { border-color: var(--accent); }
        .spc-dd.open .spc-dd-btn svg { transform: rotate(180deg); }
        .spc-dd-panel {
            display: none; margin-top: 6px; max-height: 240px; overflow-y: auto;
            background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
            -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        }
        .spc-dd.open .spc-dd-panel { display: block; }
        .spc-dd-opt {
            display: block; width: 100%; text-align: start; background: transparent; border: 0;
            color: var(--text); padding: 10px 14px; font: inherit; cursor: pointer;
            border-bottom: 1px solid rgba(125,125,125,.08);
        }
        .spc-dd-opt:hover { background: var(--bg-elev); }
        .spc-dd-opt.active { color: var(--accent); font-weight: 700; }

        /* انتخابگرِ اعضا (عینِ مرحله ی اولِ اندروید) */
        .spc-memcount { color: var(--accent); font-size: 12px; font-weight: 700; }
        .spc-members {
            max-height: 184px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px;
            -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        }
        .spc-mem {
            display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer;
            border-bottom: 1px solid rgba(125,125,125,.08);
        }
        .spc-mem:hover { background: var(--bg-elev); }
        .spc-mem input { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; margin: 0; }
        .spc-mem-av {
            width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: #fff;
            display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: 0 0 auto;
        }
        .spc-mem-nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .spc-mem-empty { padding: 18px; text-align: center; color: var(--text-muted); font-size: 13px; }

        /* ── لیستِ کانال ها (ChannelListSection اندروید) ── */
        .ch-head { padding: 12px 16px 6px; font-size: 14px; font-weight: 600; color: var(--text); }
        .ch-row {
            display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer;
            border-bottom: 1px solid rgba(125,125,125,.08);
        }
        .ch-row:hover { background: var(--bg-elev); }
        .ch-av {
            width: 54px; height: 54px; border-radius: 50%; background: #e3f2fd; flex: 0 0 auto;
            display: flex; align-items: center; justify-content: center; overflow: hidden;
        }
        .ch-av img { width: 100%; height: 100%; object-fit: cover; }
        .ch-av .camp { color: #2196f3; font-size: 26px; line-height: 1; }
        .ch-body { flex: 1; min-width: 0; }
        .ch-top { display: flex; align-items: center; gap: 5px; }
        .ch-name { font-weight: 700; font-size: 16px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .ch-verified { width: 15px; height: 15px; flex: 0 0 auto; }
        .ch-time { font-size: 12px; color: var(--text-dim); margin-inline-start: auto; flex: 0 0 auto; padding-inline-start: 8px; }
        .ch-last { font-size: 14px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
        .ch-more { text-align: center; padding: 14px 16px 24px; }
        .ch-more button {
            background: transparent; border: 1px solid var(--border); border-radius: 18px;
            color: var(--accent); padding: 8px 20px; cursor: pointer; font-size: 13px;
        }

        /* ── ساختِ استوری (StatusPreviewDialog) ── */
        #storyCreate {
            display: none; position: fixed; inset: 0; z-index: 120; background: #121212;
            flex-direction: column;
        }
        #storyCreate.show { display: flex; }
        #storyCreate .sc-top {
            position: absolute; top: 0; left: 0; right: 0; z-index: 3;
            display: flex; align-items: center; justify-content: space-between; gap: 8px;
            padding: calc(12px + var(--safe-top)) 14px 12px; background: rgba(0,0,0,.35);
        }
        #storyCreate .sc-x {
            width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; flex: 0 0 auto;
            background: rgba(0,0,0,.45); color: #fff; font-size: 20px;
            display: flex; align-items: center; justify-content: center;
        }
        #storyCreate .sc-title { color: #fff; font-size: 16px; font-weight: 700; white-space: nowrap; }
        #storyCreate .sc-title span { font-size: 12px; opacity: .7; margin-inline-start: 6px; }
        #storyCreate .sc-actions { display: flex; gap: 6px; }
        #storyCreate .sc-act {
            width: 42px; height: 42px; border-radius: 14px; border: 0; cursor: pointer; flex: 0 0 auto;
            display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.4);
        }
        #storyCreate .sc-act svg { width: 22px; height: 22px; }
        #storyCreate .sc-stage {
            flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
            position: relative; overflow: hidden;
        }
        #storyCreate .sc-stage img, #storyCreate .sc-stage video {
            max-width: 100%; max-height: 100%; object-fit: contain;
        }
        #storyCreate .sc-textbg {
            width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
            padding: 28px; text-align: center;
        }
        #storyCreate .sc-textbg textarea {
            width: 100%; background: transparent; border: 0; color: #fff; font-size: 26px;
            font-weight: 700; text-align: center; resize: none; outline: none; line-height: 1.5;
            max-height: 60vh;
        }
        #storyCreate .sc-thumbs {
            position: absolute; bottom: calc(150px + var(--safe-bottom)); left: 0; right: 0; display: flex; gap: 8px;
            padding: 0 16px; overflow-x: auto; z-index: 3;
        }
        #storyCreate .sc-thumb {
            position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden;
            flex: 0 0 auto; border: 2px solid rgba(255,255,255,.3); cursor: pointer;
        }
        #storyCreate .sc-thumb.active { border-color: var(--accent); }
        #storyCreate .sc-thumb img, #storyCreate .sc-thumb video { width: 100%; height: 100%; object-fit: cover; }
        #storyCreate .sc-thumb .x {
            position: absolute; top: 1px; right: 1px; width: 18px; height: 18px; border-radius: 50%;
            background: #e53935; color: #fff; display: flex; align-items: center; justify-content: center;
            font-size: 12px; line-height: 1;
        }
        #storyCreate .sc-caption {
            position: absolute; bottom: calc(86px + var(--safe-bottom)); left: 16px; right: 16px; z-index: 3;
            background: rgba(0,0,0,.45); border-radius: 22px; padding: 10px 16px;
        }
        #storyCreate .sc-caption input {
            width: 100%; background: transparent; border: 0; color: #fff; font-size: 15px;
            text-align: center; outline: none;
        }
        #storyCreate .sc-caption input::placeholder { color: rgba(255,255,255,.55); }
        #storyCreate .sc-send {
            position: absolute; bottom: calc(16px + var(--safe-bottom)); left: 16px; right: 16px; z-index: 3; height: 50px;
            border: 0; border-radius: 25px; background: var(--accent); color: #fff; font-weight: 700;
            font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        #storyCreate .sc-send:disabled { opacity: .6; cursor: default; }
        #storyCreate .sc-send svg { width: 20px; height: 20px; }
        #storyCreate .sc-stage .sc-placeholder { color: #888; font-size: 14px; text-align: center; padding: 0 24px; }
        #storyCreate .sc-stage .sc-audio {
            display: flex; flex-direction: column; align-items: center; gap: 14px; color: #fff;
        }
        #storyCreate .sc-stage .sc-audio .disc {
            width: 120px; height: 120px; border-radius: 50%; background: #E91E63;
            display: flex; align-items: center; justify-content: center; font-size: 56px;
        }

        /* ── ویوئرِ استوری (StoryViewerActivity) ── */
        #storyViewer { display: none; position: fixed; inset: 0; z-index: 130; background: #000; }
        #storyViewer.show { display: block; }
        #storyViewer .sv-media {
            position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
        }
        #storyViewer .sv-media img, #storyViewer .sv-media video {
            max-width: 100%; max-height: 100%; object-fit: contain;
        }
        #storyViewer .sv-textbg {
            width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
            padding: 32px; text-align: center;
        }
        #storyViewer .sv-textbg .t { color: #fff; font-size: 26px; font-weight: 700; line-height: 1.6; }
        /* اوورلیِ لودینگِ دانلودِ chunked استوری */
        #storyViewer .sv-load {
            position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 14px; font-weight: 600; background: rgba(0,0,0,.32);
            backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
        }
        #storyViewer .sv-top-grad {
            position: absolute; top: 0; left: 0; right: 0; height: 130px; z-index: 2;
            background: linear-gradient(to bottom, rgba(0,0,0,.75), transparent); pointer-events: none;
        }
        #storyViewer .sv-bot-grad {
            position: absolute; bottom: 0; left: 0; right: 0; height: 180px; z-index: 2;
            background: linear-gradient(to top, rgba(0,0,0,.85), transparent); pointer-events: none;
        }
        #storyViewer .sv-bars { position: absolute; top: calc(8px + var(--safe-top)); left: 8px; right: 8px; z-index: 4; display: flex; gap: 3px; }
        #storyViewer .sv-bar { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
        #storyViewer .sv-bar > i { display: block; height: 100%; width: 0; background: #fff; }
        #storyViewer .sv-head {
            position: absolute; top: calc(20px + var(--safe-top)); left: 10px; right: 10px; z-index: 4;
            display: flex; align-items: center; gap: 8px; color: #fff;
        }
        #storyViewer .sv-head .av {
            width: 36px; height: 36px; border-radius: 50%; background-size: cover; background-position: center;
            display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
            flex: 0 0 auto;
        }
        #storyViewer .sv-head .meta { flex: 1; min-width: 0; }
        #storyViewer .sv-head .meta .nm { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #storyViewer .sv-head .meta .tm { font-size: 12px; opacity: .75; }
        #storyViewer .sv-head button {
            width: 36px; height: 36px; border: 0; background: transparent; color: #fff; cursor: pointer;
            display: flex; align-items: center; justify-content: center; position: relative;
        }
        #storyViewer .sv-head button svg { width: 22px; height: 22px; }
        #storyViewer .sv-head .vcount {
            position: absolute; bottom: 2px; left: 2px; background: var(--accent); color: #fff;
            font-size: 9px; font-weight: 700; border-radius: 8px; padding: 0 3px; min-width: 14px; text-align: center;
        }
        #storyViewer .sv-caption {
            position: absolute; bottom: calc(84px + var(--safe-bottom)); left: 0; right: 0; z-index: 4; text-align: center; padding: 0 24px;
        }
        #storyViewer .sv-caption span {
            display: inline-block; color: #fff; font-size: 16px; background: rgba(0,0,0,.35);
            border-radius: 8px; padding: 8px 16px; max-width: 90%;
        }
        #storyViewer .sv-nav { position: absolute; top: 0; bottom: 0; width: 33%; z-index: 3; }
        #storyViewer .sv-nav.prev { right: 0; }
        #storyViewer .sv-nav.next { left: 0; width: 67%; }
        #storyViewer .sv-reply {
            position: absolute; bottom: calc(14px + var(--safe-bottom)); left: 12px; right: 12px; z-index: 4;
            display: flex; align-items: center; gap: 8px;
        }
        #storyViewer .sv-reply input {
            flex: 1; background: rgba(255,255,255,.15); border: 0; border-radius: 24px;
            color: #fff; padding: 11px 16px; outline: none; font-size: 14px;
        }
        #storyViewer .sv-reply input::placeholder { color: rgba(255,255,255,.6); }
        #storyViewer .sv-reply .send {
            width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--accent);
            color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
        }
        #storyViewer .sv-reply .send svg { width: 22px; height: 22px; transform: scaleX(-1); }

        /* ── شیتِ بینندگان ── */
        #viewersSheet { display: none; position: fixed; inset: 0; z-index: 140; background: rgba(0,0,0,.5); }
        #viewersSheet.show { display: block; }
        #viewersSheet .vs-panel {
            position: absolute; bottom: 0; left: 0; right: 0;
            max-height: min(70vh, calc(var(--app-height) - 60px)); overflow-y: auto;
            background: var(--bg-elev); border-radius: 16px 16px 0 0; padding: 8px 0 calc(24px + var(--safe-bottom));
        }
        #viewersSheet .vs-title { padding: 14px 16px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--border); }
        #viewersSheet .vs-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
        #viewersSheet .vs-row .av {
            width: 42px; height: 42px; border-radius: 50%; background-size: cover; background-position: center;
            display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex: 0 0 auto;
        }

        /* ════════════ MINI-APPS (مینی اپ) — عینِ اندروید ════════════ */
        /* پیجرِ سه‌تایی (کانال‌ها/کسب‌وکارها/آپلیکیشن‌ها) — عینِ ChannelSearchActivityِ اندروید */
        .ma-tabs {
            display: flex; gap: 6px; padding: 12px 16px 0; background: var(--bg-elev-2, var(--bg-elev));
            border-radius: 999px; margin: 12px 16px 0; padding: 4px;
        }
        .ma-tab {
            flex: 1; border: 0; background: transparent; color: var(--text-dim); font-size: 13px; font-weight: 600;
            padding: 9px 8px; border-radius: 999px; cursor: pointer; white-space: nowrap;
        }
        .ma-tab.active { background: var(--accent); color: #fff; }
        .ma-section-head {
            padding: 14px 16px 6px; font-size: 12px; font-weight: 700; color: var(--text-dim);
            display: flex; align-items: center; justify-content: space-between;
        }
        .ma-section-head .cnt { font-weight: 400; opacity: .75; }
        .ma-follow {
            flex: 0 0 auto; background: transparent; color: var(--accent); border: 1px solid var(--accent);
            border-radius: 16px; height: 30px; padding: 0 12px; font-size: 12px; cursor: pointer;
        }
        .ma-follow.following { background: var(--accent); color: #fff; }
        .ma-follow.owner { border-color: transparent; color: var(--text-dim); cursor: default; }
        .ma-more-btn {
            display: block; width: calc(100% - 32px); margin: 4px 16px 8px; text-align: center;
            background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px;
            color: var(--accent); font-size: 12px; padding: 9px; cursor: pointer;
        }
        #miniAppTab .ma-search { padding: 12px 16px 6px; }
        #miniAppTab .ma-search input {
            width: 100%; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px;
            color: var(--text); padding: 11px 14px; outline: none; font-size: 14px;
        }
        #miniAppTab .ma-list { padding: 6px 0 20px; }
        .ma-row {
            display: flex; align-items: center; gap: 10px; padding: 8px 16px; cursor: pointer;
            border-bottom: 1px solid rgba(125,125,125,.10);
        }
        .ma-row:hover { background: var(--bg-elev); }
        .ma-icon {
            width: 54px; height: 54px; border-radius: 50%; background: #e8f5e9; flex: 0 0 auto;
            display: flex; align-items: center; justify-content: center; font-size: 26px; overflow: hidden;
        }
        .ma-icon img { width: 100%; height: 100%; object-fit: cover; }
        .ma-body { flex: 1; min-width: 0; }
        .ma-title { font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
        .ma-title .pw { font-size: 10px; color: var(--text-dim); font-weight: 400; }
        .ma-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px;
            display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
        .ma-open {
            flex: 0 0 auto; background: #2e7d32; color: #fff; border: 0; border-radius: 16px; height: 32px;
            padding: 0 14px; font-size: 12px; cursor: pointer;
        }
        /* 📌 پین به بالا (عینِ اندروید: آیکونِ همیشه‌دیده، رنگ = وضعیت — نه long-press/منو) */
        .ma-pin {
            flex: 0 0 auto; width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer;
            display: flex; align-items: center; justify-content: center; border-radius: 50%;
            color: var(--text-dim); opacity: .45; transition: opacity .15s, color .15s;
        }
        .ma-pin svg { width: 18px; height: 18px; }
        .ma-pin:hover { background: rgba(125,125,125,.14); opacity: .8; }
        .ma-pin.pinned { color: #2196F3; opacity: 1; }

        /* ════════════ تنظیماتِ موبایل (در انتها تا بر باقیِ قواعد غلبه کند) ═══
           این بلوک عمداً آخرِ stylesheet است تا به خاطرِ ترتیبِ سورس روی
           قواعدِ پایه (مثلِ .msg و .ph-body) اولویت بگیرد. */
        @media (max-width: 900px) {
            /* iOS سافاری اگر فونتِ input < 16px باشد هنگامِ فوکوس زوم می کند و
               چیدمان را بهم می ریزد؛ پس روی موبایل همه را حداقل ۱۶px کن. */
            input, textarea, select { font-size: 16px; }
            .login .code-input { font-size: 22px; }

            /* جلوگیری از اسکرولِ افقی در همه ی ستون های قابل اسکرول */
            .sidebar, .pane, .contacts, .messages, .sheet-list,
            #storyTab, #miniAppTab, #spacesTab { max-width: 100%; overflow-x: hidden; }

            /* حباب های چت روی صفحه ی باریک: عرضشان در .msg پایین ترِ همین بلوک ست می شود
               (min(82%, calc(100vw - 72px))) تا گاترِ دکمهٔ ⋮ بماند. */
            .rates-card { min-width: 0; max-width: 100%; }

            /* هدرِ سایدبار: متنِ «وضعیتِ اتصال» حذف (حلقه ی دورِ آواتار همان را
               نشان می دهد) تا جا برای نام/شماره باز شود */
            .sb-head .conn { display: none; }

            /* جلوگیری از بهم ریختگی/سرریزِ هدر روی موبایل (با اضافه شدنِ زنگوله + دکمه ی پروفایل):
               فاصله ی جمع تر، برند کوتاه شونده با ellipsis، دکمه ها کمی فشرده تر */
            .sb-head { gap: 8px; flex-wrap: nowrap; }
            /* موبایل: نام و شماره هم مخفی (به خواستِ کاربر) — آواتار + حلقه ی آنلاین کافی ست. جا برای دکمه ها باز می شود. */
            .sb-head .me { display: none; }
            .sb-head .profile-btn { padding: 7px 11px; font-size: 12px; flex: 0 0 auto; }
            .sb-head .notif-bell, .sb-head .theme-btn { flex: 0 0 auto; width: 30px; height: 30px; }
            /* پنلِ اعلان ها روی موبایل: عرض و ارتفاعِ امن (موقعیتِ راست/بالا را JS زیرِ زنگوله می گذارد) */
            .notif-panel { width: min(94vw, 360px); max-height: 64vh; }

            /* پروفایل/اطلاعاتِ مخاطب تمام عرض */
            .ph-body, .cp-body { max-width: 100%; }

            /* روی صفحهٔ باریک ⋮ بزرگ تر و سمتِ مرکزِ چت بنشیند (نه لبهٔ صفحه) تا overflow-x:hidden نبُرَدش.
               opacity همچنان hover-only است (پس روی موبایل مخفی می ماند)؛ لمسِ بلندِ روی حباب منو را باز می کند. */
            .messages .msg .msg-menu-btn {
                width: 30px; height: 30px; font-size: 17px;
                background: color-mix(in srgb, var(--accent) 90%, transparent);
            }
            .messages .msg .msg-menu-btn::before { content: ""; position: absolute; inset: -7px; }  /* ناحیهٔ لمسِ ۴۴px */
            .messages .msg.in  .msg-menu-btn { right: -36px; left: auto; }   /* in = سمتِ چپ + آواتار سمتِ چپ → ⋮ سمتِ راست (مخالفِ آواتار، سمتِ مرکز) */
            .messages .msg.out .msg-menu-btn { left: -36px; right: auto; }   /* out = سمتِ راست → ⋮ سمتِ چپ (سمتِ مرکز) */

            /* «گفتگوی جدید» روی موبایل = صفحهٔ تمام صفحه (روی iPhone با کیبورد هم تمیز؛ زیرِ کیبورد نمی رود) */
            .sheet {
                max-width: 100%;
                height: var(--app-height);
                padding-bottom: var(--safe-bottom);
            }

            /* چت روی موبایل/آیفون: نوار چت مستقل، فشرده و بدون هدر اکانت بالایی.
               نوارِ پایین (#bottomNav) همیشه — نه فقط وقتِ بازبودنِ کیبورد — تو گفتگو مخفی می شود
               (استانداردِ واتساپ/تلگرام: داخلِ یه گفتگوی خاص جایی برای تب بار نیست)، پس جایی هم
               براش نگه داشته نمی شود (.app تمامِ ارتفاع را می گیرد). */
            body.chat-open .sb-head { display: none; }
            body.chat-open #bottomNav { display: none; }
            body.chat-open .app {
                top: 0;
                height: var(--app-height);
            }
            .app.show-chat {
                width: 100%;
                max-width: 100vw;
                overflow: hidden;
            }
            .app.show-chat .pane {
                display: flex;
                width: 100%;
                max-width: 100vw;
                min-height: 0;
                overflow: hidden;
            }
            .pane-head {
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
                gap: 8px;
                width: 100%;
                max-width: 100%;
                min-width: 0;
                min-height: calc(52px + var(--safe-top));
                padding: calc(6px + var(--safe-top)) 52px 6px 48px;
                box-shadow: 0 1px 0 var(--border);
            }
            .pane-head .avatar {
                width: 36px;
                height: 36px;
                margin: 0;
                font-size: 14px;
                flex: 0 0 auto;
            }
            /* نام + وضعیت دو خطی کنارِ آواتار (مثلِ تلگرام) تا «آنلاین/در حال نوشتن…» روی موبایل هم دیده شود */
            .pane-head .hd-text {
                flex: 1 1 auto;
                min-width: 0;
                align-items: flex-start;
            }
            .pane-head .nm {
                max-width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: start;
                font-size: 14.5px;
                font-weight: 700;
                line-height: 1.25;
            }
            .pane-head .st {
                display: block;
                max-width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: start;
                font-size: 11.5px;
                line-height: 1.25;
                margin-top: 1px;
            }
            /* دکمه های بازگشت/منو: به جای وسط چینِ کلِ هدر (top:50%) که روی آیفون با ناحیه ی امنِ
               بالا/ناچ بالا می رفت، به پایینِ هدر (ردیفِ محتوا) لنگر می زنیم تا با آواتار/نام هم تراز
               شوند — مستقل از مقدارِ safe-top. (روی اندروید safe-top=0 بود و درست دیده می شد.) */
            .pane-head .back {
                right: 8px;
                top: auto;
                bottom: 6px;
                transform: none;
                width: 40px;
                height: 40px;
                color: var(--text);
                font-size: 26px;
                background: transparent;
            }
            .pane-head .menu {
                left: 8px;
                top: auto;
                bottom: 6px;
                transform: none;
                width: 40px;
                height: 40px;
                color: var(--text-muted);
                background: transparent;
                font-size: 22px;
            }
            .pane-head .back:active,
            .pane-head .menu:active {
                background: var(--bg-elev-2);
            }
            /* دکمه های تماس (📞🎥) روی موبایل هم دیده شوند تا بشود از موبایل تماس گرفت — فقط DM
               (با can-call). مثلِ back/menu به پایینِ هدر لنگر می خورند تا با ناچ/ناحیه ی امنِ بالا
               تداخل نکنند (top:50% باعثِ بالا رفتن می شد). */
            .pane-head .onpcall-hbtn {
                top: auto;
                bottom: 6px;
                transform: none;
                width: 38px;
                height: 38px;
            }
            /* وقتی DM است و دکمه های تماس هستند، سمتِ چپ (انتهایِ RTL) جا باز کن تا نام رویشان نیفتد */
            .pane-head.can-call {
                padding-left: 128px;
            }

            .messages {
                padding: 10px 8px;
                gap: 3px;
                overflow-x: hidden;
                overscroll-behavior: contain;
            }
            .msg {
                max-width: min(82%, calc(100vw - 72px));   /* گاترِ سمتِ مرکز برای دکمهٔ ⋮ بماند */
                padding: 7px 10px;
                border-radius: 16px;
                font-size: 13.5px;
            }
            .msg .chat-img {
                max-width: min(74vw, 260px);
                max-height: min(52vh, 360px);
            }
            .msg .chat-video {
                max-width: min(74vw, 260px);
                max-height: min(52vh, 360px);
            }
            .msg .chat-gif {
                max-width: min(72vw, 240px);
                max-height: min(46vh, 300px);
            }
            .msg .chat-sticker {
                width: clamp(112px, 38vw, 150px);
                height: clamp(112px, 38vw, 150px);
            }
            .msg .chat-video.videonote {
                width: clamp(150px, 48vw, 190px);
                height: clamp(150px, 48vw, 190px);
            }
            .msg .chat-map {
                width: min(74vw, 240px);
                height: min(46vw, 160px);
            }
            .msg .chat-audio {
                width: 100%;               /* حبابِ صوت (min(82%,460px)) عرض را می دهد؛ پلیر پُرش می کند */
                max-width: none;
            }

            .composer {
                gap: 6px;
                width: 100%;
                max-width: 100%;
                min-width: 0;
                padding: 6px 8px calc(6px + var(--safe-bottom));
                align-items: flex-end;
                background: var(--bg-elev);
            }
            body.kb-open .composer { padding-bottom: 6px; }
            .composer #composeInput {
                min-height: 44px;
                max-height: 120px;   /* پیامِ چندخطی فضای بیشتری ببیند پیش از اسکرولِ داخلی */
                padding: 11px 14px;
                border-radius: 22px;
                font-size: 16px;
                border-color: transparent;
            }
            .composer .attach,
            .composer .mic,
            .composer .send {
                width: 44px;
                height: 44px;
                min-width: 44px;
                flex: 0 0 44px;     /* هدفِ لمسِ استانداردِ ۴۴px */
                box-shadow: none;
            }
            /* دکمه ی 📎 روی موبایل خاکستریِ ثانویه؛ ولی میکروفن (ضبطِ صدا) همیشه آبی می ماند (خواسته ی کاربر) */
            .composer .attach {
                background: var(--bg-elev-2);
                color: var(--text-muted);
            }
            /* روی موبایل، یک بار مصرف/زمان دار داخلِ پاپ اوورِ «بیشتر» (⋯) می روند تا کامپوزر شلوغ نشود */
            .composer .vo-toggle,
            .composer .sched-toggle {
                display: none !important;
            }
            .composer .more-toggle { display: flex; }
            .composer .send svg {
                width: 19px;
                height: 19px;
            }

            .msg-search {
                padding: 6px 8px;
                gap: 8px;
            }
            .msg-search input {
                min-width: 0;
                padding: 7px 11px;
                font-size: 16px;
            }
            .msg-search .nav {
                min-width: 38px;
                font-size: 11px;
            }
            .msg-search button {
                width: 40px;
                height: 40px;     /* هدفِ لمسِ پیمایشِ نتایج */
            }
            #msgSearchClose { margin-inline-start: 4px; }   /* × از دکمه های پیمایش جدا تا اشتباهی بسته نشود */

            #channelFooter {
                padding: 8px 10px calc(8px + var(--safe-bottom));
            }

            /* موبایل: صفحهٔ ورود/ثبت نام تمام صفحه و اپ گونه (نه کارتِ کوچیکِ شناورِ وسطِ صفحه) —
               حال وهوای اپِ نیتیو: لبه تا لبه، بنر/لوگوی بزرگ تر، فیلدهای درشت تر، دکمهٔ سرور ته صفحه. */
            .login-wrap { padding: 0; align-items: stretch; }
            .login {
                width: 100%; max-width: none; margin: 0;
                min-height: var(--app-height, 100%);
                border: 0; border-radius: 0; background: var(--bg);
                display: flex; flex-direction: column;
                padding: calc(20px + var(--safe-top)) 20px calc(20px + var(--safe-bottom));
            }
            .login .step.show { flex: 1; display: flex; flex-direction: column; }
            .login .auth-banner { height: 150px; }
            .login .auth-logo { width: 46px; height: 46px; }
            .login .auth-brand-name { font-size: 23px; }
            .login h1 { font-size: 22px; margin-bottom: 10px; }
            .login input { padding: 13px 14px; font-size: 16px; }   /* لمسِ بزرگ تر + بدونِ زومِ iOS (≥۱۶px) */
            .login button.primary { padding: 13px; font-size: 15px; }
            .login .auth-server { margin-top: auto; }               /* دکمهٔ انتخابِ سرور ته صفحه — اپ گونه */

            .vo-ov,
            .fwd-picker,
            .confirm-modal {
                padding: 14px;
            }
            .vo-card,
            .sch-card,
            .fwd-box,
            .confirm-box {
                max-width: calc(100vw - 28px);
                min-width: 0;
            }
            .vo-card input[type="datetime-local"],
            #fwdSearch { font-size: 16px; }
            .vo-card .vo-row,
            .confirm-actions { flex-wrap: wrap; }
            .vo-card .vo-ok,
            .vo-card .vo-cancel,
            .confirm-actions button { min-height: 40px; }
            .sch-time { max-width: 100%; overflow: hidden; }
            .sch-val { padding-inline: 14px; }

            .cp-screen,
            .profile-screen,
            #storyCreate,
            #storyViewer,
            #mapFs,
            #miniAppView {
                max-width: 100vw;
                overflow: hidden;
            }
            .cp-bar,
            .ph-bar,
            #miniAppView .mav-head {
                min-width: 0;
                gap: 8px;
            }
            .cp-bar h1,
            .ph-bar h1,
            #miniAppView .mav-title {
                min-width: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .cp-body,
            .ph-body {
                max-width: 100%;
                min-width: 0;
                padding-inline: 12px;
            }
            .cp-avatar,
            .ph-avatar { width: 104px; height: 104px; }
            .cp-name,
            .pm-name {
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .cp-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .cp-actions button,
            .pm-row,
            .pm-user-card {
                min-width: 0;
            }
            .pm-row .pm-lbl,
            .pm-user-card .u-main,
            .ph-bio-text { min-width: 0; }
            .pm-user-card .u-val,
            .ph-address .txt,
            .ph-address .coord {
                overflow-wrap: anywhere;
            }

            .story-bar {
                gap: 8px;
                padding-inline: 10px;
                min-height: 108px;
            }
            .story-cell { width: 72px; }
            .story-cell .name { max-width: 72px; }
            .story-ring,
            .story-cell.add .add-box { width: 62px; height: 62px; }
            .story-ring .avatar { width: 50px; height: 50px; }
            #storyCreate .sc-top {
                min-width: 0;
                padding-inline: 10px;
            }
            #storyCreate .sc-title {
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            #storyCreate .sc-actions {
                min-width: 0;
                max-width: 55vw;
                overflow-x: auto;
                overscroll-behavior-inline: contain;
            }
            #storyCreate .sc-actions::-webkit-scrollbar { height: 0; }
            #storyCreate .sc-act {
                width: 38px;
                height: 38px;
                border-radius: 12px;
            }
            #storyCreate .sc-textbg textarea,
            #storyViewer .sv-textbg .t {
                font-size: clamp(20px, 6vw, 26px);
            }
            #storyViewer .sv-caption span {
                max-width: 100%;
                overflow-wrap: anywhere;
            }

            .sp-chips {
                overflow-x: auto;
                scrollbar-width: none;
            }
            .sp-chips::-webkit-scrollbar { height: 0; }
            .sp-chip {
                min-width: 0;
                font-size: 12px;
            }
            .sp-form,
            .sp-form-foot { padding-inline: 12px; }
            .spc-prefix .pfx { padding-inline: 9px; }
            .spc-chips button { padding-inline: 12px; }
            .spc-dd-panel { max-height: min(240px, 42vh); }

            .ma-row {
                min-width: 0;
                padding-inline: 12px;
            }
            .ma-title { min-width: 0; }
            .ma-open {
                max-width: 90px;
                padding-inline: 10px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        /* آیفون/موبایل افقی: ارتفاع کم است، پس هدر و پیکر باید فشرده تر شوند. */
        @media (max-width: 900px) and (max-height: 500px) {
            .pane-head {
                flex-direction: row;
                gap: 8px;
                min-height: calc(48px + var(--safe-top));
                padding: calc(5px + var(--safe-top)) 54px 5px;
            }
            .pane-head .avatar {
                width: 30px;
                height: 30px;
                margin-bottom: 0;
            }
            .pane-head .nm {
                max-width: calc(100vw - 170px);
                font-size: 13px;
            }
            .pane-head .st { display: none; }
            .pane-head .back,
            .pane-head .menu {
                width: 38px;
                height: 38px;
            }

            .messages {
                padding-block: 6px;
                gap: 2px;
            }
            .msg {
                padding: 6px 9px;
                font-size: 13px;
            }
            .media-picker {
                height: clamp(118px, 34vh, 150px);
                max-height: min(calc(var(--app-height) * .38), 150px);
            }
            .composer {
                padding-top: 6px;
                padding-bottom: 6px;
            }
            .composer #composeInput {
                min-height: 40px;
                max-height: 88px;
                padding-block: 8px;
            }
            .composer .attach,
            .composer .mic,
            .composer .send {
                width: 40px;
                height: 40px;
                min-width: 40px;
                flex-basis: 40px;
            }
        }

        /* صفحه های خیلی باریک (موبایل های کوچک) — کمی فشرده تر */
        @media (max-width: 380px) {
            .sb-head { gap: 8px; padding-inline: 10px; }
            .contact { padding: 9px 10px; gap: 10px; }
            .composer { gap: 5px; padding-inline: 6px; }
            .composer .attach, .composer .mic, .composer .send {
                width: 40px;
                height: 40px;
                min-width: 40px;
                flex-basis: 40px;
            }
            .composer #composeInput { padding-inline: 10px; }
            #bottomNav button { font-size: 10px; }
            .cp-actions svg, #bottomNav button svg { width: 20px; height: 20px; }
            .cp-actions button { padding: 12px 4px; font-size: 11px; }
        }