/* =========================================================================
   ServiceHub Redesign — Block rail-chatter2
   REIN OPTISCH. Rechte Leiste des Dokument-Editors (Angebot/Auftrag/Rechnung/
   Lieferschein/Gutschrift): Verlauf und Notizen (.sh-chatter), Follower-Strip,
   Notiz-Composer, Aktivitaet planen, Aktivitaeten-Liste (Status-Timeline /
   Naechste Schritte). Warme ELMETIC-Palette, Token-Felder, Pill-Buttons,
   Timeline mit Punkt-Linie.

   Keine Funktionsaenderung. Kein display:none auf Buttons/Tabs/Felder/Zeilen.
   Strikt gescoped auf .sh-chatter (das Panel rendert ShChatter.mount).
   Eigene Tokens lokal auf .sh-chatter gescoped, damit ladereihenfolge-
   unabhaengig (analog sh-redesign-02-shell.css). Globale Basis NICHT
   redefiniert. Light und Dark via [data-theme="dark"].

   Kommentar-Hygiene: in diesem Block keine Stern-Slash-Paare im Fliesstext.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Figtree:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ---------- lokale Tokens (Light) auf das Panel gescoped ---------- */
.sh-chatter{
  --rc-accent:#E73D25; --rc-accent-700:#C5331E; --rc-accent-soft:#FCEDE7;
  --rc-accent-line:rgba(231,61,37,.22);
  --rc-honey:#D99A2B; --rc-honey-soft:#FBF0DA;
  --rc-ok:#16A34A; --rc-ok-soft:#E9F8EF;
  --rc-warn:#C7791A; --rc-warn-soft:#FBF1E0;
  --rc-info:#2F6BD6; --rc-info-soft:#EAF1FC;
  --rc-bg:#FAF6F2; --rc-surface:#FFFFFF; --rc-surf-2:#F6F1EB; --rc-surf-3:#EFE8E0;
  --rc-ink:#231C17; --rc-text:#463D35; --rc-text-2:#6B6157; --rc-muted:#9A8F84;
  --rc-border:#EEE5DC; --rc-border-2:#E3D9CE; --rc-field:#F6F1EB;
  --rc-font-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --rc-font-body:'Figtree',system-ui,sans-serif;
  --rc-font-mono:'Space Mono',ui-monospace,monospace;
  --rc-r-xs:7px; --rc-r-sm:9px; --rc-r-md:12px; --rc-r-lg:16px; --rc-r-pill:999px;
  --rc-sh-sm:0 1px 2px rgba(120,80,50,.06);
  --rc-sh-md:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --rc-ring:0 0 0 3px var(--rc-accent-soft);
  --rc-tr:.16s cubic-bezier(.2,.7,.3,1);
}
[data-theme="dark"] .sh-chatter{
  --rc-accent:#F2543B; --rc-accent-700:#E0432B; --rc-accent-soft:rgba(242,84,59,.16);
  --rc-accent-line:rgba(242,84,59,.30);
  --rc-honey:#E6AE4A; --rc-honey-soft:rgba(230,174,74,.16);
  --rc-ok:#3BC07A; --rc-ok-soft:rgba(59,192,122,.15);
  --rc-warn:#E5A33C; --rc-warn-soft:rgba(229,163,60,.15);
  --rc-info:#5C8FE8; --rc-info-soft:rgba(92,143,232,.16);
  --rc-bg:#15120F; --rc-surface:#1E1A16; --rc-surf-2:#241F1A; --rc-surf-3:#2C2620;
  --rc-ink:#F6F1EC; --rc-text:#E2D8CE; --rc-text-2:#B3A99E; --rc-muted:#8C8175;
  --rc-border:#2E2822; --rc-border-2:#3A332B; --rc-field:#241F1A;
  --rc-sh-sm:0 1px 2px rgba(0,0,0,.4);
  --rc-sh-md:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
}

