/* S3S Assistant — Chat-Widget (Vanilla CSS, Prefix s3sa-) */
/* bottom: 76px = ueber dem TranslatePress-Floater (55px hoch, fixed unten rechts, z-index 99999) */
#s3sa-root { position: fixed; right: 20px; bottom: 76px; z-index: 100000; font-family: inherit; font-size: 15px; line-height: 1.45; color: #1a1a1a; }
#s3sa-root *, #s3sa-root *::before, #s3sa-root *::after { box-sizing: border-box; }

/* Ruhezustand: Pille — Logo links, Label "KI-Assistent" (Sprache der Seite), dunkel wie der Panel-Kopf. Keine Animation. */
.s3sa-btn { position: relative; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 8px; border-radius: 999px; border: 0; cursor: pointer; background: #1a1a1a; color: #fff; font: inherit; font-size: 15px; font-weight: 600; line-height: 1; box-shadow: 0 6px 24px rgba(0,0,0,.22); transition: background .15s ease; }
.s3sa-btn:hover { background: #2b2b2b; }
.s3sa-btn:focus-visible { outline: 2px solid #c41e3a; outline-offset: 2px; }
.s3sa-btn img { width: 26px; height: auto; display: block; }
.s3sa-btn .s3sa-mark { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; }
.s3sa-btn .s3sa-btn-label { white-space: nowrap; }
#s3sa-root.s3sa-open .s3sa-btn { display: none; }
@media (max-width: 480px) {
  /* Volle Pille mit Label auch mobil, kein Tooltip. bottom fuer <=480 steht im letzten Block ganz unten (Kaskade nach dem 600er-Block). */
  .s3sa-btn { height: 48px; padding: 0 16px 0 6px; font-size: 14px; }
  .s3sa-btn .s3sa-mark { width: 36px; height: 36px; }
  .s3sa-btn img { width: 24px; }
}

/* Panel (bei offenem Panel wird der TRP-Floater ausgeblendet: body.s3sa-panel-open) */
body.s3sa-panel-open .trp-floating-switcher, body.s3sa-panel-open .trp-language-switcher.trp-floating-switcher { display: none !important; }
.s3sa-panel { display: none; position: fixed; right: 20px; bottom: 20px; width: 380px; max-width: calc(100vw - 40px); height: 620px; max-height: calc(100vh - 40px); background: #fff; border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.24); overflow: hidden; flex-direction: column; }
#s3sa-root.s3sa-open .s3sa-panel { display: flex; }

.s3sa-head { background: #1a1a1a; color: #fff; padding: 14px 16px 12px; display: flex; align-items: flex-start; gap: 12px; }
.s3sa-head .s3sa-mark { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; margin-top: 2px; }
.s3sa-head img { width: 26px; height: auto; display: block; }
.s3sa-head-text { flex: 1 1 auto; min-width: 0; }
.s3sa-title { font-weight: 600; font-size: 16px; margin: 0; }
.s3sa-disclosure { font-size: 12px; opacity: .85; margin: 2px 0 0; }
.s3sa-preview { display: inline-block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; background: #c41e3a; color: #fff; padding: 1px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }
.s3sa-close { background: transparent; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; opacity: .8; }
.s3sa-close:hover { opacity: 1; }

.s3sa-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 14px; background: #f8f5f0; display: flex; flex-direction: column; gap: 10px; }
.s3sa-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; }
.s3sa-msg.s3sa-bot { align-self: flex-start; background: #fff; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.s3sa-msg.s3sa-user { align-self: flex-end; background: #1a1a1a; color: #fff; border-bottom-right-radius: 4px; }
.s3sa-msg.s3sa-sys { align-self: center; background: transparent; color: #6b6b6b; font-size: 12px; padding: 2px 6px; }
.s3sa-typing { align-self: flex-start; padding: 10px 14px; background: #fff; border-radius: 14px; border-bottom-left-radius: 4px; }
.s3sa-typing span { display: inline-block; width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; background: #9a9a9a; animation: s3sa-blink 1.2s infinite; }
.s3sa-typing span:nth-child(2) { animation-delay: .2s; } .s3sa-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes s3sa-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.s3sa-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.s3sa-quick button { border: 1px solid #1a1a1a; background: #fff; color: #1a1a1a; border-radius: 999px; padding: 7px 13px; font-size: 13px; cursor: pointer; font-family: inherit; }
.s3sa-quick button:hover { background: #1a1a1a; color: #fff; }

.s3sa-contact { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; padding: 8px 14px; background: #fff; border-top: 1px solid #ebe6df; font-size: 12.5px; }
.s3sa-contact a { color: #1a1a1a; text-decoration: none; border-bottom: 1px solid #c41e3a; }
.s3sa-contact a:hover { color: #c41e3a; }
.s3sa-contact .s3sa-privacy { margin-left: auto; color: #6b6b6b; border-bottom-color: #cfcfcf; }

.s3sa-form { display: flex; gap: 8px; padding: 10px 12px 12px; background: #fff; }
.s3sa-form textarea { flex: 1 1 auto; resize: none; height: 44px; max-height: 120px; padding: 10px 12px; border: 1px solid #d6d1c9; border-radius: 10px; font: inherit; font-size: 14px; line-height: 1.35; background: #fff; color: #1a1a1a; }
.s3sa-form textarea:focus { outline: none; border-color: #1a1a1a; }
.s3sa-form button { flex: 0 0 auto; border: 0; border-radius: 10px; background: #c41e3a; color: #fff; padding: 0 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.s3sa-form button:disabled { opacity: .5; cursor: default; }

/* Mobile: Vollbild */
@media (max-width: 600px) {
  #s3sa-root { right: 14px; bottom: 70px; }
}
@media (max-width: 480px) {
  /* bottom: 160px (Pawel 16.09.2026): ueber dem Hero-CTA beim Laden (375x812). Muss NACH dem 600er-Block stehen. */
  #s3sa-root { bottom: 160px; }
  .s3sa-panel { right: 0; bottom: 0; left: 0; top: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .s3sa-msg { max-width: 92%; }
}
/* Pawel 16.09.2026: 400–480 px (z.B. 430×932 Pro Max) — Hero-CTA liegt dort tiefer, 110 px passt zwischen CTA und TRP-Floater. Muss als letzter Block stehen. */
@media (min-width: 400px) and (max-width: 480px) {
  #s3sa-root { bottom: 110px; }
}