/* =====================================================================
   demo-chat.css – Zusatz-Styles für die Kundenservice-Chatbot-Demo.
   Ergänzt das gemeinsame _core/demo.css (CI, Dark-Mode, Variablen).
   Bewusst schlank; nutzt die vorhandenen Tokens (--accent, --card …).
   ===================================================================== */

/* ---- Chat-Layout --------------------------------------------------- */
.chat-wrap {
  max-width: 52rem;
  margin: 0 auto;
}

.chat-window {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Feste, angenehme Höhe; Verlauf scrollt intern. */
  height: min(70vh, 640px);
}

/* ---- Kopfzeile ----------------------------------------------------- */
.chat-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.chat-head__avatar {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--gradient);
  color: #fff;
  flex-shrink: 0;
}
.chat-head__avatar svg { width: 20px; height: 20px; }
.chat-head__meta { flex: 1; min-width: 0; }
.chat-head__name { font-weight: 700; font-size: .96rem; }
.chat-head__status {
  font-size: .76rem; color: var(--text-muted);
  display: flex; align-items: center; gap: .4rem;
}
.chat-head__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(74,222,128,.5);
  animation: demoPulse 2.2s infinite;
}
.chat-reset { flex-shrink: 0; }

/* ---- Nachrichtenverlauf -------------------------------------------- */
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  scroll-behavior: smooth;
}
/* dezente Scrollbar */
.chat-log::-webkit-scrollbar { width: 8px; }
.chat-log::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 8px; }

/* Eine Nachrichtenzeile (Avatar + Blase) */
.msg {
  display: flex;
  align-items: flex-end;
  gap: .55rem;
  max-width: 100%;
}
.msg--user { flex-direction: row; justify-content: flex-end; }
.msg--bot  { flex-direction: row; justify-content: flex-start; }

/* Ein-Animation */
.msg.is-pre { opacity: 0; transform: translateY(8px); }
.msg.is-in  { opacity: 1; transform: translateY(0); transition: opacity .28s var(--ease-out), transform .28s var(--ease-out); }

.msg__avatar {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.msg__avatar svg { width: 16px; height: 16px; }
.msg__avatar--bot  { background: var(--gradient); color: #fff; }
.msg__avatar--user { background: rgba(255,255,255,.06); color: var(--text-muted); border: 1px solid var(--border); }

/* Spalte für Bot (Blase + evtl. Formular darunter) */
.msg__col { display: flex; flex-direction: column; gap: .5rem; max-width: 82%; }

/* Blasen */
.msg__bubble {
  position: relative;
  padding: .7rem .9rem;
  border-radius: 14px;
  font-size: .92rem;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.msg--user .msg__bubble {
  max-width: 82%;
  background: var(--gradient);
  color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 4px 14px -6px rgba(255,109,0,.5);
}
.msg--bot .msg__bubble {
  background: var(--card-hover);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 5px;
}
.msg__bubble--escalate {
  border-color: rgba(255,109,0,.32);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,109,0,.06), transparent 60%),
    var(--card-hover);
}
.msg__text { white-space: pre-wrap; }

/* Dezentes Intent-Label */
.msg__intent {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .12rem .5rem;
  margin-bottom: .45rem;
}
.msg__intent svg { width: 11px; height: 11px; }

/* Aufklappbare Grundlage (dezent) */
.msg__ground { margin-top: .55rem; }
.msg__ground summary {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  cursor: pointer;
  list-style: none;
  font-size: .74rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: .2rem 0;
  user-select: none;
}
.msg__ground summary::-webkit-details-marker { display: none; }
.msg__ground summary svg { width: 12px; height: 12px; }
.msg__ground summary svg:first-child { color: var(--green); }
.msg__ground[open] summary svg:last-child { transform: rotate(180deg); }
.msg__ground summary svg:last-child { transition: transform .2s var(--ease-out); }
.msg__ground-body {
  margin-top: .45rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.msg__source {
  border-left: 2px solid var(--accent-2);
  padding: .3rem .6rem;
  background: rgba(255,255,255,.025);
  border-radius: 0 8px 8px 0;
}
.msg__source-doc {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 700; color: var(--text-muted);
}
.msg__source-doc svg { width: 12px; height: 12px; }
.msg__source-snippet {
  display: block;
  font-size: .78rem; color: var(--text-dim);
  margin-top: .2rem; font-style: italic;
}

/* „tippt …" */
.msg__bubble--typing { display: inline-flex; gap: .3rem; align-items: center; padding: .8rem .9rem; }
.msg__bubble--typing .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-dim);
  animation: chatTyping 1.3s infinite ease-in-out;
}
.msg__bubble--typing .dot:nth-child(2) { animation-delay: .18s; }
.msg__bubble--typing .dot:nth-child(3) { animation-delay: .36s; }
@keyframes chatTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* ---- Eskalations-Formular ------------------------------------------ */
.esc-form {
  background: var(--bg-soft);
  border: 1px solid rgba(255,109,0,.28);
  border-radius: 12px;
  padding: .85rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.esc-form__head {
  display: flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 700; color: #ffd9b8;
}
.esc-form__head svg { width: 15px; height: 15px; }
.esc-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}
.esc-field { display: flex; flex-direction: column; gap: .25rem; }
.esc-field > span { font-size: .72rem; color: var(--text-muted); font-weight: 600; }
.esc-field input,
.esc-field textarea {
  font: inherit;
  font-size: .86rem;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  padding: .5rem .6rem;
  resize: vertical;
  width: 100%;
}
.esc-field input:focus,
.esc-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,109,0,.14);
}
.esc-form__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap;
}
.esc-form__hint {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; color: var(--text-dim);
}
.esc-form__hint svg { width: 12px; height: 12px; color: var(--amber); }

