/* ==========================================================================
   আলোচনা ফোরাম (Discussion Forum) — page styles.
   Self-contained like assets/ai-tutor.css: reads only the shared design
   tokens (custom properties prefixed "s-") so it matches the platform
   automatically, and reuses global component classes (.khata-sheet, .jrnl,
   .q, .btn/.btn-p, .notebook-view) rather than re-styling them. This is a
   real page in the view rail (S.view:'forum', js/app.js's viewForum()) —
   not a modal/dialog, so there is deliberately no scrim/fixed-panel/
   close-button chrome here. Two states share this stylesheet: a topic list
   (.forum-topics/.forum-topic-card) and a topic detail thread (.forum2-*).
   ========================================================================== */
.forum-view{ gap:var(--s5); }

/* ---- Sidebar entry point -------------------------------------------------
   Same footprint as .notebook-btn, but an outlined/"ghost" treatment
   instead of a third filled color — notebookBtn already owns the amber
   accent and resourcesBtn the brand blue, and status hues (fern/amber/
   vermilion) are reserved for state, not navigation, so the forum entry is
   differentiated by weight rather than by inventing a new accent. */
#forumBtn{
  background:var(--s-elev); color:var(--s-brand-h);
  border:1px solid var(--s-line-mid);
}
#forumBtn:hover, #forumBtn:active{
  background:var(--s-canvas); color:var(--s-brand-a); border-color:var(--s-brand);
}
#forumBtn.is-on{
  background:var(--s-brand-pale); color:var(--s-brand-a);
  border-color:var(--s-brand); box-shadow:var(--s-sh1);
}
#forumBtn.is-on::after{
  content:""; position:absolute; top:0; left:16px;
  width:28px; height:3px; border-radius:0 0 3px 3px;
  background:var(--s-brand);
}

/* ---- Topic list (.forum-view landing state) ----------------------------
   One card per discussion topic: icon, title/description, a comment-count
   badge, and a chevron — the whole card is the click target. */
.forum-topics{ display:flex; flex-direction:column; gap:10px; }
.forum-topic-card{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:16px; box-sizing:border-box; text-align:start;
  background:var(--s-elev); border:1px solid var(--s-line);
  border-radius:var(--r-lg); box-shadow:var(--s-sh1); cursor:pointer;
  font-family:var(--bn); transition:border-color var(--t-fast) var(--ease),
  background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.forum-topic-card:hover, .forum-topic-card:focus-visible{
  border-color:var(--s-brand); background:var(--s-brand-pale); box-shadow:var(--s-sh2);
}
.forum-topic-card:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--s-brand-soft), var(--s-sh1); }
.forum-topic-ico{
  flex:none; width:40px; height:40px; border-radius:var(--r-full);
  background:var(--s-brand-tint); color:var(--s-brand-a);
  display:grid; place-items:center;
}
.forum-topic-ico svg{ width:19px; height:19px; }
.forum-topic-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.forum-topic-t{ margin:0; font-size:var(--fs-small); font-weight:600; line-height:1.5; color:var(--s-tx); }
.forum-topic-d{ margin:0; font-size:var(--fs-small); line-height:1.75; color:var(--s-mute); }
.forum-topic-count{
  display:flex; align-items:center; gap:5px; margin:2px 0 0;
  font-size:var(--fs-caption); font-weight:600; color:var(--s-acc-tx);
}
.forum-topic-count svg{ width:13px; height:13px; }
.forum-topic-arrow{ flex:none; width:18px; height:18px; color:var(--s-mute); }

/* ---- Topic detail: back link ------------------------------------------- */
.forum-topic-back{
  display:inline-flex; align-items:center; gap:4px; align-self:flex-start;
  padding:6px 10px 6px 6px; margin-bottom:-4px; border:none; border-radius:var(--r-md);
  background:transparent; color:var(--s-brand-h); font-family:var(--bn);
  font-size:var(--fs-ui); font-weight:500; cursor:pointer;
  transition:background var(--t-fast) var(--ease);
}
.forum-topic-back:hover, .forum-topic-back:focus-visible{ background:var(--s-brand-soft); }
.forum-topic-back svg{ width:16px; height:16px; }

