/* Demo ① – Sprachnachricht → Angebot. Nur Kit-Variablen, keine neuen Farben. */

/* Rechtsbündigkeit kommt vom „← Alle Lösungen"-Link (.topbar__back) im Kit – wie bei den übrigen Demos. */

/* ---- Sprachnachricht-Blase ---- */
.vmsg{
  margin:16px 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:14px;}
.vmsg__from{font-size:14px; font-weight:600;}
.vmsg__chan{font-size:12px; color:var(--text-soft); margin-top:1px;}
.vmsg__player{
  display:flex; align-items:center; gap:12px;
  background:var(--bg-3); border:1px solid var(--border-strong);
  border-radius:30px; padding:8px 16px 8px 8px;
}
.vmsg__play{
  width:34px; height:34px; flex:0 0 34px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-cyan)); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.wave{flex:1; height:34px; min-width:0;}
.wave rect{fill:var(--accent-bright); opacity:.55;}
.vmsg__dur{font-size:12px; color:var(--text-muted); font-variant-numeric:tabular-nums; flex:0 0 auto;}

/* ---- Transkript ---- */
.transcript{
  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;
}
.transcript.is-empty{opacity:.45;}
.transcript__label{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--text-soft); font-weight:600; margin-bottom:9px;
  display:flex; align-items:center; gap:8px;
}
.transcript__state{font-size:11px; text-transform:none; letter-spacing:0; color:var(--accent-bright); font-weight:500;}
.transcript__text{
  font-size:13.5px; color:#D5D8DD; line-height:1.65; min-height:20px;
}
.transcript__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;}}

/* Erkennungs-Tags unter dem Transkript */
.recog{display:flex; flex-wrap:wrap; gap:7px; margin-top:0; max-height:0; opacity:0; overflow:hidden; transition:max-height .4s ease, opacity .35s ease, margin-top .35s ease;}
.recog.show{max-height:120px; opacity:1; margin-top:13px;}
.recog .tag{opacity:0; transform:translateY(4px); transition:opacity .3s ease, transform .3s ease;}
.recog .tag.in{opacity:1; transform:none;}

/* ---- Angebots-Dokument (rechtes Panel) ---- */
.doc{padding:6px 20px 16px;}
.doc__head{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:14px 16px; margin-bottom:6px;
  background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-sm);
}
.doc__head .label{font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-soft); font-weight:600; margin-bottom:3px;}
.doc__head .val{font-size:13.5px; font-weight:600;}
.doc__head .sub{font-size:12px; color:var(--text-muted);}
.doc__head .r{text-align:right;}

table.offer{width:100%; border-collapse:collapse; margin-top:8px; font-size:13px;}
table.offer th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--text-soft); font-weight:600; padding:8px 8px; border-bottom:1px solid var(--border-strong);
}
table.offer th.num, table.offer td.num{text-align:right; font-variant-numeric:tabular-nums;}
table.offer td{padding:11px 8px; border-bottom:1px solid var(--border); vertical-align:top;}
table.offer tbody tr{opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .4s ease;}
table.offer tbody tr.show{opacity:1; transform:none;}
table.offer td .pos{font-weight:500; color:var(--text);}
table.offer td.menge{color:var(--text-muted); white-space:nowrap;}

.sums{margin-top:14px; border-top:1px solid var(--border-strong); padding-top:6px;}
.sumrow{
  display:flex; justify-content:space-between; padding:7px 8px; font-size:13px;
  color:var(--text-muted); opacity:0; transform:translateY(6px);
  transition:opacity .4s ease, transform .4s ease;
}
.sumrow.show{opacity:1; transform:none;}
.sumrow .v{font-variant-numeric:tabular-nums; color:var(--text);}
.sumrow--total{
  margin-top:4px; padding:12px 8px; border-top:1px solid var(--border-strong);
  font-size:16px; font-weight:700; color:var(--text);
}
.sumrow--total .v{color:var(--accent-bright);}
.doc__foot{font-size:11.5px; color:var(--text-soft); padding:10px 8px 0; opacity:0; transition:opacity .4s ease;}
.doc__foot.show{opacity:1;}

.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);}