/* ==========================================================================
   TBG Community - de draadweergave
   --------------------------------------------------------------------------
   Alleen actief op de pagina van een geopend bericht, en alleen als de
   weergave aan staat. Alles hangt aan body.tbg_single_on, dus de feed,
   de spaces en de rest van de portal blijven onaangeroerd.

   Uitgangspunten
   - compact: zo veel mogelijk gesprek op een scherm, weinig lucht
   - een leeskolom, niet de volle breedte, want lange regels lezen slecht
   - de vraag domineert, de reacties volgen, het antwoordveld staat altijd klaar
   - antwoorden van Team TBG zijn te herkennen zonder dat het schreeuwt
   - op mobiel minder omlijsting en een reageerknop die meeloopt
   ========================================================================== */

body.tbg_single_on {
  --tbg-kolom: 42rem;          /* ongeveer 66 tekens */
  --tbg-rand:  var(--fcom-primary-border, #e3e8ee);
  --tbg-lijn:  var(--fcom-secondary-border, #eef1f5);
  --tbg-vlak:  var(--fcom-secondary-bg, #f6f7f9);
  --tbg-wit:   var(--fcom-primary-bg, #fff);
  --tbg-tekst: var(--fcom-primary-text, #1a2320);
  --tbg-grijs: var(--fcom-secondary-text, #5b6b62);
  --tbg-zacht: var(--fcom-text-off, #8a958f);
  --tbg-accent: var(--fcom-text-link, #0d9668);
}

/* --------------------------------------------------------------------------
   1. De vraag
   -------------------------------------------------------------------------- */
body.tbg_single_on .fcom_main .feed {
  background: var(--tbg-wit);
  border: 1px solid var(--tbg-rand);
  border-radius: 12px;
  overflow: hidden;
}

body.tbg_single_on .fcom_main .feed > .feed_header {
  padding: 14px 18px 0;
  gap: 10px;
}
body.tbg_single_on .fcom_main .feed_user .fcom_user_avatar img {
  width: 36px;
  height: 36px;
  border-radius: 999px;
}
body.tbg_single_on .fcom_main .feed_meta_info {
  font-size: 13.5px;
  color: var(--tbg-zacht);
}

/* de titel krijgt het gewicht van een paginakop, want dat is het ook */
body.tbg_single_on .fcom_main .feed > .feed_body {
  padding: 2px 18px 14px;
}
body.tbg_single_on .fcom_main .feed_title,
body.tbg_single_on .fcom_main .feed > .feed_body > h1,
body.tbg_single_on .fcom_main .feed_texts.feed_title_big {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 8px 0 10px;
  max-width: var(--tbg-kolom);
}

/* --------------------------------------------------------------------------
   2. De tekst zelf: dit is waar mensen komen om te lezen
   -------------------------------------------------------------------------- */
body.tbg_single_on .fcom_main .feed > .feed_body .feed_md_content {
  max-width: var(--tbg-kolom);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tbg-tekst);
}
body.tbg_single_on .fcom_main .feed_md_content p { margin: 0 0 10px; }
body.tbg_single_on .fcom_main .feed_md_content p:last-child { margin-bottom: 0; }
body.tbg_single_on .fcom_main .feed_md_content h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin: 18px 0 6px;
}
body.tbg_single_on .fcom_main .feed_md_content h3 {
  font-size: 17.5px;
  font-weight: 700;
  margin: 16px 0 5px;
}
body.tbg_single_on .fcom_main .feed_md_content ul,
body.tbg_single_on .fcom_main .feed_md_content ol {
  margin: 0 0 10px;
  padding-left: 20px;
}
body.tbg_single_on .fcom_main .feed_md_content li { margin-bottom: 3px; }
body.tbg_single_on .fcom_main .feed_md_content a {
  color: var(--tbg-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
body.tbg_single_on .fcom_main .feed_md_content blockquote {
  margin: 12px 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--tbg-accent);
  color: var(--tbg-grijs);
}
body.tbg_single_on .fcom_main .feed_md_content img,
body.tbg_single_on .fcom_main .feed_media,
body.tbg_single_on .fcom_main .fcom_media {
  border-radius: 10px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   3. De balk onder de vraag
   -------------------------------------------------------------------------- */
body.tbg_single_on .fcom_main .feed > .feed_footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  margin: 0;
  border-top: 1px solid var(--tbg-lijn);
  background: var(--tbg-vlak);
}
body.tbg_single_on .fcom_main .feed > .feed_footer .el-button {
  border-radius: 8px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. De reacties
   -------------------------------------------------------------------------- */
body.tbg_single_on .fcom_main .feed_comments {
  counter-reset: tbg_reactie;
  border-top: 0;
  margin-top: 16px;
  padding-top: 0;
  max-width: var(--tbg-kolom);
}

/* kop boven de reacties, zodat je ziet waar de vraag ophoudt */
body.tbg_single_on .fcom_main .feed_comments::before {
  content: "Reacties";
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tbg-zacht);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--tbg-lijn);
  margin-bottom: 2px;
}

body.tbg_single_on .fcom_main .each_comment {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 0;
  margin: 0;
  border-bottom: 1px solid var(--tbg-lijn);
  scroll-margin-top: 90px;
}
body.tbg_single_on .fcom_main .each_comment:last-child { border-bottom: 0; }

body.tbg_single_on .fcom_main .each_comment .fcom_user_avatar img {
  width: 32px;
  height: 32px;
  border-radius: 999px;
}

body.tbg_single_on .fcom_main .comment_wrap {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
}
body.tbg_single_on .fcom_main .comment_text { padding: 0; background: none; }

body.tbg_single_on .fcom_main .comment_text_head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 2px;
  padding: 0;
  background: none;
  border: 0;
}
body.tbg_single_on .fcom_main .comment_text_head_name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--tbg-tekst);
}
body.tbg_single_on .fcom_main .comment_text_head_time {
  font-size: 12.5px;
  color: var(--tbg-zacht);
}
/* volgnummer rechts, rustig en alleen op groot scherm */
body.tbg_single_on .fcom_main .comment_text_head::after {
  counter-increment: tbg_reactie;
  content: "#" counter(tbg_reactie);
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--tbg-zacht);
  font-variant-numeric: tabular-nums;
}

body.tbg_single_on .fcom_main .comment_text_body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--tbg-tekst);
  max-width: none;
}
body.tbg_single_on .fcom_main .comment_text_body p { margin: 0 0 7px; }
body.tbg_single_on .fcom_main .comment_text_body p:last-child { margin-bottom: 0; }

