/* ============================================================
   همفکران — معماری موبایل (Mobile-First)
   نقطهٔ شکست: ۱۰۲۴px  ·  ارتفاع نوار پایین: ۷۲px
   یک فایل واحد؛ آخرین استایل صفحه است.
   ============================================================ */
:root { --hf-tab: 72px; --hf-bp: 1024px; }

/* ---------- ۱) پوستهٔ برنامه ---------- */
@media (max-width: 1023px) {
  html, body { overflow-x: hidden !important; max-width: 100% !important; }

  /* منوی دسکتاپ: در موبایل هرگز دیده نمی‌شود */
  .sidebar { display: none !important; }

  .app-shell { display: block !important; grid-template-columns: 1fr !important; }
  .main {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    margin: 0 !important; border: 0 !important;
    min-height: 100vh; min-height: 100dvh;
  }

  /* محتوا: فضای کف برای نوار پایین */
  .content {
    padding: 14px 14px calc(var(--hf-tab) + 14px + env(safe-area-inset-bottom)) !important;
    display: flex; flex-direction: column; gap: 14px;
    overflow-x: hidden !important;
  }

  /* هر شبکهٔ چندستونی تک‌ستونه */
  .bn-grid, .nw-grid, .bn-stack-2, .board, .letter-lanes, .at-stats, .ch-admin-grid,
  [style*="grid-template-columns"] {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important;
  }
  img, video, svg, iframe, canvas, table { max-width: 100% !important; }
  pre, code { overflow-x: auto; white-space: pre-wrap; }
  .bn-row-title, .ledger-title, .nw-card-title, p, td, li, a { overflow-wrap: anywhere; }

  /* ---------- ۲) نوار بالا: حداقلی ---------- */
  .topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex !important; align-items: center; gap: 10px; flex-wrap: nowrap !important;
    padding: 10px 14px !important; min-height: 56px;
    background: var(--bn-bg, #EEF1F7) !important;
    border-bottom: 1px solid var(--bn-line, #E5E7EB) !important;
  }
  .topbar h1 {
    font-size: 16.5px !important; line-height: 1.35 !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1 1 auto; min-width: 0;
  }
  .topbar-sub { display: none !important; }

  /* اکشن‌های ثانویه پنهان — داخل منوی «بیشتر» می‌آیند */
  .topbar-actions { display: contents !important; }
  .topbar-actions > * { display: none !important; }
  .topbar-actions .hf-avatar,
  .topbar-actions .hf-more { display: grid !important; }

  /* دکمهٔ منو و آواتار: هدف لمسی ۴۴ */
  .hf-menu, .hf-more, .hf-avatar {
    flex: 0 0 auto; width: 40px; height: 40px; padding: 0;
    border-radius: 12px; cursor: pointer;
    display: grid; place-items: center;
    background: var(--bn-tile2); border: 1px solid var(--bn-line); color: var(--bn-ink);
  }
  .hf-avatar { border-radius: 50%; overflow: hidden; }
  .hf-avatar img { width: 100%; height: 100%; object-fit: cover; }

  /* ---------- ۳) نوار پایین: تنها ناوبری موبایل ---------- */
  .hf-tab {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
    display: flex !important; align-items: stretch;
    height: calc(var(--hf-tab) + env(safe-area-inset-bottom));
    padding: 0 4px env(safe-area-inset-bottom);
    background: #FFFFFF; border-top: 1px solid #E5E7EB;
    box-shadow: 0 -4px 14px -8px rgba(19, 21, 44, .25);
  }
  html[data-theme="dark"] .hf-tab { background: var(--bn-tile-flat); border-top-color: var(--bn-line); }
  .hf-tab a {
    flex: 1 1 0; min-width: 0; text-decoration: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 8px 2px; border-radius: 12px;
    color: var(--bn-ink3); font-size: 10.5px; font-weight: 700;
    position: relative;
  }
  .hf-tab a.is-on { color: var(--hfs-indigo, #3C01AF); background: rgba(60, 1, 175, .07); }
  html[data-theme="dark"] .hf-tab a.is-on { color: #C0A6FF; background: rgba(124, 77, 255, .16); }
  .hf-tab a svg { width: 22px; height: 22px; }
  .hf-tab .hf-dot {
    position: absolute; top: 6px; inset-inline-end: 24%;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    background: #EF4444; color: #fff; font-size: 9.5px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* نوار پایین قدیمی پروژه پنهان */
  .tabbar { display: none !important; }

  /* ---------- ورقهٔ «بیشتر» ---------- */
  .hf-sheet {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(4, 6, 22, .55); backdrop-filter: blur(2px);
    display: flex; align-items: flex-end;
  }
  .hf-sheet[hidden] { display: none !important; }
  .hf-sheet-box {
    width: 100%; max-height: 84vh; overflow-y: auto;
    background: #FFFFFF; border-radius: 20px 20px 0 0;
    padding: 16px 14px calc(18px + env(safe-area-inset-bottom));
    animation: hfUp .24s cubic-bezier(.22, 1, .36, 1) both;
  }
  html[data-theme="dark"] .hf-sheet-box { background: var(--bn-tile-flat); }
  @keyframes hfUp { from { transform: translateY(14%) } to { transform: none } }
  .hf-sheet-grab {
    width: 42px; height: 4px; border-radius: 999px; background: var(--bn-line2);
    margin: 0 auto 14px;
  }
  .hf-sheet-title {
    font-size: 10.5px; font-weight: 800; color: var(--bn-ink3);
    padding: 12px 8px 6px; letter-spacing: .3px;
  }
  .hf-sheet a, .hf-sheet button.hf-item {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 13px 12px; border-radius: 12px; min-height: 52px;
    color: var(--bn-ink) !important; text-decoration: none;
    background: transparent; border: 0; font-family: inherit;
    font-size: 15px; font-weight: 700; text-align: start; cursor: pointer;
  }
  .hf-sheet a:active, .hf-sheet button.hf-item:active { background: var(--bn-tile2); }
  .hf-sheet a.is-on { background: rgba(60, 1, 175, .08); color: var(--hfs-indigo) !important; }
  .hf-sheet .hf-badge {
    margin-inline-start: auto; min-width: 20px; height: 19px; padding: 0 6px;
    border-radius: 999px; background: #EF4444; color: #fff;
    font-size: 10.5px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .hf-sheet-user {
    display: flex; align-items: center; gap: 11px;
    padding: 12px; border-radius: 14px; background: var(--bn-tile2);
    margin-bottom: 6px;
  }
  .hf-sheet-user img, .hf-sheet-user .hf-ini {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    object-fit: cover; display: grid; place-items: center;
    background: var(--hfs-indigo); color: #fff; font-weight: 800;
  }

  /* ---------- استانداردهای لمسی ---------- */
  .bn-btn, .btn, .nw-chip, .ux-chip, .nw-act { min-height: 44px; }
  .bn-row, .ledger-row, .ch-member { min-height: 52px; }
  input, textarea, select { font-size: 16px !important; min-height: 46px; }
  a, button { -webkit-tap-highlight-color: rgba(60, 1, 175, .12); touch-action: manipulation; }

  /* پنجره‌ها: ورقهٔ پایین‌کش */
  .modal-overlay, .ch-dialog { align-items: flex-end !important; padding: 0 !important; }
  .modal, .modal-box, .ch-dialog-box {
    width: 100% !important; max-width: 100% !important; margin: 0 !important;
    max-height: 88vh !important; overflow-y: auto !important;
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  }

  /* جدول‌ها: اسکرول در ظرف خودشان */
  .at-table-wrap, .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .at-table { min-width: 520px; font-size: 12px !important; }
}

/* دسکتاپ: عناصر موبایل هرگز دیده نشوند */
@media (min-width: 1024px) {
  .hf-tab, .hf-menu, .hf-more, .hf-avatar, .hf-sheet { display: none !important; }
}


/* ============================================================
   موبایل — اصلاح روی‌هم‌افتادگی (نسخهٔ سخت‌گیرانه)
   منوی کناری و همهٔ لایه‌های دسکتاپ حذف؛ محتوا یک جریان تک‌ستونه
   ============================================================ */
@media (max-width: 1023px) {
  /* منوی کناری: نه پنهان — کاملاً بی‌اثر (بعضی قواعد display را برمی‌گرداندند) */
  .sidebar, aside.sidebar, .sidebar-foot {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important; height: 0 !important;
    overflow: hidden !important; pointer-events: none !important;
  }

  /* پوسته: هر ساختاری (grid/flex) تک‌ستونه شود */
  .app-shell, body > .app-shell {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    width: 100% !important; max-width: 100vw !important;
  }
  .app-shell::before, .app-shell::after { display: none !important; }

  .main, .app-shell > .main {
    display: block !important;
    width: 100% !important; max-width: 100vw !important;
    margin: 0 !important; padding: 0 !important;
    transform: none !important; inset: auto !important;
  }

  /* هیچ لایهٔ ثابت/مطلقی از دسکتاپ نماند */
  .content > [style*="position:fixed"],
  .content > [style*="position: fixed"] { position: static !important; }

  /* نوار بالا: تک‌ردیف، بدون شکستن، اکشن‌ها فقط آواتار */
  .topbar {
    display: flex !important; flex-wrap: nowrap !important;
    align-items: center !important; gap: 10px !important;
    padding: 10px 14px !important; min-height: 56px !important;
    position: sticky !important; top: 0 !important; z-index: 60 !important;
    background: var(--bn-bg, #EEF1F7) !important;
  }
  /* تیتر می‌ماند؛ فقط اکشن‌های ثانویه پنهان می‌شوند */
  .topbar > div { flex: 1 1 auto; min-width: 0; }
  .topbar > .btn, .topbar > button:not(.hf-avatar), .topbar > a.btn { display: none !important; }
  .topbar h1 {
    display: block !important; margin: 0 !important;
    font-size: 16.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar h1::before { display: none !important; }
  .topbar-sub { display: none !important; }
  .topbar-actions { display: none !important; }
  .hf-avatar { display: grid !important; margin-inline-start: auto !important; order: 9; }

  /* محتوا: یک ستون، فاصلهٔ کف برای نوار پایین */
  .content {
    display: block !important;
    padding: 14px 14px calc(var(--hf-tab) + 16px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }
  .content > * { margin-bottom: 14px !important; }
  .content > *:last-child { margin-bottom: 0 !important; }

  /* فیلترهای اخبار: ردیف افقی اسکرول‌دار، نه توده‌ای روی هم */
  .nw-filters {
    display: flex !important; flex-wrap: nowrap !important;
    gap: 8px !important; overflow-x: auto !important;
    padding-bottom: 4px; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nw-filters::-webkit-scrollbar { display: none; }
  .nw-filters > * { flex: 0 0 auto !important; }
  .nw-filters > div {
    display: flex !important; flex-wrap: nowrap !important; gap: 8px !important;
    margin: 0 !important; width: auto !important;
  }
  .nw-chip { white-space: nowrap; }
  .nw-search, .ux-search {
    order: -1; width: 100% !important; max-width: none !important;
    flex: 0 0 auto !important; margin-bottom: 8px;
  }

  /* تصویر و ویدیو هرگز بیرون نزنند */
  img, video, iframe, canvas { max-width: 100% !important; height: auto !important; }
  #jitsi, #vm-preview { width: 100% !important; height: 46vh !important; min-height: 260px !important; }
}


/* ============================================================
   نظام طراحی همفکران — تایپوگرافی سیال فارسی، ریتم ۸pt،
   هندسهٔ اجزا، و چیدمان ضدسرریز.  Mobile-first.
   ============================================================ */
:root {
  /* ریتم ۸pt */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px;

  /* تایپوگرافی سیال — بدون جهش چیدمان */
  --t-h1: clamp(24px, 4.4vw, 48px);
  --t-h2: clamp(20px, 3.2vw, 32px);
  --t-h3: clamp(17px, 2.2vw, 22px);
  --t-body: clamp(14px, 1.05vw, 16px);
  --t-cap: 12px;

  /* فاصلهٔ سطر: فارسی به تنفس بیشتری نیاز دارد */
  --lh-body: 1.8;
  --lh-head: 1.35;

  /* هدف لمسی */
  --tap: 44px;
  --tap-desk: 40px;
}

/* ---------- تایپوگرافی ---------- */
body {
  font-size: var(--t-body) !important;
  line-height: var(--lh-body) !important;
  font-weight: 400;
  text-wrap: pretty;
}
h1, .hfs-h1 { font-size: var(--t-h1) !important; line-height: var(--lh-head) !important; font-weight: 900 !important; }
h2, .hfs-h2 { font-size: var(--t-h2) !important; line-height: var(--lh-head) !important; font-weight: 800 !important; }
h3, h4, .hfs-h3, .bn-tile-head h3, .card-head h3, .card-head h4 {
  font-size: var(--t-h3) !important; line-height: 1.4 !important; font-weight: 700 !important;
}
h1, h2, h3, h4 { text-wrap: balance; }
/* وزن‌های نازک برای فارسی ممنوع */
[style*="font-weight:100"], [style*="font-weight:200"], [style*="font-weight:300"],
.font-light, .font-thin { font-weight: 400 !important; }

/* ---------- ریتم فاصله ---------- */
.content { display: flex !important; flex-direction: column; gap: var(--s4); }
@media (min-width: 768px)  { .content { gap: var(--s6); padding: var(--s8) !important; } }
@media (min-width: 1024px) { .content { gap: var(--s8); padding: var(--s12) !important; } }

/* فاصله با gap، نه margin */
.bn-grid, .nw-grid, .bn-stack-2, .board, .letter-lanes, .at-stats {
  display: grid !important; gap: var(--s4) !important;
}
@media (min-width: 768px) {
  .bn-grid, .nw-grid { gap: var(--s6) !important; }
  .bn-col { gap: var(--s6) !important; }
}
.bn-tile-head, .card-head, .nw-actions, .ux-toolbar, .nw-filters { gap: var(--s2) !important; }
.bn-tile, .bn-inner, .nw-card { gap: var(--s3) !important; }
.nw-field-row, .at-filters { gap: var(--s4) !important; }
@media (min-width: 768px) { .nw-field-row { gap: var(--s6) !important; } }
@media (min-width: 768px) {
}
@media (hover: hover) and (min-width: 768px) {
  .bn-tile:hover, .nw-card:hover {
    box-shadow: 0 2px 6px rgba(19, 21, 44, .06), 0 20px 44px -24px rgba(60, 1, 175, .3) !important;
    transform: translateY(-2px);
  }
}

/* دکمه‌ها و فیلدها: هدف لمسی استاندارد */
.btn, .bn-btn, .nw-act, .nw-chip, .ux-chip, .chip-select,
input, textarea, select, .input, button {
  min-height: var(--tap);
  border-radius: 8px !important;
  font-family: inherit;
}
.nw-chip, .ux-chip, .bn-tag, .seal, .badge, .pill, .status, .bn-pill,
.ux-search, .nw-search, .hfs-nav-badge { border-radius: 999px !important; }
textarea { min-height: 96px; }
@media (min-width: 768px) {
  .btn, .bn-btn, .nw-act, input, select, .input { min-height: var(--tap-desk); }
  .nw-chip, .ux-chip { min-height: 36px; }
}

/* دکمهٔ اصلی: موبایل تمام‌عرض، دسکتاپ به اندازهٔ متن */
@media (max-width: 767px) {
  .bn-btn-purple, .bn-btn-orange, .btn-primary,
  form .btn-primary, form .bn-btn-purple { width: 100% !important; }
  .nw-form > div > div:last-child, .ch-dialog-box > div:last-child {
    display: flex !important; flex-direction: column-reverse !important; gap: var(--s2) !important;
  }
  .nw-form > div > div:last-child > *, .ch-dialog-box > div:last-child > * { width: 100% !important; }
}
@media (min-width: 768px) {
  .bn-btn-purple, .btn-primary { width: auto !important; }
}

/* ---------- چیدمان ضدسرریز ---------- */
html, body { overflow-x: hidden; max-width: 100%; }
table { max-width: 100%; }
.at-table-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* موبایل: همه‌چیز ستونی؛ دسکتاپ: کنارهم */
@media (max-width: 767px) {
  .bn-grid, .nw-grid, .bn-stack-2, .board, .letter-lanes, .at-stats, .ch-admin-grid,
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .nw-field-row, .at-filters { flex-direction: column !important; }
  .nw-field-row > *, .at-filters > * { width: 100% !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .bn-grid, .nw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1024px) {
  .bn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .nw-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; }
}

/* عرض بیشینهٔ مطالعه در نمایشگر پهن */
@media (min-width: 1600px) {
  .content { max-width: 1560px; margin-inline: auto; }
  .nw-article, .nw-form { max-width: 840px; }
}

/* ---------- ناحیهٔ امن موبایل ---------- */
@media (max-width: 1023px) {
  .content { padding: var(--s4) var(--s4) calc(96px + env(safe-area-inset-bottom)) !important; }
}