/* WA Berater v3.0 – Styles */
:root { --wab-c: #1d4ed8; }
.wab-wrap { font-family: 'Segoe UI', system-ui, sans-serif; font-size: 14px; }

/* ── Floating ──────────────────────────────────────────────────────── */
.wab-wrap.wab-floating .wab-box {
  position:fixed; bottom:90px; right:20px; z-index:9999;
  width:380px; max-height:580px;
  border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,.18);
  flex-direction:column; overflow:hidden;
}
.wab-fab {
  position:fixed; bottom:20px; right:20px; z-index:9999;
  width:56px; height:56px; border-radius:50%; border:none;
  color:#fff; font-size:22px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.25); transition:transform .15s;
}
.wab-fab:hover { transform:scale(1.08); }

/* ── Inline ────────────────────────────────────────────────────────── */
.wab-wrap.wab-inline .wab-box {
  display:flex; flex-direction:column;
  border-radius:12px; border:1.5px solid #e2e8f0;
  max-height:520px; overflow:hidden;
}

/* ── Header ────────────────────────────────────────────────────────── */
.wab-head { display:flex; align-items:center; gap:8px; padding:12px 14px; background:var(--wab-c); color:#fff; }
.wab-avatar { font-size:18px; }
.wab-name   { font-weight:700; flex:1; }
.wab-close  { background:none; border:none; color:#fff; cursor:pointer; font-size:16px; opacity:.8; }
.wab-close:hover { opacity:1; }
.wab-reset  { background:none; border:none; color:#fff; cursor:pointer; font-size:18px; opacity:.7; padding:0 2px; line-height:1; }
.wab-reset:hover { opacity:1; }

/* ── Messages ──────────────────────────────────────────────────────── */
.wab-msgs { flex:1; overflow-y:auto; padding:12px 10px; background:#f8fafc; display:flex; flex-direction:column; gap:8px; }
.wab-msg { max-width:88%; padding:9px 13px; border-radius:12px; line-height:1.5; word-break:break-word; }
.wab-msg.wab-assistant { background:#fff; border:1.5px solid #e2e8f0; align-self:flex-start; border-bottom-left-radius:3px; }
.wab-msg.wab-user { background:var(--wab-c); color:#fff; align-self:flex-end; border-bottom-right-radius:3px; }

/* ── Typing ────────────────────────────────────────────────────────── */
.wab-typing { display:flex; gap:4px; align-items:center; padding:10px 14px; background:#fff; border:1.5px solid #e2e8f0; align-self:flex-start; border-radius:12px; border-bottom-left-radius:3px; }
.wab-typing span { width:7px; height:7px; border-radius:50%; background:#94a3b8; animation:wab-bounce .9s infinite; }
.wab-typing span:nth-child(2){animation-delay:.15s;} .wab-typing span:nth-child(3){animation-delay:.3s;}
@keyframes wab-bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-6px)} }

/* ── Quick-Reply ───────────────────────────────────────────────────── */
.wab-btns { display:flex; flex-wrap:wrap; gap:6px; padding:4px 0; align-self:flex-start; max-width:100%; }
.wab-btn { background:#fff; border:1.5px solid var(--wab-c); color:var(--wab-c); border-radius:20px; padding:6px 14px; font-size:13px; cursor:pointer; font-family:inherit; transition:all .15s; white-space:nowrap; }
.wab-btn:hover { background:var(--wab-c); color:#fff; }

/* ── Summary ───────────────────────────────────────────────────────── */
.wab-summary { background:#eff6ff; border:1.5px solid #bfdbfe; border-radius:10px; padding:10px 12px; font-size:12px; color:#1e40af; align-self:stretch; }

/* ── Rich-Produktkarten (v3) ───────────────────────────────────────── */
.wab-produkte { display:flex; flex-direction:column; gap:10px; align-self:stretch; }
.wab-produkt-card { background:#fff; border:1.5px solid #e2e8f0; border-radius:10px; overflow:hidden; transition:border-color .15s; }
.wab-produkt-card:hover { border-color:#93c5fd; }
.wab-pk-img-wrap { background:#f1f5f9; }
.wab-pk-img { display:block; width:100%; max-height:160px; object-fit:contain; }
.wab-pk-body { padding:10px 12px; }
.wab-pk-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:4px; }
.wab-pk-name { font-weight:700; font-size:14px; flex:1; padding-right:8px; }
.wab-pk-badge { background:#fef9c3; color:#854d0e; border-radius:20px; padding:2px 10px; font-size:11px; font-weight:600; white-space:nowrap; }
.wab-pk-kat { background:#f1f5f9; color:#475569; border-radius:5px; padding:2px 8px; font-size:11px; display:inline-block; margin-bottom:6px; }
.wab-pk-desc { font-size:12px; color:#475569; margin:0 0 8px; line-height:1.4; }
.wab-pk-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:8px; }
.wab-pk-facts>div { background:#f8fafc; border-radius:6px; padding:6px 8px; text-align:center; }
.wab-pk-facts span { display:block; font-size:10px; color:#94a3b8; font-weight:600; margin-bottom:2px; }
.wab-pk-facts strong { font-size:12px; }
.wab-pk-cta {
  display:inline-block; background:var(--wab-c); color:#fff; border-radius:6px;
  padding:6px 14px; font-size:12px; font-weight:600; text-decoration:none;
  transition:opacity .15s;
}
.wab-pk-cta:hover { opacity:.85; color:#fff; }

/* ── Medien / Bilder ───────────────────────────────────────────────── */
.wab-media-item { align-self:flex-start; max-width:88%; border-radius:10px; overflow:hidden; border:1.5px solid #e2e8f0; background:#fff; }
.wab-media-img { display:block; width:100%; max-height:240px; object-fit:contain; background:#f8fafc; }
.wab-media-caption { display:block; padding:6px 10px; font-size:11px; color:#64748b; border-top:1px solid #f1f5f9; }

/* ── Persistente Schnellauswahl ────────────────────────────────────── */
.wab-actions { display:flex; flex-wrap:wrap; gap:4px; padding:6px 10px; background:#f1f5f9; border-top:1px solid #e2e8f0; }
.wab-action-btn { background:#fff; border:1px solid #cbd5e1; color:#475569; border-radius:14px; padding:3px 10px; font-size:11px; cursor:pointer; font-family:inherit; transition:all .15s; white-space:nowrap; }
.wab-action-btn:hover { background:var(--wab-c); color:#fff; border-color:var(--wab-c); }
.wab-action-reset { color:#94a3b8; border-style:dashed; }
.wab-action-reset:hover { background:#fee2e2; color:#991b1b; border-color:#fca5a5; }

/* ── Footer ────────────────────────────────────────────────────────── */
.wab-foot { display:flex; gap:6px; padding:10px; border-top:1.5px solid #e2e8f0; background:#fff; }
.wab-input { flex:1; resize:none; border:1.5px solid #e2e8f0; border-radius:8px; padding:8px 10px; font-size:13px; font-family:inherit; outline:none; min-height:36px; max-height:100px; transition:border-color .15s; }
.wab-input:focus { border-color:var(--wab-c); }
.wab-send { border:none; border-radius:8px; color:#fff; width:36px; height:36px; cursor:pointer; font-size:15px; flex-shrink:0; align-self:flex-end; transition:opacity .15s; }
.wab-send:hover { opacity:.85; }
.wab-send:disabled { opacity:.5; cursor:not-allowed; }