/* 4b. Antwoorden binnen een reactie: geleidelijn, geen extra kaders */
body.tbg_single_on .fcom_main .child_reply_wrap {
  margin: 4px 0 0 42px;
  padding-left: 14px;
  border-left: 2px solid var(--tbg-lijn);
}
body.tbg_single_on .fcom_main .child_reply_wrap .each_comment {
  padding: 9px 0;
  border-bottom: 0;
}
body.tbg_single_on .fcom_main .child_reply_wrap .fcom_user_avatar img {
  width: 26px;
  height: 26px;
}
body.tbg_single_on .fcom_main .child_reply_wrap .comment_text_head::after { content: none; }

/* 4c. Een reactie van het team is te herkennen zonder dat het opvalt */
body.tbg_single_on .fcom_main .each_comment.tbg_van_team {
  background: linear-gradient(90deg,
              var(--fcom-active-bg, rgba(16, 185, 129, .07)) 0%,
              transparent 60%);
  border-radius: 10px;
  padding-left: 12px;
  margin-left: -12px;
  box-shadow: inset 3px 0 0 var(--tbg-accent);
}

/* 4d. Actieknoppen onder een reactie */
body.tbg_single_on .fcom_main .reply_btn {
  margin: 4px 0 0;
  padding: 2px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--tbg-grijs);
  background: none;
  border: 0;
}
body.tbg_single_on .fcom_main .reply_btn:hover { color: var(--tbg-accent); }

/* --------------------------------------------------------------------------
   5. Het antwoordveld: het belangrijkste element op de pagina
   -------------------------------------------------------------------------- */
body.tbg_single_on .fcom_main .feed_commenting {
  max-width: var(--tbg-kolom);
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--tbg-lijn);
}
body.tbg_single_on .fcom_main .feed_commenting::before {
  content: "Jouw reactie";
  display: block;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tbg-zacht);
}
body.tbg_single_on .fcom_main .feed_comment_input,
body.tbg_single_on .fcom_main .feed_commenting .fcom_editor,
body.tbg_single_on .fcom_main .fcom_md_editor {
  border: 1px solid var(--tbg-rand);
  border-radius: 10px;
  background: var(--tbg-wit);
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.tbg_single_on .fcom_main .feed_comment_input:focus-within,
body.tbg_single_on .fcom_main .feed_commenting .fcom_editor:focus-within,
body.tbg_single_on .fcom_main .fcom_md_editor:focus-within {
  border-color: var(--tbg-accent);
  box-shadow: 0 0 0 3px var(--fcom-active-bg, rgba(16, 185, 129, .12));
}
body.tbg_single_on .fcom_main .feed_commenting .editor {
  font-size: 15px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   6. Mobiel
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body.tbg_single_on .fcom_main .feed {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  body.tbg_single_on .fcom_main .feed > .feed_header { padding: 16px 16px 0; }
  body.tbg_single_on .fcom_main .feed > .feed_body   { padding: 4px 16px 16px; }
  body.tbg_single_on .fcom_main .feed > .feed_footer { padding: 10px 12px; }

  body.tbg_single_on .fcom_main .feed_title,
  body.tbg_single_on .fcom_main .feed_texts.feed_title_big {
    font-size: 21px;
  }
  body.tbg_single_on .fcom_main .feed > .feed_body .feed_md_content {
    font-size: 16.5px;
    line-height: 1.65;
  }

  body.tbg_single_on .fcom_main .each_comment { gap: 10px; padding: 14px 0; }
  body.tbg_single_on .fcom_main .each_comment .fcom_user_avatar img { width: 32px; height: 32px; }
  body.tbg_single_on .fcom_main .comment_text_head::after { content: none; }
  body.tbg_single_on .fcom_main .child_reply_wrap {
    margin-left: 16px;
    padding-left: 12px;
  }
  body.tbg_single_on .fcom_main .each_comment.tbg_van_team {
    margin-left: 0;
    padding-left: 10px;
  }
}

/* --------------------------------------------------------------------------
   7. Reageerknop die meeloopt op mobiel
   Verschijnt pas als het antwoordveld uit beeld is, dus hij staat nooit
   in de weg terwijl je aan het typen bent.
   -------------------------------------------------------------------------- */
.tbg_reageer_balk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: none;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--fcom-primary-bg, #fff);
  border-top: 1px solid var(--fcom-primary-border, #e3e8ee);
}
.tbg_reageer_balk button {
  display: block;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: var(--fcom-primary-button, #10b981);
  color: var(--fcom-primary-button-text, #fff);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
@media (max-width: 640px) {
  body.tbg_single_on.tbg_reageer_zichtbaar .tbg_reageer_balk { display: block; }
  body.tbg_single_on.tbg_reageer_zichtbaar .fcom_main { padding-bottom: 70px; }
}