/* HOSHNAB FINAL STABILITY + MOBILE + COMMENTS LAYER
   Loaded last so legacy page-specific CSS remains functional while these
   safe constraints prevent horizontal overflow on phones.
*/
html{width:100%;max-width:100%;overflow-x:hidden;scroll-behavior:smooth}
body{width:100%;max-width:100%;min-width:0;overflow-x:hidden;margin:0}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas,iframe,embed,object{max-width:100%;height:auto}
img{display:block}
iframe{border:0}
pre{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;white-space:pre;direction:ltr;text-align:left}
code{overflow-wrap:anywhere}
table{max-width:100%;border-collapse:collapse}
/* Never let a long URL, code token, Persian/Latin mixed string push the page wider. */
p,h1,h2,h3,h4,h5,h6,a,li,td,th,span,div{overflow-wrap:anywhere;word-break:normal}
input,textarea,select,button{max-width:100%;font:inherit}
textarea{resize:vertical}
button{cursor:pointer}

/* Common layout containers used across the legacy pages. */
.container,.main-container,.content-container,.article-container,.page-container,.wrapper,.main-wrapper{width:100%;max-width:1200px;margin-left:auto;margin-right:auto;min-width:0}
.article-content,.article-body,.content,.main-content,.post-content{min-width:0}

