/* ====== Timeline / Verlauf ====== */
/* passt zu reply.php mit: .bo-timeline .bo-day .bo-item .bo-pin .entry .headline .card … */

#bolist-panel .bo-timeline{
  /* Position der vertikalen Schiene */
  --rail-x: 56px;
  position: relative;
  margin-top: 14px;
  max-height: none;
  padding: 0 8px 0 calc(var(--rail-x) + 28px); /* Platz links für Rail + Pin */
  padding-bottom: 20px;
}

/* letzter Eintrag zusätzlich absetzen (optional) */
#bolist-panel .bo-item:last-of-type{
  margin-bottom: 2rem;
}
/* Vertikale Rail */
#bolist-panel .bo-timeline::before{
  content:"";
  position:absolute; left: var(--rail-x); top: 0; bottom: 0;
  width: 2px; background: #E7ECF3;
}

/* ===== Tagetrenner (Badge mittig auf der Rail) ===== */
#bolist-panel .bo-day{ position: relative; margin: 18px 0 16px; min-height: 10px; }
#bolist-panel .bo-day .bo-day-chip{
  position: absolute; top: 0;
  transform: translate(-50%, -50%);
  z-index: 3;
  background:#F1F5F9; color:#2b3a4b;
  font-weight:700; font-size:12px; line-height:22px;
  padding: 0 12px; border:1px solid #E5E7EB; border-radius:999px;
  box-shadow: 0 2px 6px rgba(16,24,40,.04);
  white-space: nowrap;
  left: -22px;
}

/* ===== Eintrag ===== */
#bolist-panel .bo-item{ position: relative; margin: 0 0 16px; }

/* Pin (runder Knoten) an der Rail */
#bolist-panel .bo-item .bo-pin {
    position: absolute;
    top: 12px;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: grid
;
    place-items: center;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    box-shadow: 0 0 0 3px #fff;
    z-index: 3;
    left: -27px;
}
#bolist-panel .bo-item .bo-pin i{ font-size: 11px; }

/* Pin-Farben je Typ */
#bolist-panel .bo-item.is-reply    .bo-pin{ background:#3B82F6; } /* blau */
#bolist-panel .bo-item.is-accepted .bo-pin{ background:#22C55E; } /* grün */
#bolist-panel .bo-item.is-rejected .bo-pin{ background:#EF4444; } /* rot  */
#bolist-panel .bo-item.is-open     .bo-pin{ background:#9CA3AF; } /* grau */

/* Wrapper rechts neben der Rail */
#bolist-panel .bo-item .entry{ position: relative; }

/* Headline außerhalb der Card */
#bolist-panel .bo-item .headline{
  display:flex; align-items:baseline; gap:6px;
  margin: -2px 0 8px 0;
  font-size:14px; color:#0f172a;
}
#bolist-panel .bo-item .headline .who{ font-weight:700; }
#bolist-panel .bo-item .headline .did{ color:#334155; }
#bolist-panel .bo-item .headline .time{
  margin-left:auto; font-size:12px; color:#6B7280; font-weight:600; white-space:nowrap;
}

/* ===== Card mit Details ===== */
#bolist-panel .bo-item .card{
  position: relative;
  display:grid; grid-template-columns: 40px 1fr; gap:12px;
  background:#fff; border:1px solid #E6E9EF; border-radius:12px;
  padding:12px 14px;
  box-shadow: 0 2px 10px rgba(15,23,42,.04);
}

/* Akzent-Leiste links (Typfarbe) */
#bolist-panel .bo-item .card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  border-radius:12px 0 0 12px; background:#CBD5E1;
}
#bolist-panel .bo-item.is-reply    .card::before{ background:#3B82F6; }
#bolist-panel .bo-item.is-accepted .card::before{ background:#22C55E; }
#bolist-panel .bo-item.is-rejected .card::before{ background:#EF4444; }
#bolist-panel .bo-item.is-open     .card::before{ background:#9CA3AF; }

/* leichte Tönung pro Typ (sicher per !important) */
/*
#bolist-panel .bo-item.is-reply    .card{ background:#F7FBFF !important; }
#bolist-panel .bo-item.is-accepted .card{ background:#F5FCF7 !important; }
#bolist-panel .bo-item.is-rejected .card{ background:#FFF7F7 !important; }
#bolist-panel .bo-item.is-open     .card{ background:#F9FAFB !important; }
*/
/* Avatar */
#bolist-panel .bo-item .ava .avatar{
  width:40px; height:40px; border-radius:999px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

/* Text + Chips */
#bolist-panel .bo-item .text{ margin:4px 0 8px; color:#0f172a; }
#bolist-panel .bo-item .chips{ display:flex; flex-wrap:wrap; gap:8px; }
#bolist-panel .bo-item .chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 10px; border-radius:999px;
  font-weight:600; font-size:12px; color:#374151;
  background:#F3F4F6; border:1px solid #E5E7EB;
}
#bolist-panel .bo-item .chip i{ font-size:12px; }

/* leerer Zustand */
#bolist-panel .bo-empty{ margin-left: calc(var(--rail-x) + 28px); color:#94a3b8; font-style:italic; }

/* Mobil-Feinschliff */
@media (max-width: 700px){
  #bolist-panel .bo-timeline{ --rail-x: 44px; padding-left: calc(var(--rail-x) + 22px); }
  #bolist-panel .bo-item .headline{ flex-direction: column; align-items:flex-start; gap:4px; }
}
/* 1) Kill the inner scroller: let the page handle scrolling */
#bolist-panel .thread-scroll,
#bolist-panel .thread-body,
#bolist-panel .bo-thread,
#bolist-panel .bo-thread-wrap {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* If a custom scrollbar was used, hide it defensively */
#bolist-panel .thread-scroll::-webkit-scrollbar { display: none; }
#bolist-panel .thread-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* 2) Bottom spacing for the very last item / whole timeline */
#bolist-panel .bo-thread,
#bolist-panel .bo-timeline,
#bo-thread-timeline {
  padding-bottom: 2rem;   /* = ~2em spacing to the page bottom */
}
/* Den inneren Scroller vollständig deaktivieren */
#bolist-panel,
#bolist-panel .bo-panel,
#bolist-panel .bo-panel__body,
#bolist-panel .bo-thread,
#bolist-panel .bo-thread-wrap,
#bolist-panel .bo-thread-timeline,
#bolist-panel .thread-scroll,
#bolist-panel .thread-body {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Falls ein custom Scrollbar gestylt war: unsichtbar machen (defensiv) */
#bolist-panel .thread-scroll::-webkit-scrollbar { display: none; }
#bolist-panel .thread-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* Unterster Abstand zum Seitenrand (~ 2em) */
#bolist-panel .bo-thread-timeline,
#bolist-panel .bo-thread-wrap {
  padding-bottom: 2rem; /* ≈ 2em */
}

/* Falls deine Items einzelne Cards sind: den allerletzten Eintrag zusätzlich absetzen */
#bolist-panel .bo-thread-timeline > *:last-child,
#bolist-panel .bo-thread-wrap > *:last-child {
  margin-bottom: 2rem;
}