/* Demo – LinkedIn-Posts im eigenen Stil. Nur Kit-Variablen, keine neuen Farben. */

/* ---- Stil-Profil (links oben) ---- */
.styleprofile{
  margin:16px 20px 6px; padding:15px 16px;
  background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-sm);
}
.styleprofile__label{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--text-soft); font-weight:600; margin-bottom:10px;
}
.styleprofile__tags{display:flex; flex-wrap:wrap; gap:7px;}
.oldpost{margin-top:13px; padding-top:12px; border-top:1px solid var(--border);}
.oldpost__label{font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-soft); font-weight:600; margin-bottom:6px;}
.oldpost p{margin:0; font-size:12.5px; color:var(--text-muted); line-height:1.55; font-style:italic;}

/* ---- Chef-Notiz ---- */
.vmsg{
  margin:14px 20px 6px; padding:16px 18px;
  background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-sm);
}
.vmsg__head{display:flex; gap:13px; align-items:center; margin-bottom:12px;}
.vmsg__from{font-size:14px; font-weight:600;}
.vmsg__chan{font-size:12px; color:var(--text-soft); margin-top:1px;}
.vmsg__note{
  margin:0; padding:11px 14px; font-size:13.5px; line-height:1.6; color:#D5D8DD;
  background:var(--bg-3); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
}

/* ---- Erkennungs-Block ---- */
.recogwrap{
  margin:14px 20px 4px; padding:15px 16px;
  background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-sm);
  transition:opacity .3s ease;
}
.recogwrap.is-empty{opacity:.45;}
.recogwrap__label{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--text-soft); font-weight:600;
  display:flex; align-items:center; gap:8px;
}
.recogwrap__state{font-size:11px; text-transform:none; letter-spacing:0; color:var(--accent-bright); font-weight:500;}
.recog{display:flex; flex-wrap:wrap; gap:7px; max-height:0; opacity:0; overflow:hidden; transition:max-height .4s ease, opacity .35s ease, margin-top .35s ease;}
.recog.show{max-height:140px; opacity:1; margin-top:12px;}
.recog .tag{opacity:0; transform:translateY(4px); transition:opacity .3s ease, transform .3s ease;}
.recog .tag.in{opacity:1; transform:none;}

/* ---- LinkedIn-Post-Vorschau (rechts) ---- */
.lipost{
  margin:16px 20px 6px;
  background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-sm);
  overflow:hidden;
}
.lipost__head{
  display:flex; gap:12px; align-items:flex-start; padding:14px 16px 10px; position:relative;
}
.ava--big{width:44px; height:44px; flex:0 0 44px; font-size:15px;}
.lipost__name{font-size:14px; font-weight:700;}
.lipost__sub{font-size:12px; color:var(--text-muted); margin-top:1px;}
.lipost__meta{font-size:11.5px; color:var(--text-soft); margin-top:2px;}
.lipost__variant{
  margin-left:auto; font-size:11px; font-weight:600; padding:4px 10px; border-radius:14px;
  background:var(--blue-bg); color:var(--accent-bright); white-space:nowrap;
}
.lipost__text{
  padding:4px 16px 14px; font-size:13.5px; line-height:1.65; color:#D5D8DD;
  white-space:pre-line; min-height:120px;
}
.lipost__text .cursor{
  display:inline-block; width:7px; margin-left:1px; color:var(--accent-bright);
  animation:blink 1s step-end infinite;
}
@keyframes blink{50%{opacity:0;}}
.lipost__foot{
  display:flex; gap:18px; padding:10px 16px; border-top:1px solid var(--border);
  font-size:12px; color:var(--text-soft);
}

/* ---- Freigabe-Zeile ---- */
.approve{
  display:flex; gap:10px; padding:6px 20px 12px;
  opacity:0; transform:translateY(4px); pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
.approve.show{opacity:1; transform:none; pointer-events:auto;}

.badges{display:flex; flex-wrap:wrap; gap:8px; padding:2px 20px 14px;}
.badge{
  font-size:12px; font-weight:600; padding:6px 12px; border-radius:20px;
  background:var(--neutral-bg); color:var(--text-muted);
  opacity:0; transform:translateY(4px); transition:opacity .35s ease, transform .35s ease;
}
.badge.show{opacity:1; transform:none;}
.badge.accent{background:var(--blue-bg); color:var(--accent-bright);}