/* Tables and comparison blocks: scroll inside themselves, never the page. */
.table-responsive,.comparison-table,.table-container,.responsive-table{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-responsive table,.comparison-table table,.table-container table,.responsive-table table{min-width:600px}

/* Code blocks are the most common mobile overflow source. */
pre[class],.code-block,.code-container,.highlight,.syntaxhighlighter{width:100%;max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch}

/* Forms: no fixed/min widths on phones. */
form,.newsletter-form,.comment-form{max-width:100%;min-width:0}
input,textarea,select{width:100%;min-width:0}

/* ===================== COMMENTS ===================== */
.comments-section{width:100%;max-width:900px;margin:36px auto 0;padding:30px;background:var(--comment-bg,#fff);border:1px solid rgba(15,23,42,.08);border-radius:22px;box-shadow:0 12px 35px rgba(15,23,42,.08);direction:rtl;text-align:right;min-width:0}
.comments-title{margin:0 0 8px!important;font-size:1.55rem!important;line-height:1.6!important;font-weight:800!important;color:var(--comment-title,#111827)!important}
.comments-count{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:30px;padding:0 8px;border-radius:999px;background:rgba(99,102,241,.10);color:#4f46e5;font-size:.85em}
.comments-subtitle{margin:0 0 22px!important;color:#64748b!important;font-size:.95rem;line-height:1.9}
.comment-form{padding:22px;border-radius:18px;background:linear-gradient(180deg,#f8fafc,#fff);border:1px solid #e5e7eb;margin:0 0 24px;min-width:0}
.comment-form-note{margin:0 0 18px;color:#475569;font-size:.9rem;line-height:1.8}
.comment-input-group{margin:0 0 16px;min-width:0}
.comment-label{display:block!important;margin:0 0 8px!important;font-weight:700!important;color:#334155!important;font-size:.95rem!important}
.comment-input,.comment-textarea{display:block!important;width:100%!important;min-width:0!important;padding:13px 15px!important;border:1px solid #cbd5e1!important;border-radius:13px!important;background:#fff!important;color:#0f172a!important;box-shadow:none!important;outline:none!important;font-size:16px!important;line-height:1.7!important}
.comment-input:focus,.comment-textarea:focus{border-color:#6366f1!important;box-shadow:0 0 0 4px rgba(99,102,241,.12)!important}
.comment-textarea{min-height:130px!important}
.comment-field-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:7px;color:#94a3b8;font-size:.78rem}
.comment-char-count{font-variant-numeric:tabular-nums}
.comment-error-message{display:none;margin:10px 0;padding:10px 13px;border-radius:11px;background:#fef2f2;color:#b91c1c;font-size:.88rem;line-height:1.7}
.comment-error-message.show{display:block}
.comment-submit-btn{display:inline-flex!important;align-items:center;justify-content:center;min-height:48px;padding:11px 22px!important;border:0!important;border-radius:13px!important;background:linear-gradient(135deg,#4f46e5,#7c3aed)!important;color:#fff!important;font-weight:800!important;box-shadow:0 8px 20px rgba(79,70,229,.20)!important}
.comment-submit-btn:hover{transform:translateY(-1px)}
.comment-submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.comments-list{display:grid;gap:14px;min-width:0}
.comment-item{width:100%;min-width:0;padding:20px!important;border:1px solid #e5e7eb!important;border-radius:17px!important;background:#fff!important;box-shadow:0 7px 20px rgba(15,23,42,.055)!important;border-right:4px solid #6366f1!important}
.comment-header{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;flex-wrap:wrap!important;margin:0 0 12px!important}
.comment-author{display:flex!important;align-items:center!important;gap:10px!important;min-width:0;font-weight:800!important;color:#334155!important}
.comment-author-avatar{flex:0 0 40px;width:40px!important;height:40px!important;border-radius:50%!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;background:linear-gradient(135deg,#6366f1,#8b5cf6)!important;color:#fff!important;font-weight:800!important}
.comment-date{color:#94a3b8!important;font-size:.78rem!important;white-space:normal!important}
.comment-text{margin:0!important;color:#475569!important;font-size:.96rem!important;line-height:2!important;overflow-wrap:anywhere!important}
.loading-comments,.no-comments{margin:0;padding:20px;border-radius:14px;background:#f8fafc;color:#64748b;text-align:center;line-height:1.9}

/* Dark mode used by the existing site JS. */
body.dark-mode .comments-section{background:#151827!important;border-color:rgba(255,255,255,.08)!important;box-shadow:0 12px 35px rgba(0,0,0,.25)}
body.dark-mode .comments-title{color:#f8fafc!important}
body.dark-mode .comments-subtitle,body.dark-mode .comment-form-note{color:#a8b0c0!important}
body.dark-mode .comment-form{background:#1b2030!important;border-color:#30384a!important}
body.dark-mode .comment-label,body.dark-mode .comment-author{color:#e5e7eb!important}
body.dark-mode .comment-input,body.dark-mode .comment-textarea{background:#111522!important;color:#f8fafc!important;border-color:#3b455c!important}
body.dark-mode .comment-item{background:#1b2030!important;border-color:#30384a!important}
body.dark-mode .comment-text{color:#d1d5db!important}
body.dark-mode .loading-comments,body.dark-mode .no-comments{background:#1b2030;color:#a8b0c0}

/* Mobile: deliberately conservative; preserve desktop designs while removing overflow. */
@media (max-width:768px){
  .container,.main-container,.content-container,.article-container,.page-container,.wrapper,.main-wrapper{padding-left:12px!important;padding-right:12px!important}
  .article-content,.article-body,.content,.main-content,.post-content{width:100%!important;min-width:0!important}
  h1{font-size:clamp(1.35rem,5.8vw,2rem);line-height:1.55;max-width:100%}
  h2{font-size:clamp(1.15rem,4.8vw,1.55rem);line-height:1.6}
  h3{font-size:clamp(1.05rem,4.3vw,1.3rem);line-height:1.6}
  .comments-section{margin-top:26px;padding:18px 14px;border-radius:17px}
  .comments-title{font-size:1.25rem!important}
  .comment-form{padding:16px 12px;border-radius:14px}
  .comment-item{padding:16px 13px!important;border-right-width:3px!important}
  .comment-header{align-items:flex-start!important}
  .comment-submit-btn{width:100%!important}
  .comment-field-meta{font-size:.74rem}
  .related-articles,.hn-related-grid{grid-template-columns:1fr!important;width:100%;min-width:0}
  .share-buttons,.article-meta{max-width:100%;flex-wrap:wrap}
}
@media (max-width:480px){
  .container,.main-container,.content-container,.article-container,.page-container,.wrapper,.main-wrapper{padding-left:9px!important;padding-right:9px!important}
  .comments-section{padding:15px 10px}
  .comment-input,.comment-textarea{font-size:16px!important}
  .comment-item{padding:14px 11px!important}
  pre{font-size:.82rem;line-height:1.65}
}