/* همفکران — لایه‌های نمایش v2 */
:root{ --hf-side-w:236px; --hf-kx-side:302px; --hf-tab:72px; --hf-read:1400px; --hf-doc:860px; }
html,body{ overflow-x:hidden; max-width:100%; }
img,video,canvas,iframe,table{ max-width:100%; }

@media (max-width:767px){
  .bn-grid,.nw-grid,.board,.letter-lanes,.at-stats,.ln-grid,.lv-grid,.ch-admin-grid{
    grid-template-columns:minmax(0,1fr) !important; gap:14px !important; }
  .content{ padding:14px 14px calc(var(--hf-tab) + 16px + env(safe-area-inset-bottom)) !important; }
  .ln-side,.lv-side{ order:2; }
  .btn,.bn-btn,.nw-act,.nw-chip,.kx-act,button,input,select,textarea{ min-height:44px; }
}

@media (min-width:768px) and (max-width:1023px){
  .content{ padding:24px 24px calc(var(--hf-tab) + 20px + env(safe-area-inset-bottom)) !important; }
  .bn-grid,.nw-grid,.letter-lanes,.at-stats,.board{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:18px !important; }
  .ln-grid,.lv-grid{ grid-template-columns:minmax(0,1fr) !important; }
}

@media (max-width:1023px){
  .kx-emoji-pop[hidden],.kx-emo-pop[hidden],.emoji-picker[hidden]{ display:none !important; }
  .kx-emoji-pop,.kx-emo-pop{ bottom:calc(var(--hf-tab) + env(safe-area-inset-bottom)) !important; max-height:44dvh !important; }
  body.kx-page .kx-feed{ height:auto !important; min-height:180px !important; max-height:52dvh !important; }
  .kx-write{ position:sticky; bottom:calc(var(--hf-tab) + env(safe-area-inset-bottom)); z-index:5; }
  .kx-empty{ display:grid !important; place-items:center; text-align:center; min-height:200px; padding:28px 20px;
    color:var(--c-ink3,#9198AF); font-size:13.5px; line-height:2; font-weight:700; }
  .kx-feed:empty::after{ content:'گفتگویی انتخاب نشده است.'; display:grid; place-items:center; width:100%;
    min-height:200px; color:var(--c-ink3,#9198AF); font-size:13.5px; font-weight:700; }
}

@media (min-width:1024px) and (max-width:1439px){
  .sidebar{ width:var(--hf-side-w); }
  .content{ padding:24px 28px 60px !important; max-width:none; }
  .bn-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:20px !important; }
  .nw-grid{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) !important; }
  .letter-lanes{ grid-template-columns:repeat(3,minmax(280px,1fr)) !important; }
  .board{ grid-template-columns:repeat(3,minmax(260px,1fr)) !important; }
  .ln-grid{ grid-template-columns:minmax(0,1fr) 292px !important; }
  .lv-grid{ grid-template-columns:minmax(0,1fr) 300px !important; }
  .kx{ grid-template-columns:var(--hf-kx-side) minmax(0,1fr) !important; gap:16px !important; width:100% !important; max-width:none !important; }
  body.kx-page .kx-main,body.kx-page .kx-side{ height:74dvh !important; max-height:74dvh !important; }
}

@media (min-width:1440px) and (max-width:1919px){
  .content{ padding:32px 40px 72px !important; max-width:var(--hf-read); margin-inline:auto; }
  .bn-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:24px !important; }
  .nw-grid{ grid-template-columns:repeat(auto-fill,minmax(320px,1fr)) !important; }
  .letter-lanes{ grid-template-columns:repeat(3,minmax(320px,1fr)) !important; gap:20px !important; }
  .board{ grid-template-columns:repeat(4,minmax(280px,1fr)) !important; }
  .ln-grid{ grid-template-columns:minmax(0,1fr) 320px !important; gap:22px !important; }
  .lv-grid{ grid-template-columns:minmax(0,1fr) 330px !important; gap:22px !important; }
  .kx{ grid-template-columns:340px minmax(0,1fr) !important; gap:20px !important; width:100% !important; max-width:none !important; }
  body.kx-page .kx-main,body.kx-page .kx-side{ height:78dvh !important; max-height:78dvh !important; }
  .kx .kx-msg{ max-width:64% !important; }
  .nw-article,.nw-form,.letter-sheet,.ln-sheet-col,.lv-sheet-col{ max-width:var(--hf-doc); }
}

@media (min-width:1920px) and (max-width:2399px){
  body{ font-size:16.5px; }
  .sidebar{ width:264px; }
  .content{ padding:40px 56px 88px !important; max-width:1720px; margin-inline:auto; }
  .bn-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:28px !important; }
  .nw-grid{ grid-template-columns:repeat(auto-fill,minmax(360px,1fr)) !important; }
  .letter-lanes{ grid-template-columns:repeat(3,minmax(380px,1fr)) !important; gap:24px !important; }
  .board{ grid-template-columns:repeat(4,minmax(320px,1fr)) !important; }
  .ln-grid,.lv-grid{ grid-template-columns:minmax(0,1fr) 360px !important; gap:26px !important; }
  .kx{ grid-template-columns:380px minmax(0,1fr) !important; gap:24px !important; width:100% !important; max-width:none !important; }
  body.kx-page .kx-main,body.kx-page .kx-side{ height:80dvh !important; max-height:80dvh !important; }
  .kx .kx-msg{ max-width:56% !important; }
  .kx-txt{ font-size:15.5px; }
  .nw-article,.nw-form,.letter-sheet,.ln-sheet-col,.lv-sheet-col{ max-width:900px; }
}