/* ---------- Panel-Schale ---------- */
.sh-chatter{
  background:var(--rc-surface);
  border:1px solid var(--rc-border);
  border-radius:var(--rc-r-lg);
  box-shadow:var(--rc-sh-md);
  font-family:var(--rc-font-body);
  font-size:.84rem;
  color:var(--rc-text);
  overflow:hidden;
}

/* ---------- Kopf: Titel + Tabs ---------- */
.sh-chatter__head{
  padding:.7rem .9rem;
  border-bottom:1px solid var(--rc-border);
  background:linear-gradient(180deg,var(--rc-surf-2),var(--rc-surface));
}
.sh-chatter__title{
  font-family:var(--rc-font-head);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:-.01em;
  color:var(--rc-ink);
}
.sh-chatter__tabs{
  gap:.2rem;
  background:var(--rc-surf-2);
  border:1px solid var(--rc-border);
  border-radius:var(--rc-r-pill);
  padding:3px;
}
.sh-chatter__tab{
  border-radius:var(--rc-r-pill);
  padding:.28rem .7rem;
  font-family:var(--rc-font-body);
  font-size:.74rem;
  font-weight:600;
  color:var(--rc-text-2);
  transition:var(--rc-tr);
}
.sh-chatter__tab:hover{ background:var(--rc-surface); color:var(--rc-ink); }
.sh-chatter__tab.is-active{
  background:var(--rc-surface);
  color:var(--rc-accent);
  box-shadow:var(--rc-sh-sm);
}

/* ---------- Follower-Strip ---------- */
.sh-chatter__followers{
  padding:.55rem .9rem;
  border-bottom:1px solid var(--rc-border);
  background:var(--rc-surf-2);
  gap:.55rem;
}
.sh-chatter__flabel{
  font-family:var(--rc-font-head);
  font-size:.66rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--rc-muted);
}
.sh-chatter__favatar{
  width:1.65rem; height:1.65rem;
  font-family:var(--rc-font-head);
  font-size:.6rem; font-weight:700;
  color:#fff;
  background:linear-gradient(135deg,var(--rc-honey),var(--rc-accent));
  border:2px solid var(--rc-surface);
  margin-left:-5px;
  box-shadow:var(--rc-sh-sm);
}
.sh-chatter__favatar:first-child{ margin-left:0; }
.sh-chatter__fmore{ font-size:.7rem; color:var(--rc-text-2); margin-left:.3rem; }
.sh-chatter__fnone{ color:var(--rc-muted); font-size:.8rem; font-style:italic; }
.sh-chatter__fbtn{
  border:1px solid var(--rc-border-2);
  background:var(--rc-surface);
  padding:.28rem .7rem;
  border-radius:var(--rc-r-pill);
  font-size:.73rem;
  font-weight:600;
  color:var(--rc-text);
  transition:var(--rc-tr);
}
.sh-chatter__fbtn:hover{ border-color:var(--rc-accent); color:var(--rc-accent); }
.sh-chatter__fbtn.is-on{
  background:var(--rc-accent-soft);
  border-color:var(--rc-accent);
  color:var(--rc-accent);
}

/* ---------- Aktivitaet planen: Leiste + Knopf ---------- */
.sh-chatter__planbar{
  padding:.55rem .9rem;
  border-bottom:1px solid var(--rc-border);
  gap:.55rem;
}
.sh-chatter__planbtn{
  border:1px dashed var(--rc-border-2);
  background:transparent;
  padding:.34rem .8rem;
  border-radius:var(--rc-r-pill);
  font-size:.76rem;
  font-weight:700;
  color:var(--rc-accent);
  transition:var(--rc-tr);
}
.sh-chatter__planbtn:hover{
  background:var(--rc-accent-soft);
  border-color:var(--rc-accent);
  border-style:solid;
}