/* ---- Thread / posts ----------------------------------------------------- */
.forum2-thread{ display:flex; flex-direction:column; gap:10px; }
.forum2-post{
  background:var(--s-elev); border:1px solid var(--s-line);
  border-radius:var(--r-md); padding:14px 16px;
  box-shadow:var(--s-sh1);
}
.forum2-post.is-self{ border-color:var(--s-brand-tint); background:var(--s-brand-pale); }
.forum2-post.is-alt:not(.is-self){ background:var(--s-sunken); }
.forum2-post-h{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.forum2-av{
  width:36px; height:36px; flex:none; border-radius:var(--r-full);
  background:var(--s-brand-tint); color:var(--s-brand-a);
  display:grid; place-items:center; overflow:hidden;
  font-size:var(--fs-caption); font-weight:600;
}
.forum2-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.forum2-av svg{ width:18px; height:18px; }
.forum2-av.is-self{ background:var(--s-acc-soft); color:var(--s-acc-tx); }
.forum2-who{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
.forum2-who strong{ font-size:var(--fs-ui); font-weight:500; line-height:1.5; color:var(--s-tx); }
.forum2-meta{ font-size:var(--fs-caption); line-height:1.5; color:var(--s-mute); }
.forum2-body{ margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body); padding-inline-start:46px; white-space:pre-wrap; }
.forum2-del{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border:none; border-radius:var(--r-full);
  background:transparent; color:var(--s-mute); cursor:pointer;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.forum2-del:hover{ background:var(--s-bad-soft); color:var(--s-bad-tx); }
.forum2-del svg{ width:15px; height:15px; }

/* ---- Divider + own thread ------------------------------------------------ */
.forum2-divider{
  display:flex; align-items:center; gap:8px; margin:6px 0 0;
  font-size:var(--fs-caption); font-weight:500;
  color:var(--s-acc-tx);
}
.forum2-divider::after{ content:""; flex:1 1 auto; height:1px; background:var(--s-line-mid); }
.forum2-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-full);
  background:var(--s-acc-soft); color:var(--s-acc-tx); font-size:var(--fs-caption); font-weight:600;
}
.forum2-empty{
  display:flex; align-items:center; gap:8px; margin:0; padding:16px;
  font-size:var(--fs-ui); color:var(--s-mute); background:var(--s-elev);
  border:1px dashed var(--s-line-mid); border-radius:var(--r-lg);
}
.forum2-empty svg{ width:16px; height:16px; flex:none; }

/* ---- Composer ------------------------------------------------------------ */
.forum2-composer{ margin-top:2px; }
.forum2-task-h{
  display:flex; align-items:center; gap:8px; margin:0 0 8px;
  font-size:var(--fs-caption); font-weight:600;
  color:var(--s-acc-tx);
}
.forum2-task-h svg{ width:16px; height:16px; }
.forum2-name-input{
  width:100%; padding:10px 13px; box-sizing:border-box;
  background:var(--s-sunken); color:var(--s-tx);
  border:1px solid var(--s-line); border-radius:var(--r-lg);
  font-family:var(--bn); font-size:var(--fs-ui);
  transition:border-color var(--t-fast) var(--ease), background var(--t-base) var(--ease);
}
.forum2-name-input::placeholder{ color:var(--s-mute); }
.forum2-name-input:focus{
  outline:none; background:var(--s-elev); border-color:var(--s-brand);
  box-shadow:0 0 0 4px var(--s-brand-soft);
}
.forum2-submit{ align-self:flex-start; }
.forum2-submit:disabled{ opacity:.5; cursor:default; }

/* ---- Demo notice ----------------------------------------------------------- */
.forum2-notice{
  display:flex; align-items:flex-start; gap:8px; margin:0;
  font-size:var(--fs-caption); line-height:1.75; color:var(--s-mute);
  padding-top:4px;
}
.forum2-notice svg{ width:15px; height:15px; flex:none; margin-top:1px; color:var(--s-acc); }