@media (min-width:2400px){
  body{ font-size:20px; line-height:1.85; }
  .sidebar{ width:320px; }
  .nav-link{ font-size:18px !important; padding:15px 16px !important; }
  .nav-label{ font-size:14px !important; }
  .nav-link svg{ width:24px; height:24px; }
  .topbar{ min-height:84px; padding:18px 40px !important; }
  .topbar h1{ font-size:30px !important; }
  .content{ padding:56px 72px 120px !important; max-width:2200px; margin-inline:auto; }
  .bn-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:36px !important; }
  .nw-grid{ grid-template-columns:repeat(auto-fill,minmax(440px,1fr)) !important; }
  .letter-lanes{ grid-template-columns:repeat(3,minmax(460px,1fr)) !important; gap:32px !important; }
  .board{ grid-template-columns:repeat(4,minmax(400px,1fr)) !important; }
  .ln-grid,.lv-grid{ grid-template-columns:minmax(0,1fr) 440px !important; gap:36px !important; }
  .kx{ grid-template-columns:460px minmax(0,1fr) !important; gap:32px !important; }
  body.kx-page .kx-main,body.kx-page .kx-side{ height:82dvh !important; max-height:82dvh !important; }
  .kx-nm{ font-size:18px !important; } .kx-sb{ font-size:15px !important; } .kx-txt{ font-size:20px !important; }
  .kx .kx-msg{ max-width:52% !important; }
  .nw-article,.nw-form,.letter-sheet,.ln-sheet-col,.lv-sheet-col{ max-width:1100px; }
  .kx-when,.kx-lane,.nav-label,.topbar-sub,.card-meta,.muted,.bn-tag,.badge,.nw-chip{ font-size:15px !important; }
  .btn,.bn-btn,.kx-act,.kx-new,input,select,textarea{ min-height:56px; font-size:18px; }
}

/* عرض کارت‌ها روی موبایل و تبلت: تمام‌عرض، نه به اندازهٔ محتوا.
   علت باگ: .kx در kx.css قاعدهٔ align-items:start دارد؛ روی موبایل که
   همان عنصر flex-column می‌شود، کارت‌ها به عرض محتوا جمع می‌شوند و در
   RTL به لبهٔ راست می‌چسبند — نیمهٔ چپ صفحه خالی می‌ماند. */
@media (max-width:1023px){
  .kx{ display:flex !important; flex-direction:column !important;
       align-items:stretch !important; width:100% !important; max-width:100% !important; }
  .kx-side,.kx-main{ width:100% !important; max-width:100% !important; align-self:stretch !important; }
}

/* اصلاح عرض روی نمایشگر پهن: محتوا تمام عرض را بگیرد و ستون‌ها
   به‌جای عدد ثابت، خودشان جا را پر کنند. علت بی‌نظمی: سقف عرض
   روی .content/.bn-grid نوار خالی کنار صفحه می‌ساخت. */