/* ---------- Aktivitaet planen: Formular ---------- */
.sh-chatter__planform{
  padding:.8rem .9rem;
  border-bottom:1px solid var(--rc-border);
  background:var(--rc-surf-2);
  gap:.5rem;
}
.sh-chatter__planinput{
  border:1px solid var(--rc-border-2);
  border-radius:var(--rc-r-sm);
  padding:.5rem .6rem;
  font-family:var(--rc-font-body);
  font-size:.82rem;
  color:var(--rc-ink);
  background:var(--rc-surface);
  transition:var(--rc-tr);
}
.sh-chatter__planinput::placeholder{ color:var(--rc-muted); }
.sh-chatter__planinput:focus{
  outline:none;
  border-color:var(--rc-accent);
  box-shadow:var(--rc-ring);
}

/* ---------- Notiz-Composer ---------- */
.sh-chatter__composer{
  padding:.8rem .9rem;
  border-bottom:1px solid var(--rc-border);
  background:var(--rc-surface);
}
/* Composer-Modus-Umschalter (Notiz / Nachricht) */
.sh-chatter__cmode{
  gap:.2rem;
  margin-bottom:.55rem;
  background:var(--rc-surf-2);
  border:1px solid var(--rc-border);
  border-radius:var(--rc-r-pill);
  padding:3px;
}
.sh-chatter__cmode-btn{
  border-radius:var(--rc-r-pill);
  padding:.28rem .8rem;
  font-family:var(--rc-font-body);
  font-size:.74rem;
  font-weight:600;
  color:var(--rc-text-2);
  transition:var(--rc-tr);
}
.sh-chatter__cmode-btn.is-active{
  background:var(--rc-surface);
  color:var(--rc-accent);
  box-shadow:var(--rc-sh-sm);
}
.sh-chatter__input{
  border:1px solid var(--rc-border-2);
  border-radius:var(--rc-r-md);
  padding:.6rem .7rem;
  font-family:var(--rc-font-body);
  font-size:.84rem;
  color:var(--rc-ink);
  background:var(--rc-field);
  min-height:2.6rem;
  transition:var(--rc-tr);
}
.sh-chatter__input::placeholder{ color:var(--rc-muted); }
.sh-chatter__input:focus{
  outline:none;
  border-color:var(--rc-accent);
  background:var(--rc-surface);
  box-shadow:var(--rc-ring);
}

/* @Erwaehnungs-Chips + Menue */
.sh-chatter__mchip{
  padding:.12rem .2rem .12rem .55rem;
  border-radius:var(--rc-r-pill);
  background:var(--rc-accent-soft);
  color:var(--rc-accent);
  font-size:.73rem;
  font-weight:600;
}
.sh-chatter__mchip-x{ color:inherit; }
.sh-chatter__mention-menu{
  background:var(--rc-surface);
  border:1px solid var(--rc-border);
  border-radius:var(--rc-r-md);
  box-shadow:var(--rc-sh-md);
  padding:.3rem;
}
.sh-chatter__mention-item{
  border-radius:var(--rc-r-sm);
  padding:.42rem .55rem;
  font-size:.82rem;
  color:var(--rc-ink);
  transition:var(--rc-tr);
}
.sh-chatter__mention-item:hover{ background:var(--rc-accent-soft); color:var(--rc-accent); }
.sh-chatter__mention-empty{ color:var(--rc-muted); font-size:.8rem; }

/* ---------- Aktivitaeten-Liste: Naechste Schritte ---------- */
.sh-chatter__actlist{ padding:.5rem .9rem; }
.sh-chatter__actitem{
  border:1px solid var(--rc-border);
  border-radius:var(--rc-r-md);
  background:var(--rc-surface);
  box-shadow:var(--rc-sh-sm);
  padding:.55rem .65rem;
  margin-bottom:.45rem;
  gap:.6rem;
  transition:var(--rc-tr);
}
.sh-chatter__actitem:hover{ border-color:var(--rc-accent-line); }
.sh-chatter__acticon{ font-size:1.05rem; }
.sh-chatter__actsummary{
  font-weight:600;
  color:var(--rc-ink);
  font-size:.82rem;
}
.sh-chatter__actwho{ color:var(--rc-text-2); font-size:.72rem; }
.sh-chatter__due{
  font-family:var(--rc-font-mono);
  font-size:.68rem;
  font-weight:700;
  padding:.1rem .45rem;
  border-radius:var(--rc-r-pill);
}
.sh-chatter__due.is-overdue{ background:var(--rc-accent-soft); color:var(--rc-accent); }
.sh-chatter__due.is-today{ background:var(--rc-honey-soft); color:var(--rc-warn); }
.sh-chatter__due.is-future{ background:var(--rc-surf-3); color:var(--rc-text-2); }

