/*
 * Schwebende Knöpfe unten rechts: der Stapel (Frontend-Grundmuster Punkt 3 und 6)
 * David 17.10.2026: Chat-Knopf ganz unten, Nach-oben-Knopf darüber.
 *
 * Variablen (die Seite setzt sie in ihrer theme.css auf :root, die Fallbacks
 * gelten nur, wenn sie fehlen):
 *   --fab-rand   Abstand zur Fensterkante
 *   --fab-bot-h  Durchmesser des Chat-Knopfs (mindestens 44px Tap-Fläche)
 *   --fab-luft   Abstand zwischen den Knöpfen
 *   --fab-top-h  Durchmesser des Nach-oben-Knopfs (Vorgabe: wie --fab-bot-h)
 *
 * Markup, Inline-Variante (Astro-Buchsites):
 *   <a class="fab-stapel-chat" href="/gespraeche" aria-label="…">…</a>
 *   <button class="fab-stapel-top" id="scrollTop" aria-label="…">…</button>
 * Klassische Apps mit <melucio-scroll-top>: der Selektor unten hebt den
 * Baustein über den Chat-Knopf, sobald ein .fab-stapel-chat (oder
 * <khai-chat> o. ä. mit der Klasse) auf der Seite steht.
 *
 * Chat offen: das Skript des Chats setzt <html data-chat-offen>, dann ist
 * Nach-oben ausgeblendet. Ohne Chat-Knopf sitzt Nach-oben ganz unten.
 *
 * Einbinden: <link rel="stylesheet" href="/components/melucio-fab-stapel.css?v=BUILD">
 * (Cache-Buster, Grundmuster Punkt 7). Der Fuß weicht seitlich aus:
 * padding-inline: calc(var(--fab-rand) + var(--fab-bot-h)) (Punkt 6).
 */
.fab-stapel-chat,
.fab-stapel-top {
  position: fixed;
  box-sizing: border-box;
  right: var(--fab-rand, 1.1rem);
  display: grid;
  place-items: center;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.fab-stapel-chat {
  bottom: var(--fab-rand, 1.1rem);
  z-index: 48; /* unter Teilen-Sheet und Menüs (50), über Drawer (40) */
  width: var(--fab-bot-h, 2.8rem);
  height: var(--fab-bot-h, 2.8rem);
  min-width: 44px;
  min-height: 44px;
}
.fab-stapel-top {
  bottom: var(--fab-rand, 1.1rem);
  z-index: 47;
  width: var(--fab-top-h, var(--fab-bot-h, 2.8rem));
  height: var(--fab-top-h, var(--fab-bot-h, 2.8rem));
  min-width: 44px;
  min-height: 44px;
}
/* Mit Chat-Knopf rückt Nach-oben darüber. */
body:has(.fab-stapel-chat) .fab-stapel-top {
  bottom: calc(var(--fab-rand, 1.1rem) + max(var(--fab-bot-h, 2.8rem), 44px) + var(--fab-luft, 0.6rem));
}
body:has(.fab-stapel-chat) melucio-scroll-top {
  --scroll-top-bottom: calc(var(--fab-rand, 1.1rem) + max(var(--fab-bot-h, 2.8rem), 44px) + var(--fab-luft, 0.6rem));
  --scroll-top-right: calc(var(--fab-rand, 1.1rem) + (max(var(--fab-bot-h, 2.8rem), 44px) - 46px) / 2);
}
/* Chat offen: Nach-oben weicht, der Chat braucht den Platz. */
html[data-chat-offen] .fab-stapel-top,
html[data-chat-offen] melucio-scroll-top {
  display: none;
}
/* Unsichtbar heißt auch für die Tastatur weg (kein Fokus auf einem unsichtbaren Knopf). */
.fab-stapel-top:not(.is-visible) {
  visibility: hidden;
}