/* =====================================================================================================
 * Pipeflow KI (frueher Pipeflow Assistent, Paul 08.10.2026) - Glas wie die Karten der App, gleiche Token (iris.css), hell und dunkel.
 * Knopf: kleine Welle unten rechts. Desktop 24 px vom Rand, Toasts ruecken darueber. Handy: ueber dem "+"-Knopf.
 * --as-heben setzt assistent.js, wenn die Fusszeile ins Bild kommt (der Knopf steigt ueber sie).
 * ===================================================================================================== */
.assistent-knopf {
  --as-heben: 0px;
  position: fixed; right: 24px; bottom: calc(24px + var(--as-heben)); z-index: 160;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
  color: var(--text); background: var(--karte-glas); border: 1px solid var(--linie-stark);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--karten-schatten);
  transition: transform .2s var(--kurve-auf), bottom .18s var(--kurve-auf), opacity .2s; -webkit-tap-highlight-color: transparent;
}
.assistent-knopf .pf-welle { font-size: 15px; }
.assistent-knopf:hover { transform: translateY(-2px); }
.assistent-knopf:active { transform: scale(.94); }
.assistent-knopf:focus-visible { outline: 2px solid var(--aktion); outline-offset: 3px; }
body.mit-assistent .toasts { bottom: max(88px, var(--rueck-platz, 0px)) !important; }

.assistent {
  position: fixed; right: 24px; bottom: 88px; z-index: 300;
  width: 380px; max-width: calc(100vw - 48px); height: min(580px, calc(100vh - 120px)); height: min(580px, calc(100dvh - 120px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 22px;
  color: var(--text); background: var(--karte-glas); border: 1px solid var(--linie-stark);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--schwebe-schatten);
  opacity: 0; transform: translateY(12px) scale(.98); transform-origin: bottom right;
  transition: opacity .22s var(--kurve-auf), transform .22s var(--kurve-auf);
}
.assistent.offen { opacity: 1; transform: none; }
.as-kopf { display: flex; align-items: center; gap: 10px; padding: 14px 10px 12px 18px; border-bottom: 1px solid var(--linie); }
.as-kopf .pf-welle { font-size: 13px; }
.as-titel { flex: 1; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.as-zu { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.as-zu:hover { background: var(--flaeche); color: var(--text); }
.as-zu:focus-visible { outline: 2px solid var(--aktion); outline-offset: 1px; }

.as-verlauf { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 8px; }
.as-blase { max-width: 86%; padding: 9px 13px; border-radius: 18px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.as-bot { align-self: flex-start; background: var(--flaeche); border: 1px solid var(--linie); border-bottom-left-radius: 6px; color: var(--text); }
.as-kunde { align-self: flex-end; background: var(--aktion); color: var(--aktion-text); border-bottom-right-radius: 6px; }
.as-aktionen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; white-space: normal; }
.as-aktion { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--aktion-text); background: var(--aktion); }
/* Das Fenster hat die Klasse "offen" - start.css ".offen a" (dunkle, unterstrichene Schrift ohne Polster) war staerker: schwarze leere Pille
   (live 30.10.2026). Mit der ID gewinnt die Pille immer. */
#assistent a.as-aktion, #assistent a.as-aktion:visited { color: var(--aktion-text); text-decoration: none; font-size: 13px; padding: 0 12px; }
.as-aktion:hover { filter: brightness(1.08); }
.as-aktion:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.as-tippt { display: inline-flex; gap: 4px; padding: 12px 14px; }
.as-tippt i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: as-punkt 1.1s ease-in-out infinite; }
.as-tippt i:nth-child(2) { animation-delay: .15s; } .as-tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes as-punkt { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.as-hinweis { margin: 0; padding: 4px 18px 6px; font-size: 11.5px; line-height: 1.35; color: var(--text-3); }
.as-eingabe { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px 12px 14px; border-top: 1px solid var(--linie); }
.as-eingabe textarea { flex: 1; min-width: 0; resize: none; max-height: 120px; padding: 10px 12px; border-radius: 14px; font: 14px/1.4 var(--sans);
  color: var(--text); background: var(--flaeche); border: 1px solid var(--linie); outline: none; }
.as-eingabe textarea::placeholder { color: var(--text-3); }
.as-eingabe textarea:focus-visible { border-color: var(--linie-stark); box-shadow: 0 0 0 2px var(--aktion); }
.as-senden { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--aktion-text); background: var(--aktion); }
.as-senden:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* ---- Pipeflow KI (30.10.2026): Live-Schritt statt drei Punkten, Antwort waehrend sie entsteht ----------- */
.as-live { display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; font-size: 13.5px; color: var(--text-2); }
.as-kreis { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--linie-stark); border-top-color: var(--aktion); animation: as-dreh .8s linear infinite; }
@keyframes as-dreh { to { transform: rotate(360deg); } }
.as-live-text { animation: as-ein .25s var(--kurve-auf); }
@keyframes as-ein { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.as-entsteht::after { content: ""; display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--text-3); animation: as-punkt 1s steps(2) infinite; }
/* ---- Pipeflow KI (30.10.2026): Diktieren, erledigte Aufgaben, Rueckfrage mit Ja/Nein ------------------- */
.as-mikro { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0;
  color: var(--text-2); background: var(--flaeche); border: 1px solid var(--linie); -webkit-tap-highlight-color: transparent; }
