/* Container & Floating */
.skb-widget {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.skb-widget.skb-session-hidden { display: none !important; }

/* Inline-Variante */
.skb-widget.skb-inline { position: static; right: auto; bottom: auto; }
.skb-widget.skb-inline .skb-launcher { display: none; }
.skb-widget.skb-inline .skb-panel { position: static; box-shadow: none; width: 100%; max-width: none; }

/* Launcher */
.skb-launcher {
  display: inline-flex; align-items: center; gap: 8px;
  background: #0b6cf9; color: #fff; border: none; border-radius: 999px;
  padding: 10px 14px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(11,108,249,.3);
  transition: transform .1s ease, box-shadow .2s ease, background .2s ease;
  font-weight: 600;
}
.skb-launcher:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(11,108,249,.35); background:#095ddb; }
.skb-launcher:active { transform: translateY(0); }
.skb-launcher-dot { width: 8px; height: 8px; background:#fff; border-radius:50%; display:inline-block; }

/* Panel */
.skb-panel {
  position: relative;
  width: 320px; max-width: 95vw;
  background: #fff;
  border: 1px solid #e7e8eb;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  overflow: hidden;
  margin-bottom: 8px;
}

/* Header */
.skb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: #f7f8fb; border-bottom: 1px solid #e7e8eb;
}
.skb-title { font-weight: 700; font-size: 14px; }
.skb-actions { display: flex; gap: 6px; }
.skb-actions button {
  border: none; background: transparent; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 6px 8px; border-radius: 6px;
}
.skb-actions button:hover { background: #eef1f7; }

/* Body */
.skb-body { max-height: 60vh; overflow: hidden; display: flex; flex-direction: column; }
.skb-messages { padding: 12px; overflow: auto; height: 300px; }

/* Messages – Avatare + deutliche Bubbles */
.skb-msg { position: relative; margin: 14px 0; font-size: 14px; line-height: 1.45; }
.skb-msg .skb-bubble { display: inline-block; max-width: 86%; position: relative; }

/* Bot: links + Avatar links */
.skb-msg.bot { padding-left: 42px; }
.skb-msg.bot::before {
  content: "🤖";
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: #e6eef9; color: #0b295d; display: flex; align-items: center; justify-content: center;
  font-size: 15px; box-shadow: 0 2px 6px rgba(0,0,0,.08); border: 1px solid #d4def0;
}
.skb-msg.bot .skb-bubble {
  background: #f6f8fb; color: #111827;
  padding: 10px 12px;
  border-radius: 12px 12px 12px 0;
  border: 1px solid #dbe2ea;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.skb-msg.bot .skb-bubble::before {
  content: "Bot";
  position: absolute; top: -18px; left: 6px; font-size: 11px; color: #6b7280;
}
.skb-msg.bot .skb-bubble::after {
  content: "";
  position: absolute; left: -6px; bottom: 0;
  width: 0; height: 0;
  border-right: 6px solid #f6f8fb;
  border-top: 6px solid transparent;
}

/* User: rechts + Avatar rechts */
.skb-msg.user { text-align: right; padding-right: 42px; }
.skb-msg.user::before {
  content: "👤";
  position: absolute; right: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: #dbe8ff; color: #082a63; display: flex; align-items: center; justify-content: center;
  font-size: 15px; box-shadow: 0 2px 6px rgba(0,0,0,.08); border: 1px solid #c6d7ff;
}
.skb-msg.user .skb-bubble {
  background: #0b6cf9; color: #fff;
  padding: 10px 12px;
  border-radius: 12px 12px 0 12px;
  box-shadow: 0 6px 16px rgba(11,108,249,.25);
  border: 1px solid rgba(9,93,219,.75);
}
.skb-msg.user .skb-bubble::before {
  content: "Du";
  position: absolute; top: -18px; right: 6px; font-size: 11px; color: #5b88ff;
}
.skb-msg.user .skb-bubble::after {
  content: "";
  position: absolute; right: -6px; bottom: 0;
  width: 0; height: 0;
  border-left: 6px solid #0b6cf9;
  border-top: 6px solid transparent;
}
.skb-msg.user a { color: #fff; text-decoration: underline; }

/* States */
.skb-thinking { opacity: .8; font-style: italic; }
.skb-noinfo { color: #6b7280; }

/* Links in Antworten */
.skb-messages a { color: #0b6cf9; text-decoration: underline; }
.skb-messages a:hover { text-decoration: none; }

/* Suggestions */
.skb-suggest { margin-top: 6px; }
.skb-suggest-title { font-weight: 700; margin-bottom: 6px; color: #374151; }
.skb-suggest-list { display: grid; grid-template-columns: 1fr; gap: 6px; }
.skb-suggest-btn {
  border: 1px solid #e1e4ea; background: #fff; border-radius: 10px; padding: 8px 10px; cursor: pointer; text-align: left;
  transition: background .15s ease, border-color .15s ease, transform .02s ease-in;
}
.skb-suggest-btn:hover { background: #f2f6ff; border-color: #c9d6ff; }
.skb-suggest-btn:active { transform: scale(.997); }
.skb-suggest-yn { display: flex; gap: 8px; margin-top: 8px; }
.skb-yes, .skb-no { border: none; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.skb-yes { background: #0b6cf9; color: #fff; }
.skb-no  { background: #e9edf5; color: #111827; }

/* Form */
.skb-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #e7e8eb; background: #fff; }
.skb-input { flex: 1; border: 1px solid #d9dde6; border-radius: 10px; padding: 10px 12px; outline: none; }
.skb-input:focus { border-color: #0b6cf9; box-shadow: 0 0 0 3px rgba(11,108,249,.12); }
.skb-send { border: none; background: #0b6cf9; color: #fff; border-radius: 10px; padding: 10px 12px; cursor: pointer; font-weight: 600; }
.skb-send:hover { background: #095ddb; }

/* Footer */
.skb-footer { padding: 8px 12px 12px; }
.skb-note { font-size: 12px; color: #6b7280; }
.skb-export { margin-top: 8px; }
.skb-export form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.skb-export input[type="number"], .skb-export select { padding: 4px 6px; }
.skb-export-btn { padding: 6px 10px; background: #f1f5ff; border: 1px solid #dbe4ff; border-radius: 8px; cursor: pointer; }
.skb-export-hint { font-size: 12px; color: #8a8f99; }

/* Kontakt-Intent Box */
.skb-contact-intent { border: 1px dashed #cbd5e1; background: #f8fafc; padding: 8px 10px; border-radius: 8px; }
.skb-contact-intent .skb-mailto-btn { display: inline-block; margin-top: 6px; background: #0b6cf9; color: #fff; padding: 6px 10px; border-radius: 6px; text-decoration: none; }

/* Mobile */
@media (max-width: 480px) {
  .skb-panel { width: 95vw; }
  .skb-body { max-height: 70vh; }
  .skb-messages { height: 320px; }
}

/* Option: höhere Kontraste */
@media (prefers-contrast: more) {
  .skb-msg.user .skb-bubble { border-color: #084cb3; }
  .skb-msg.bot  .skb-bubble { border-color: #c4cdd7; }
}