@media (min-width:1440px){
  .content{ max-width:none !important; margin-inline:0 !important; padding:28px 36px 72px !important; }
  .bn-grid,.nw-grid,.letter-lanes,.board{
    width:100% !important; max-width:none !important;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr)) !important;
    align-items:start !important; }
  .bn-card,.card,.nw-card{ width:auto !important; max-width:none !important; }
}
@media (min-width:1920px){
  .content{ padding:32px 44px 88px !important; }
  .bn-grid,.nw-grid,.letter-lanes,.board{
    grid-template-columns:repeat(auto-fit,minmax(400px,1fr)) !important; gap:26px !important; }
}

/* =========================================================
   HAMFEKRAN — RESPONSIVE FINAL FIX
   Dashboard + Groups/Channels Chat
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

img,
video,
iframe {
    max-width: 100%;
}

/* ================= DASHBOARD ================= */

.content {
    width: 100%;
    min-width: 0;
}

.bn-grid,
.nw-grid,
.letter-lanes,
.board {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.bn-card,
.nw-card,
.card,
.widget {
    min-width: 0;
    max-width: 100%;
}

/* مانیتور بزرگ */
@media (min-width: 1440px) {
    .content {
        width: 100%;
        max-width: none !important;
        margin-inline: 0 !important;
        padding: 28px 36px 72px !important;
    }

    .bn-grid,
    .nw-grid,
    .letter-lanes,
    .board {
        width: 100% !important;
        max-width: none !important;
        grid-template-columns: repeat(
            auto-fit,
            minmax(340px, 1fr)
        ) !important;
        gap: 22px;
        align-items: start;
    }
}

/* مانیتور خیلی بزرگ */
@media (min-width: 1920px) {
    .content {
        padding: 32px 44px 88px !important;
    }

    .bn-grid,
    .nw-grid,
    .letter-lanes,
    .board {
        grid-template-columns: repeat(
            auto-fit,
            minmax(380px, 1fr)
        ) !important;
        gap: 26px !important;
    }
}

/* لپ‌تاپ */
@media (min-width: 769px) and (max-width: 1439px) {
    .content {
        width: 100%;
        min-width: 0;
        padding: 24px !important;
    }

    .bn-grid,
    .nw-grid,
    .letter-lanes,
    .board {
        width: 100%;
        min-width: 0;
        grid-template-columns: repeat(
            auto-fit,
            minmax(300px, 1fr)
        );
        gap: 18px;
    }
}

/* ================= CHAT ================= */

.ch-page,
.ch-container,
.ch-layout,
.ch-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.ch-main {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 150px);
    min-height: 500px;
    overflow: hidden;
}

