/* sh-chatter — Odoo-inspiriertes Verlauf/Notizen-Panel fuer Beleg-Detailseiten.
   Self-contained; nutzt sh-design-system CSS-Variablen mit Fallbacks. */

.sh-chatter {
  display: flex;
  flex-direction: column;
  background: var(--sh-surface, #fff);
  border: 1px solid var(--sh-border, #e4e7ec);
  border-radius: var(--sh-radius, 10px);
  overflow: hidden;
  font-size: .85rem;
}

.sh-chatter__head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--sh-border, #e4e7ec);
  background: var(--sh-surface-2, #f9fafb);
}
.sh-chatter__title { font-weight: 700; color: var(--sh-text, #101828); font-size: .8rem; }
.sh-chatter__tabs { display: inline-flex; gap: .15rem; }
.sh-chatter__tab {
  border: none; background: transparent; cursor: pointer;
  padding: .25rem .55rem; border-radius: 6px; font-size: .74rem; font-weight: 600;
  color: var(--sh-text-muted, #667085);
}
.sh-chatter__tab:hover { background: var(--sh-surface, #fff); }
.sh-chatter__tab.is-active { background: var(--sh-accent-soft, #e7e0fb); color: var(--sh-accent, #6941c6); }

.sh-chatter__composer { padding: .7rem .8rem; border-bottom: 1px solid var(--sh-border, #e4e7ec); }
.sh-chatter__input {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 2.4rem;
  border: 1px solid var(--sh-border, #d0d5dd); border-radius: 8px; padding: .5rem .6rem;
  font: inherit; font-size: .85rem; color: var(--sh-text, #101828);
}
.sh-chatter__input:focus { outline: none; border-color: var(--sh-accent, #6941c6); box-shadow: 0 0 0 3px var(--sh-accent-soft, #e7e0fb); }
.sh-chatter__composer-actions { display: flex; justify-content: flex-end; margin-top: .5rem; }

.sh-chatter__feed { list-style: none; margin: 0; padding: .5rem .8rem; max-height: 60vh; overflow-y: auto; }
.sh-chatter__loading, .sh-chatter__empty { color: var(--sh-text-muted, #667085); padding: .6rem .2rem; font-style: italic; }

.sh-chatter__item { display: flex; gap: .6rem; padding: .55rem 0; border-bottom: 1px dashed var(--sh-border, #eceff3); }
.sh-chatter__item:last-child { border-bottom: none; }

.sh-chatter__avatar {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700; color: #fff;
  background: var(--sh-accent, #6941c6);
}
.sh-chatter__avatar--act { background: var(--sh-text-muted, #98a2b3); }

.sh-chatter__content { flex: 1 1 auto; min-width: 0; }
.sh-chatter__meta { display: flex; align-items: baseline; gap: .5rem; }
.sh-chatter__who { font-weight: 700; color: var(--sh-text, #101828); font-size: .78rem; }
.sh-chatter__when { color: var(--sh-text-muted, #98a2b3); font-size: .7rem; }
.sh-chatter__body { color: var(--sh-text, #344054); margin-top: .15rem; line-height: 1.4; word-wrap: break-word; }
.sh-chatter__act { color: var(--sh-text-muted, #667085); margin-top: .15rem; font-size: .8rem; }
.sh-chatter__item--activity .sh-chatter__who { font-weight: 600; }

.sh-chatter--err { padding: 1rem; color: var(--sh-danger, #d92d20); }

/* --- Geplante Aktivitaeten (Odoo „Schedule Activity", Tier 3) --- */
.sh-chatter__planbar {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem; border-bottom: 1px solid var(--sh-border, #e4e7ec);
}
.sh-chatter__planbtn {
  border: 1px dashed var(--sh-border, #d0d5dd); background: transparent; cursor: pointer;
  padding: .3rem .7rem; border-radius: 8px; font-size: .76rem; font-weight: 700;
  color: var(--sh-accent, #6941c6);
}
.sh-chatter__planbtn:hover { background: var(--sh-accent-soft, #f1edfb); border-color: var(--sh-accent, #6941c6); }

.sh-chatter__planform {
  display: flex; flex-direction: column; gap: .45rem;
  padding: .7rem .8rem; border-bottom: 1px solid var(--sh-border, #e4e7ec);
  background: var(--sh-surface-2, #f9fafb);
}
.sh-chatter__planform[hidden] { display: none; }
.sh-chatter__planrow { display: flex; gap: .45rem; }
.sh-chatter__planrow > .sh-chatter__planinput { flex: 1 1 0; min-width: 0; }
.sh-chatter__planinput {
  box-sizing: border-box; width: 100%;
  border: 1px solid var(--sh-border, #d0d5dd); border-radius: 8px; padding: .45rem .55rem;
  font: inherit; font-size: .82rem; color: var(--sh-text, #101828); background: #fff;
}
.sh-chatter__planinput:focus { outline: none; border-color: var(--sh-accent, #6941c6); box-shadow: 0 0 0 3px var(--sh-accent-soft, #e7e0fb); }
.sh-chatter__planactions { display: flex; justify-content: flex-end; gap: .4rem; }

.sh-chatter__actlist { list-style: none; margin: 0; padding: .4rem .8rem; }
.sh-chatter__actitem {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .55rem; margin-bottom: .35rem;
  border: 1px solid var(--sh-border, #eceff3); border-radius: 8px;
  background: var(--sh-surface, #fff);
}
.sh-chatter__actitem:last-child { margin-bottom: 0; }
.sh-chatter__acticon { flex: 0 0 auto; font-size: 1rem; line-height: 1; }
.sh-chatter__actmain { flex: 1 1 auto; min-width: 0; }
.sh-chatter__actsummary { font-weight: 600; color: var(--sh-text, #101828); font-size: .82rem; word-wrap: break-word; }
.sh-chatter__actmeta { display: flex; align-items: center; gap: .5rem; margin-top: .12rem; }
.sh-chatter__actwho { color: var(--sh-text-muted, #667085); font-size: .72rem; }
.sh-chatter__due { font-size: .7rem; font-weight: 700; padding: .08rem .4rem; border-radius: 999px; white-space: nowrap; }
.sh-chatter__due.is-overdue { background: #fee4e2; color: #b42318; }
.sh-chatter__due.is-today { background: #fef0c7; color: #b54708; }
.sh-chatter__due.is-future { background: #eaecf0; color: #475467; }

.sh-chatter__actbtns { flex: 0 0 auto; display: inline-flex; gap: .25rem; }
.sh-chatter__actbtn {
  border: 1px solid var(--sh-border, #d0d5dd); background: #fff; cursor: pointer;
  width: 1.7rem; height: 1.7rem; border-radius: 6px; line-height: 1; font-size: .8rem;
  display: inline-flex; align-items: center; justify-content: center; color: var(--sh-text-muted, #667085);
}
.sh-chatter__actbtn--done:hover { background: #ecfdf3; border-color: #12b76a; color: #027a48; }
.sh-chatter__actbtn--cancel:hover { background: #fef3f2; border-color: #f04438; color: #b42318; }
.sh-chatter__actbtn:disabled { opacity: .5; cursor: default; }

/* --- Tier 4c: Follower-Strip + Modus-Umschalter + @Erwähnungen --- */
.sh-chatter__followers {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .5rem .8rem; border-bottom: 1px solid var(--sh-border, #e4e7ec); background: var(--sh-surface-2, #f9fafb);
}
.sh-chatter__flabel { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sh-text-muted, #98a2b3); }
.sh-chatter__favatars { display: inline-flex; align-items: center; gap: .15rem; flex: 1 1 auto; }
.sh-chatter__favatar {
  width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 700; color: #fff; background: var(--sh-text-muted, #98a2b3); margin-left: -4px; border: 2px solid #fff;
}
.sh-chatter__favatar:first-child { margin-left: 0; }
.sh-chatter__fmore { font-size: .7rem; color: var(--sh-text-muted, #667085); margin-left: .25rem; }
.sh-chatter__fnone { color: var(--sh-text-muted, #98a2b3); font-size: .8rem; }
.sh-chatter__fbtn { border: 1px solid var(--sh-border, #d0d5dd); background: #fff; cursor: pointer; padding: .25rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 600; color: var(--sh-text, #344054); }
.sh-chatter__fbtn.is-on { background: var(--sh-accent-soft, #fdeee9); border-color: var(--sh-accent, #E73D25); color: var(--sh-accent, #E73D25); }
.sh-chatter__fbtn:hover { border-color: var(--sh-accent, #E73D25); }

.sh-chatter__cmode { display: inline-flex; gap: .15rem; margin-bottom: .45rem; background: var(--sh-surface-2, #f2f4f7); border-radius: 8px; padding: 2px; }
.sh-chatter__cmode-btn { border: none; background: transparent; cursor: pointer; padding: .25rem .7rem; border-radius: 6px; font-size: .76rem; font-weight: 600; color: var(--sh-text-muted, #667085); }
.sh-chatter__cmode-btn.is-active { background: #fff; color: var(--sh-accent, #E73D25); box-shadow: 0 1px 2px rgba(16,24,40,.08); }

.sh-chatter__mentions { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.sh-chatter__mchip { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .15rem .1rem .5rem; border-radius: 999px; background: var(--sh-accent-soft, #fdeee9); color: var(--sh-accent, #E73D25); font-size: .74rem; font-weight: 600; }
.sh-chatter__mchip-x { border: none; background: transparent; cursor: pointer; color: inherit; font-size: .95rem; line-height: 1; padding: 0 .25rem; }

.sh-chatter__mention-wrap { position: relative; margin-right: auto; }
.sh-chatter__mention-menu {
  position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 30; min-width: 200px; max-height: 240px; overflow-y: auto;
  background: #fff; border: 1px solid var(--sh-border, #e4e7ec); border-radius: 8px; box-shadow: 0 10px 28px rgba(16,24,40,.14); padding: .25rem;
}
.sh-chatter__mention-item { display: block; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer; padding: .4rem .55rem; border-radius: 6px; font-size: .82rem; color: var(--sh-text, #101828); }
.sh-chatter__mention-item:hover { background: var(--sh-accent-soft, #f6f3fd); }
.sh-chatter__mention-empty { padding: .5rem .55rem; color: var(--sh-text-muted, #667085); font-size: .8rem; }
.sh-chatter__composer-actions { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }

@media (max-width: 900px) {
  .sh-chatter__feed { max-height: none; }
  .sh-chatter__planrow { flex-direction: column; }
  .sh-chatter__actbtn { width: 2rem; height: 2rem; }
}