/* 050_wie_llms_antworten — Spezialoptik aus sample_llm_2.html (Rest deckt assets/css/style.css ab) */

/* Chat-Blasen (Frage/Antwort) — nicht in style.css vorhanden */
.chatbox{background:linear-gradient(135deg,#f0f4ff 0%,#fff5f5 100%);border:3px solid var(--hk-blau);
  border-radius:12px;padding:1.5rem;margin:1.5rem 0}
.message{background:#fff;padding:1rem 1.5rem;border-radius:12px;margin:1rem 0;
  box-shadow:var(--hk-schatten);position:relative}
.message-user{background:linear-gradient(135deg,var(--hk-blau) 0%,var(--hk-blau-dunkel) 100%);color:#fff;margin-left:3rem}
.message-ai{background:linear-gradient(135deg,var(--hk-gruen) 0%,var(--hk-gruen-dunkel) 100%);color:#fff;margin-right:3rem}
.message-label{font-size:.75rem;font-weight:700;margin-bottom:.5rem;opacity:.8}

/* Wahrscheinlichkeitsbalken (Top-5-Token-Anzeige) — nicht in style.css vorhanden */
.probability-bar{background:#e0e0e0;height:30px;border-radius:4px;position:relative;overflow:hidden;margin:.5rem 0}
.probability-fill{background:linear-gradient(90deg,var(--hk-gruen),#20c997);height:100%;
  display:flex;align-items:center;justify-content:flex-end;padding-right:.5rem;
  color:#fff;font-weight:700;font-size:.85rem}

/* Pipeline-Schritt-Karten mit Aktiv-Zustand (JS schaltet .active um) — nicht in style.css vorhanden */
.pipeline-step{background:#fff;border:3px solid var(--hk-rahmen);border-radius:12px;
  padding:1.5rem;margin:1rem 0;transition:all .3s}
.pipeline-step:hover{border-color:var(--hk-blau);box-shadow:0 4px 12px rgba(0,71,171,.2)}
.pipeline-step.active{border-color:var(--hk-rot);background:linear-gradient(to right,#fff5f5 0%,#ffe8e8 100%)}

/* Schritt-Badge hier als Pille mit Text ("Schritt 1 von 6") statt Kreis-Ziffer aus style.css */
.pipeline-step .step-indicator{display:inline-block;width:auto;height:auto;border-radius:20px;
  background:linear-gradient(135deg,var(--hk-rot) 0%,var(--hk-rot-dunkel) 100%);
  padding:.5rem 1rem;font-size:.9rem;margin-right:0}

/* generiertes Token beim Ausgabe-Loop animiert einblenden */
.token-generated{background:linear-gradient(135deg,var(--hk-gruen) 0%,var(--hk-gruen-dunkel) 100%);animation:tok-fadein .5s}
@keyframes tok-fadein{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}