.as-mikro[hidden] { display: none; }
.as-mikro:hover { color: var(--text); border-color: var(--linie-stark); }
.as-mikro:focus-visible { outline: 2px solid var(--aktion); outline-offset: 2px; }
.as-mikro.hoert { color: #fff; background: var(--schlecht); border-color: transparent; animation: as-hoert 1.4s ease-in-out infinite; }
@keyframes as-hoert { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--schlecht) 45%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }
.as-erledigt, .as-fehler, .as-leise { font-size: 13px; padding: 7px 12px; }
.as-erledigt::before { content: "✓"; display: inline-block; margin-right: 6px; font-weight: 700; color: var(--gut); }
.as-fehler { border-color: color-mix(in srgb, var(--schlecht) 45%, var(--linie)); }
.as-leise { color: var(--text-2); }
button.as-aktion { border: 0; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.as-aktion.as-nein { color: var(--text); background: transparent; border: 1px solid var(--linie-stark); }
button.as-aktion:disabled { opacity: .45; cursor: default; filter: none; }
.as-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Handy: Knopf ueber dem "+", Fenster fast Vollbild ---------------------------------------------- */
@media (max-width: 767px) {
  /* Links neben dem "+" auf gleicher Hoehe (Paul 08.10.2026: ueberdeckt keine Karte) - mittig zum "+" (58 px), 12 px Abstand. */
  .assistent-knopf { right: calc(16px + 58px + 12px); bottom: calc(var(--h-tabs, 56px) + 16px + 5px + var(--as-heben)); width: 48px; height: 48px; }
  body:has(#rueck) .assistent-knopf { translate: 0 -64px; }
  body:has(#sheet-overlay:not([hidden])) .assistent-knopf, body.assistent-offen .assistent-knopf { opacity: 0; pointer-events: none; }
  .assistent { inset: calc(env(safe-area-inset-top, 0px) + 10px) 8px calc(env(safe-area-inset-bottom, 0px) + 8px) 8px; width: auto; max-width: none; height: auto; border-radius: 20px; transform-origin: bottom center;
    /* Fast Vollbild: Glas doppelt gelegt, damit die Karten darunter nicht unruhig durchscheinen. */
    background: linear-gradient(var(--karte-glas), var(--karte-glas)), var(--karte-glas); }
  .as-blase { max-width: 88%; font-size: 15px; }
  .as-eingabe textarea { font-size: 16px; }
  .as-eingabe { gap: 6px; padding-left: 10px; }
  /* 44 px Fingerziel (Nachtest 7b0dc0d: mit 40 px am Server knapp darunter gemessen). */
  #assistent button.as-aktion { min-height: 44px; padding: 0 18px; font-size: 14px; }
  /* Seitenende: unter der Fusszeile Platz fuer "+" UND Assistent, damit am Ende weder Karte noch Fusszeile darunter liegt. */
  body.handy.mit-assistent .app-fuss { padding-bottom: calc(var(--h-tabs) + 88px + 60px); }
}
/* Seiten ohne "+"-Knopf (Einstellungen ...): dort sitzt der Assistent tiefer. */
@media (max-width: 767px) { body:not(:has(#h-fab)) .assistent-knopf { right: 16px; bottom: calc(var(--h-tabs, 56px) + 16px + var(--as-heben)); } }
@media (prefers-reduced-motion: reduce) {
  .assistent, .assistent-knopf { transition: none; }
  .as-tippt i { animation: none; opacity: .7; }
  .as-mikro.hoert { animation: none; }
  .as-kreis { animation-duration: 2.4s; }
  .as-live-text, .as-entsteht::after { animation: none; }
}

/* Vorgeschlagene Fragen (Paul 02.11.2026) */
.as-vorschlaege { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 4px; }
#assistent button.as-vorschlag { border: 1px solid var(--linie-stark); background: var(--karte, transparent); color: var(--text); font: inherit; font-size: 13px; font-weight: 500;
  min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer; text-align: left; transition: background .15s ease, border-color .15s ease; }
#assistent button.as-vorschlag:hover { background: var(--flaeche); border-color: var(--text-3); }
#assistent button.as-vorschlag:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
@media (max-width: 767px) { #assistent button.as-vorschlag { min-height: 44px; padding: 0 16px; font-size: 14px; } }