/* ——— MOBILE SAFETY NET ——— */
@media (max-width: 768px){
  /* رایج‌ترین رَپرها: هیچ‌کدام حق ندارد از عرض صفحه بزند بیرون */
  #main-wrapper,
  .layout-container,
  .region,
  .block,
  .content,
  .section,
  .messages,
  .tabs,
  .node__content,
  .field--name-body,
  .field--name-comment,
  .comment,
  .comment-form {
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* تب‌های بالای صفحه (login/register/…) باعث بیرون‌زدگی نشن */
  .tabs ul {
    display: flex;
    flex-wrap: wrap;              /* اگر جا نشد، بره خط بعد */
    gap: .5rem;
    padding: 0;
    margin: .5rem 0;
    list-style: none;
  }
  .tabs ul li a {
    display: inline-block;
    padding: .5rem .75rem;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;          /* هر تب خودش یک برچسب جمع‌وجور */
    max-width: 100%;
  }

  /* بنر/هدرهای تمام‌عرض که با 100vw می‌نویسن، رام‌شون کن */
  [style*="100vw"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* هر img با width اینلاین */
  img[width], img[style*="width"] {
    max-width: 100% !important; height: auto !important; display: block;
  }

  /* جدول و کد طولانی */
  pre, code { white-space: pre-wrap; word-break: break-word; max-width: 100%; }
  .table-wrap, .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table, .table-wrapper table { width: 100%; border-collapse: collapse; }

  /* نوار ادمین روی موبایل (وقتی لاگینی) */
  #toolbar-bar, .toolbar-tray {
    max-width: 100% !important; overflow-x: hidden !important;
  }
}
/* ===== FIX: comment area overflow on node pages ===== */

/* 0) اگر ستون اصلی flex باشد، بدون این خط بچه‌ها حق سرریز دارند */
@media (max-width: 768px){
  .layout-main .main-content,
  #main .main-content,
  #content.column.main-content { min-width: 0; }
}

/* 1) کل فیلد کامنت و هر کامنت از عرض صفحه نزند بیرون */
@media (max-width: 768px){
  .node .field--name-comment,
  .node .field--name-comment .field__items,
  .node .comment,
  .node .comment__content,
  .node .comment-form,
  .node .comment-comment-form {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
}

/* 2) متن‌های بلند، URL، pre/code در کامنت‌ها نشکنند */
@media (max-width: 768px){
  .node .comment,
  .node .comment__content { overflow-wrap:anywhere; word-break:break-word; }
  .node .comment pre,
  .node .comment code { white-space: pre-wrap; word-break: break-word; max-width:100%; }
  .node .comment pre { overflow-x:auto; }
}

/* 3) رسانه‌ها و iframe داخل دیدگاه‌ها سیال باشند */
@media (max-width: 768px){
  .node .comment img,
  .node .comment svg,
  .node .comment video,
  .node .comment canvas { display:block; max-width:100%; height:auto !important; }
  .node .comment iframe { width:100% !important; max-width:100% !important; border:0; }
}

/* 4) جدول داخل دیدگاه اسکرول افقی بگیرد، عرض صفحه را پهن نکند */
@media (max-width: 768px){
  .node .comment .table-wrap,
  .node .comment .table-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .node .comment table { width:100%; border-collapse:collapse; }
}

/* 5) تو‌در‌تویی کامنت‌ها در RTL از راست فاصله بگیرد، نه چپ (تا زنجیره پهن نشود) */
@media (max-width: 768px){
  html[dir="rtl"] .node .indented { margin-right:1rem; margin-left:0 !important; }
}

/* 6) ردیف لینک‌های عملیات (پاسخ/ویرایش/حذف) جمع‌وجور شود */
@media (max-width: 768px){
  .node .comment .links, .node .comment .links.inline { display:flex; flex-wrap:wrap; gap:.5rem; }
  .node .comment .links li { margin:0; }
}

/* 7) اگر قالب جایی min-width/100vw داده، داخل ناحیهٔ کامنت بی‌اثر کن */
@media (max-width: 768px){
  .node .field--name-comment [style*="100vw"],
  .node .field--name-comment [style*="min-width"] { max-width:100% !important; width:100% !important; }
}