.ch-main .ch-messages {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.ch-main .ch-input,
.ch-main .ch-composer {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.ch-main textarea,
.ch-main input {
    max-width: 100%;
    min-width: 0;
}

.ch-message,
.ch-msg,
.message {
    max-width: 80%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ch-message img,
.ch-msg img,
.message img,
.ch-message video,
.ch-msg video,
.message video {
    max-width: 100%;
    height: auto;
}

/* ================= TABLET ================= */

@media (min-width: 481px) and (max-width: 768px) {

    .content {
        width: 100%;
        padding: 16px !important;
    }

    .bn-grid,
    .nw-grid,
    .letter-lanes,
    .board {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .ch-main {
        height: calc(100dvh - 120px);
        min-height: 420px;
    }

    .ch-message,
    .ch-msg,
    .message {
        max-width: 90%;
    }
}

/* ================= MOBILE ================= */

@media (max-width: 480px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
    }

    .bn-grid,
    .nw-grid,
    .letter-lanes,
    .board {
        display: grid;
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .bn-card,
    .nw-card,
    .card,
    .widget {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* CHAT */

    .ch-page,
    .ch-container,
    .ch-layout {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .ch-main {
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100dvh - 105px);
        min-height: 360px;
        border-radius: 10px;
        overflow: hidden;
    }

    .ch-main .ch-messages {
        width: 100%;
        padding: 8px 6px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .ch-message,
    .ch-msg,
    .message {
        max-width: 94%;
        width: auto;
    }

    .ch-main .ch-input,
    .ch-main .ch-composer {
        width: 100%;
        max-width: 100%;
        padding: 6px;
    }

    .ch-main textarea {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 42px;
        max-height: 110px;
    }
}

/* گوشی خیلی کوچک */

@media (max-width: 360px) {

    .content {
        padding: 6px !important;
    }

    .ch-main {
        height: calc(100dvh - 95px);
        min-height: 340px;
    }

    .ch-message,
    .ch-msg,
    .message {
        max-width: 96%;
    }
}



/* ============================================================================
   HF-FIT — لایهٔ پایانی اندازه و ظاهر  (باید آخرین بلوک این فایل بماند)
   ----------------------------------------------------------------------------
   چرا لازم شد: بالای همین فایل دو ست قاعدهٔ متناقض روی هم نشسته‌اند
   (بلوک v2 و بلوک RESPONSIVE FINAL FIX) با نقاط شکست هم‌پوشان
   (768/769 · 480/481 · 1023/1024 · 1439/1440) و ستون‌هایی با کف
   300/340/380/400px که یکدیگر را خنثی می‌کنند. از آن بدتر، اندازهٔ متن
   بدنه فقط از 1920px به بالا زیاد می‌شد، پس روی لپ‌تاپ 14px می‌ماند و ریز
   دیده می‌شود.

   کاری که این بلوک می‌کند: یک منحنی سیال واحد برای تمام عرض‌ها — از گوشی
   360px تا مانیتور 2560px — به‌جای پله‌های ناهمخوان. هیچ داده و هیچ
   مارک‌آپی تغییر نمی‌کند.
   ============================================================================ */

:root{
  /* واحد پایهٔ متن: 15px روی گوشی · ~17px روی لپ‌تاپ · 18px روی 1920 · 19px به بالا */
  --hf-u: clamp(15px, 0.1923vw + 14.31px, 19px);
  --hf-col: clamp(300px, 25vw, 420px);
}

/* ---------- ۱) یک مقیاس تایپوگرافی برای همهٔ دستگاه‌ها ---------- */
body{
  font-size: var(--hf-u) !important;
  line-height: 1.85 !important;
}
.topbar h1{ font-size: calc(var(--hf-u) * 1.42) !important; line-height:1.45 !important; }
.topbar-sub{ font-size: calc(var(--hf-u) * 0.84) !important; }
.bn-tile-head h3,
.card-title, .nw-card h3{ font-size: calc(var(--hf-u) * 1.02) !important; line-height:1.5 !important; }
.bn-row-title{ font-size: calc(var(--hf-u) * 0.97) !important; line-height:1.7 !important; }
.bn-row-sub, .bn-sub, .bn-meta, .card-meta, .muted,
.nw-chip, .kx-when, .kx-lane, .nav-label,
.bn-empty, .bn-dashed{ font-size: calc(var(--hf-u) * 0.84) !important; }
.bn-tag, .badge{ font-size: calc(var(--hf-u) * 0.80) !important; }
.nav-link{ font-size: calc(var(--hf-u) * 0.95) !important; }
.btn, .bn-btn{ font-size: calc(var(--hf-u) * 0.90) !important; }
.kx-txt{ font-size: var(--hf-u) !important; }
.kx-nm{ font-size: calc(var(--hf-u) * 0.95) !important; }
.kx-sb{ font-size: calc(var(--hf-u) * 0.84) !important; }
input, select, textarea, .input{ font-size: calc(var(--hf-u) * 0.95) !important; }
table th{ font-size: calc(var(--hf-u) * 0.86) !important; }
table td{ font-size: calc(var(--hf-u) * 0.93) !important; }
h1,h2,h3,h4{ text-wrap: pretty; letter-spacing:0 !important; }

/* اعداد فارسی نشکنند */
.bn-clock b, .kpi-num, .ch-when, .kx-when{ font-variant-numeric: tabular-nums; }

/* ---------- ۲) یک قاعدهٔ شبکه، به‌جای پنج قاعدهٔ متناقض ---------- */
@media (min-width:1024px){
  .bn-grid, .nw-grid, .letter-lanes, .board{
    grid-template-columns: repeat(auto-fit, minmax(var(--hf-col), 1fr)) !important;
    gap: clamp(16px, 1.2vw, 32px) !important;
    align-items: start !important;
    width:100% !important; max-width:none !important;
  }
  .content{
    padding: clamp(22px, 2vw, 48px) clamp(24px, 2.6vw, 64px) 80px !important;
    max-width: none !important; margin-inline: 0 !important;
  }
  .sidebar{ width: clamp(228px, 15vw, 300px) !important; }
}

/* روی مانیتور بزرگ ستون‌ها پهن‌تر می‌شوند، نه بیشتر */
@media (min-width:2000px){
  :root{ --hf-col: clamp(400px, 22vw, 520px); }
  .content{ max-width: 2400px !important; margin-inline: auto !important; }
}

/* ---------- ۳) هدف لمس یکسان ---------- */
.btn, .bn-btn, .nav-link, .kx-act, .kx-new, .tabbar a,
input, select, textarea, button{ min-height: 44px; }
@media (min-width:2000px){
  .btn, .bn-btn, input, select, textarea{ min-height: 52px; }
}

/* ---------- ۴) گوشی ---------- */
@media (max-width:860px){
  .topbar-sub{ display:none; }
  .bn-row{ flex-wrap: nowrap !important; }
  .bn-stack-2{ grid-template-columns: minmax(0,1fr) !important; }
  .bn-btn-grow{ min-width:0 !important; flex:1 1 46% !important; }
  .tabbar svg{ width:23px !important; height:23px !important; }
}
@media (max-width:420px){
  .bn-btn-grow{ flex:1 1 100% !important; }
}

/* ---------- ۵) صفحهٔ کانال‌ها و گروه‌ها (نسخهٔ سرورمحور) ----------
   قاعده‌های .ch-* بالای همین فایل برای نسخهٔ قدیمی و جاوااسکریپتی نوشته
   شده بودند و به قاب تازه ارتفاع پنجره‌ای تحمیل می‌کردند. اینجا خنثی می‌شوند. */
.ch-wrap .ch-main{ min-height:0 !important; }
.ch-wrap .ch-msg{ max-width:78%; }
@media (max-width:1100px){ .ch-wrap .ch-msg{ max-width:88%; } }
@media (max-width:620px){
  .ch-wrap .ch-main{ min-height:60vh !important; }
  .ch-wrap .ch-msg{ max-width:94%; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

/* ---------- ۶) داشبورد — نسبت اندازه‌ها  (HF-FIT-DASH) ----------
   در تصویر پنل: ساعت 29px بود و در کارت غالب می‌شد؛ جعبه‌های حالت خالی
   26px پدینگ داشتند و حفرهٔ بزرگ می‌ساختند؛ قرص‌های وضعیت به دو خط
   می‌شکستند. همه به همان واحد --hf-u گره می‌خورند تا در هر دستگاه
   نسبتشان یکی بماند. */

.bn-clock b{ font-size: calc(var(--hf-u) * 1.55) !important; letter-spacing:.5px !important;
  line-height:1.2 !important; }
.bn-clock span{ font-size: calc(var(--hf-u) * 0.80) !important; margin-top:4px !important; }

.bn-empty, .bn-dashed{
  padding: 14px 16px !important; min-height:0 !important;
  font-size: calc(var(--hf-u) * 0.86) !important; line-height:1.95 !important; }

.bn-pill, .at-badge{
  padding: 7px 13px !important;
  font-size: calc(var(--hf-u) * 0.82) !important; line-height:1.7 !important; }
.bn-tag{ padding: 4px 11px !important; }

.bn-tile-head h3{ font-size: calc(var(--hf-u) * 1.02) !important; }
.bn-tile-head b, .bn-inner b{ font-size: calc(var(--hf-u) * 0.90) !important; }

.bn-ico{ width:32px !important; height:32px !important; }
.bn-ico svg{ width:18px !important; height:18px !important; }
.bn-check{ width:22px !important; height:22px !important; min-height:22px !important; }
.bn-bar{ height:6px !important; }

.bn-tile, .card.card-pad, .nw-card{
  padding: clamp(16px, 1.1vw, 24px) !important;
  gap: clamp(10px, .7vw, 14px) !important; }

.bn-btn-block{ min-height:46px !important; }
@media (min-width:2000px){
  .bn-clock b{ font-size: calc(var(--hf-u) * 1.7) !important; }
  .bn-btn-block{ min-height:54px !important; }
}