/* ============================================================
   MOCKS · Form-Builder & AI-Chat
   Aus mocks.css ausgegliedert — beide sind keine Karten und
   stehen tonal allein.
   ============================================================ */

/* ─── Form Mock — Drag & Drop Fragebogen-Builder ──────────── */
.mock--form { display: flex; flex-direction: column; }
.form__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--surface2); border-bottom: 1px solid var(--border);
}
.form__title { font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; }
.form__actions { margin-left: auto; display: flex; gap: 6px; }
.chip { padding: 3px 8px; border-radius: 6px; background: #fff; border: 1px solid var(--border); font-size: 10px; font-weight: 600; color: var(--text2); }
.chip--accent { background: var(--accent); color: #fff; border-color: transparent; }
.form__body {
  display: grid; grid-template-columns: 120px 1fr; min-height: 280px;
}
.form__palette { padding: 12px; border-right: 1px solid var(--border); background: var(--surface); }
.form__palette-title { font-size: 9px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.palette__item {
  display: block; padding: 6px 8px; margin-bottom: 6px;
  background: #fff; border: 1px dashed var(--border); border-radius: 6px;
  font-size: 11px; color: var(--text2);
  cursor: grab;
}
.form__preview {
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  background: #fff;
}
.field {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
}
.field__hint { font-size: 10px; color: var(--text3); margin-bottom: 4px; }
.field__title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.field__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt {
  padding: 4px 10px; font-size: 11px; font-weight: 500;
  border-radius: 999px; border: 1px solid var(--border);
  color: var(--text2); background: #fff;
}
.opt--ok { background: var(--green-tint); color: var(--green); }
.ph {
  width: 36px; height: 36px; border-radius: 6px;
  background: var(--surface2); border: 1px dashed var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text3);
}
.field--drop {
  border: 2px dashed var(--accent);
  background: var(--accent-tint-2);
  font-size: 12px; color: var(--accent); font-weight: 600;
  text-align: center; padding: 12px;
}
.field--dim { opacity: .55; }
.form__logic {
  padding: 8px 14px; border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--text2);
}
.form__lambda {
  width: 14px; height: 14px; border-radius: 4px;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.form__logic strong { color: var(--text); font-weight: 600; }

/* ─── Chat Mock — AI-Chat-Verlauf ─────────────────────────── */
.mock--chat { padding: 18px; display: flex; flex-direction: column; gap: 10px; min-height: 320px; }
.msg {
  padding: 10px 14px; font-size: 13px;
  max-width: 85%;
}
.msg--out {
  align-self: flex-end;
  background: var(--accent); color: #fff;
  border-radius: 14px 14px 4px 14px;
}
.msg--in {
  align-self: flex-start;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
}
.msg__attach {
  margin-top: 8px; padding: 8px 10px;
  background: #fff; border-radius: 8px; border: 1px solid var(--border);
  font-size: 12px;
}
.msg__typing {
  margin-top: auto;
  padding: 10px 12px; border-radius: 10px;
  background: var(--surface2); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text3);
}
.msg__typing i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--text3); opacity: .4;
  display: inline-block;
  animation: typing 1.4s var(--ease) infinite;
}
.msg__typing i:nth-child(2) { animation-delay: .2s; }
.msg__typing i:nth-child(3) { animation-delay: .4s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-3px); opacity: 1; }
}