.sh-chatter__actbtn{
  border:1px solid var(--rc-border-2);
  background:var(--rc-surface);
  width:1.75rem; height:1.75rem;
  border-radius:var(--rc-r-sm);
  color:var(--rc-muted);
  transition:var(--rc-tr);
}
.sh-chatter__actbtn--done:hover{ background:var(--rc-ok-soft); border-color:var(--rc-ok); color:var(--rc-ok); }
.sh-chatter__actbtn--cancel:hover{ background:var(--rc-accent-soft); border-color:var(--rc-accent); color:var(--rc-accent); }

/* ---------- Verlaufs-Feed: Status-Timeline mit Punkt-Linie ---------- */
.sh-chatter__feed{
  padding:.7rem .9rem .8rem;
  position:relative;
}
.sh-chatter__loading,.sh-chatter__empty{
  color:var(--rc-muted);
  font-style:italic;
  padding:.7rem .2rem;
}

/* Feed-Eintrag als Timeline-Knoten: vertikale Linie + Punkt links */
.sh-chatter__item{
  position:relative;
  gap:.7rem;
  padding:.6rem 0 .6rem 1.3rem;
  border-bottom:none;
  align-items:flex-start;
}
.sh-chatter__item::before{
  content:"";
  position:absolute;
  left:5px; top:1.5rem; bottom:-.6rem;
  width:2px;
  background:var(--rc-border-2);
}
.sh-chatter__item:last-child::before{ display:none; }
.sh-chatter__item::after{
  content:"";
  position:absolute;
  left:0; top:1rem;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--rc-surface);
  border:2px solid var(--rc-border-2);
  box-shadow:0 0 0 3px var(--rc-surface);
}
/* Neueste Aktivitaet (erster Eintrag) = jetzt-Punkt in Akzent */
.sh-chatter__item:first-child::after{
  background:var(--rc-accent);
  border-color:var(--rc-accent);
  box-shadow:0 0 0 4px var(--rc-accent-soft);
}
/* erledigte Aktivitaets-Eintraege = ok-Punkt */
.sh-chatter__item--activity::after{
  background:var(--rc-ok);
  border-color:var(--rc-ok);
}
.sh-chatter__item:first-child.sh-chatter__item--activity::after{
  background:var(--rc-accent);
  border-color:var(--rc-accent);
}

/* Avatar im Feed */
.sh-chatter__avatar{
  width:2rem; height:2rem;
  font-family:var(--rc-font-head);
  font-size:.66rem; font-weight:700;
  color:#fff;
  background:linear-gradient(135deg,var(--rc-accent),var(--rc-accent-700));
  box-shadow:var(--rc-sh-sm);
}
.sh-chatter__avatar--act{
  background:linear-gradient(135deg,var(--rc-honey),var(--rc-warn));
}
.sh-chatter__who{
  font-family:var(--rc-font-head);
  font-weight:700;
  font-size:.78rem;
  color:var(--rc-ink);
}
.sh-chatter__when{
  font-family:var(--rc-font-mono);
  color:var(--rc-muted);
  font-size:.68rem;
}
.sh-chatter__body{
  color:var(--rc-text);
  margin-top:.2rem;
  line-height:1.45;
}
.sh-chatter__act{
  color:var(--rc-text-2);
  margin-top:.2rem;
  font-size:.8rem;
}

/* ---------- Fehlerzustand ---------- */
.sh-chatter--err{ padding:1rem; color:var(--rc-accent); }

/* ---------- Mobil ---------- */
@media (max-width:900px){
  .sh-chatter{ border-radius:var(--rc-r-md); }
}