/* Bestätigung nach Übergabe */
.esc-done {
  display: flex; align-items: flex-start; gap: .55rem;
  background: rgba(74,222,128,.08);
  border: 1px solid rgba(74,222,128,.28);
  border-radius: 12px;
  padding: .8rem .9rem;
  font-size: .85rem;
}
.esc-done > svg { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; margin-top: 1px; }
.esc-done b { color: var(--text); }
.esc-done__demo {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; color: var(--text-dim); margin-top: .35rem;
}
.esc-done__demo svg { width: 12px; height: 12px; color: var(--amber); }

/* ---- Vorschlags-Chips ---------------------------------------------- */
.chat-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--border);
  max-height: 140px;
  overflow: hidden;
  transition: max-height .3s var(--ease-out), padding .3s var(--ease-out), opacity .25s var(--ease-out);
}
.chat-suggest.is-hidden {
  max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; pointer-events: none;
}
.chat-chip {
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .4rem .8rem;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  transition: all .18s var(--ease-out);
}
.chat-chip:hover { color: var(--text); border-color: var(--border-strong); background: rgba(255,255,255,.06); }
.chat-chip svg { width: 13px; height: 13px; color: var(--amber); }
/* Die „Eskalations-Demo"-Frage dezent hervorheben */
.chat-chip--edge { border-color: rgba(251,191,36,.3); color: #ffe6b0; }
.chat-chip--edge:hover { border-color: rgba(251,191,36,.5); }

/* ---- Eingabezeile -------------------------------------------------- */
.chat-input {
  display: flex;
  align-items: flex-end;
  gap: .6rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.chat-textarea {
  flex: 1;
  font: inherit;
  font-size: .92rem;
  color: var(--text);
  background: var(--card-hover);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: .65rem .85rem;
  resize: none;
  max-height: 140px;
  line-height: 1.45;
}
.chat-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,109,0,.13);
}
.chat-send {
  flex-shrink: 0;
  width: 44px; height: 44px;
  padding: 0;
  border-radius: 12px;
}
.chat-send svg { width: 19px; height: 19px; }

/* ---- Ehrlichkeits-Hinweis ------------------------------------------ */
.chat-note { margin-top: 1.4rem; }

/* ---- Responsive ---------------------------------------------------- */
@media (max-width: 640px) {
  .chat-window { height: min(72vh, 560px); }
  .msg__col { max-width: 88%; }
  .msg--user .msg__bubble { max-width: 88%; }
  .esc-form__grid { grid-template-columns: 1fr; }
  .chat-head__status { font-size: .7rem; }
}