/* ============================================================
   PINGBOOK · Pingbook AI (PROJ-1)
   ------------------------------------------------------------
   Der Agent-Modus der Suchseite: Hero mit Promptbar, Transkript,
   Ergebnis-Kacheln, Anfrage-Entwurf und die Eckdaten-Zeile in
   der Werkzeugleiste der Promptbar. NUR in pages/suche.html
   verlinkt (nicht in die Injektionsliste von app.js) — alle
   Klassen tragen `.pba-` bzw. `.pbp-`/`.pbb-`.

   Akzent ist durchgehend `--ai` (Indigo), reserviert für
   AI-Momente; Brand-Grün bleibt der klassischen Oberfläche.
   Treffer-Begründungen erklärt allein der lila Stern unter den
   Karten — es gibt KEINE Hervorhebung auf der Karte selbst (der
   frühere Regenbogen-Ring `.pb-match` ist bewusst entfernt).
   ============================================================ */

pb-agent-hero { display: contents; }
pb-agent-composer { display: contents; }
pb-agent-chat { display: block; }

/* ---- Nur-für-Screenreader (kein globales Utility im Projekt) ---- */
.pba-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   1 · Die Bühne
   ------------------------------------------------------------
   Ein Zustand pro Klasse: `is-intro` zentriert Hero + Promptbar
   (das .hero-Muster aus layout.css), `is-chat` gibt dem
   Transkript die ganze Spalte und fixiert die Promptbar unten.
   ============================================================ */
/* Auf der Seite selbst, nicht auf der Bühne: die Höhe der fixierten
   Promptbar brauchen beide (die Bühne für ihren Fußabstand, die Seite
   auf dem Handy für die schwebende Auswahl-Insel). */
.pba-page { --pba-comp-h: 11rem; }

/* ============================================================
   29.08. · EINE Seite, zwei Modi: `is-agent` auf <main> schaltet
   zwischen klassischer Suche und Agent um — reiner display-Toggle,
   beide Bereiche bleiben im DOM (Session/Transkript überleben den
   Wechsel). Den Zustand fährt scripts/pages/suche.js (setupMode).
   ============================================================ */
.app-main[data-barba-namespace="suche"].is-agent
  :is(pb-search-hero, pb-results-toolbar, #feed) { display: none; }
.app-main[data-barba-namespace="suche"]:not(.is-agent) .pba { display: none; }

.pba {
  /* Breite von Transkript UND Eingabe: wächst auf breiten Bildschirmen mit
     (Mathias 05.10.2026: „bei so breitem Viewport sehr schmal“) — 46rem trug
     drei Kacheln, ab 62rem stehen vier nebeneinander. Fließtext und Blasen
     bleiben über ihre eigene max-width lesbar schmal. */
  --pba-col: clamp(46rem, 62vw, 62rem);
  --pba-inset: clamp(1.5rem, 4vw, 3.5rem); /* = .main-top-Inset    */
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* Ruhezustand — vertikal mittig wie `.hero`. 28.08.: Das dicke
   Bottom-Padding schiebt den zentrierten Block über die optische
   Mitte — exakt mittig wirkte er zu tief. Viewport-abhängig, damit
   Hero + Schalter über der Kartenwand (pb-card-wall, unten) bleiben. */
.pba.is-intro {
  align-items: center;
  justify-content: center;
  text-align: center;
  /* 29.08.: EXAKT die Buehnen-Geometrie der klassischen Suche (.hero,
     layout.css) — Hero und Pille stehen in beiden Modi pixelgleich,
     der Modus-Wechsel ist dadurch ein reiner Inhalts-Crossfade.
     (Der fruehere Bottom-Bias fuer die Kartenwand entfaellt: die
     kuerzere Buehne endet ohnehin ueber der Wand.) */
  padding: 1.5rem var(--pba-inset) 1.25rem;
  min-height: clamp(21.25rem, calc(100vh - 31.5rem), 40rem);
  box-sizing: border-box;
  /* .pba hat flex:1 (Gespraechszustand braucht das) — hier NICHT
     wachsen, sonst zentriert die Buehne tiefer als die der Suche. */
  flex: 0 0 auto;
}
.pba.is-intro pb-agent-chat { display: none; }

/* Gesprächszustand — zentrierte Lesespalte (Transkript, Eingabe und
   Arbeit teilen sich EINE Achse in der Seitenmitte). */
.pba.is-chat {
  align-items: center;
  text-align: left;
  padding: 0.5rem var(--pba-inset) calc(var(--pba-comp-h) + 2rem);
}
.pba.is-chat .pba-head { display: none; }
/* Ersatz-Überschrift im Gespräch (nur Screenreader, pb-agent-hero.js) */
.pba:not(.is-chat) .pba-chat-h1 { display: none; }
/* Flex-Kind unter align-items:center würde auf Inhaltsbreite schrumpfen —
   das Transkript bekommt die volle Lesespalte explizit. */
.pba.is-chat pb-agent-chat { width: 100%; max-width: var(--pba-col); }

/* ---- Hero-Kopf ---- */
.pba-head { order: 1; max-width: 44rem; }
/* Headline EXAKT wie auf der klassischen Suche. search-hero.css scoped
   die Regel auf `.hero .hero-title` — hier gibt es kein `.hero`, darum
   sind die Werte 1:1 gespiegelt (bei Änderungen dort mitziehen). */
.pba-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-wrap: balance; /* auf dem Handy ist der Umbruch (.pb-br) ein Leerzeichen */
  font-size: clamp(1.75rem, 1.15rem + 2.9vw, 3.6rem);
  line-height: 0.98;
  letter-spacing: var(--track-display);   /* = .hero .hero-title */
  color: var(--text);
  margin: 0 0 2.25rem;
}

/* ============================================================
   2 · Promptbar
   ------------------------------------------------------------
   Geometrie = die Suchpille der klassischen Seite (.pb-ai):
   zweizeilige Karte mit generöser Rundung, Textfeld oben, die
   Werkzeugzeile (Senden) unten rechts. Gleiche Breiten-Kurve,
   gleiches Wachsen beim Schreiben.
   ============================================================ */
/* Spalte: Auswahlkarte (falls offen) · Pille · Tastatur-Hinweis */
.pba-comp {
  order: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pba-comp-pill {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: clamp(27rem, 46vw, 36.5rem);   /* = .pb-ai (EINE Pillengroesse) */
  min-height: 11.5rem;                       /* .pb-ai + zwei Zeilen; 12.08. etwas hoeher */
  padding: 1.375rem 1.25rem 1rem 1.75rem;    /* = .pb-ai */
  box-sizing: border-box;
  background: var(--field);
  border-radius: 1.75rem;                    /* = .pb-ai */
  text-align: left;
  cursor: text;
  /* 29.08.: KEINE eigene Groessen-Transition mehr — die Pille hat je
     Modus EINE feste Groesse. Das Fokus-Aufweiten animierte mitten im
     Modus-Wechsel (Fokusverlust) und liess den Flug zappeln. */
  box-shadow: var(--pba-halo, none);
}
/* Im Gespräch laufen die Kacheln unter der Pille durch; ihre Fläche ist der
   der Pille zu ähnlich (Mathias 05.10.2026: „verschmilzt“). Ein weicher,
   transparenter Hof in der Seitenfarbe hebt sie ab — kein Rand, kein Dunkel. */
.pba.is-chat { --pba-halo: 0 0 2.5rem 0.75rem color-mix(in srgb, var(--bg) 78%, transparent); }
/* Fokus im Textfeld: derselbe Halo wie an der Suchpille und allen
   Feldern (--focus-ring ≥ 3:1, WCAG 2.4.7, Audit 03.10.2026, Punkt 5) —
   der Cursor allein reichte nicht. Tastatur-Fokus auf den Knöpfen DARIN
   bleibt beim eigenen Ring `--ring`. */
.pba-comp-pill:has(.pba-comp-in:focus) { box-shadow: 0 0 0 0.1875rem var(--focus-ring), var(--pba-halo, 0 0 #0000); }
/* 29.08.: Fokus-Aufweiten entfernt (s. o.) — eine Groesse je Modus. */

/* Werkzeugzeile unten — Senden rechts (Muster .pb-ai-tools).
   29.08.: gap = .pb-ai-tools (0.125rem), sonst steht der
   Agent-Schalter beim Modus-Wechsel 17px versetzt. */
.pba-comp-tools {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin-top: auto;
}
/* Linke Gruppe: Eckdaten · Divider · Agent-Schalter; Senden rechts. */
pb-request-params { min-width: 0; }
.pba-comp-tools .pba-comp-send { margin-left: auto; }

/* ---- Eckdaten-Zeile (pb-request-params) ----
   Fünf Icons: leer = ruhig, gesetzt = im AI-Ton hinterlegt. Der Wert
   steht im Tooltip, geleert wird im Modal — so bleibt die Zeile schmal
   genug, dass ALLE fünf sichtbar sind (mit Werten wären Budget und
   Provision aus der Pille gescrollt). */
.pbp {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  min-width: 0;
}
.pbp-item {
  display: inline-flex;
  align-items: center;
  flex: none;
  border-radius: var(--r-pill);
  transition: background var(--dur) var(--ease);
}
.pbp-open {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  height: 2rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  /* 03.09. (Mathias): Farben wie die Nav-Glyphen der Seitenleiste —
     Ruhe leicht, Hover --text-soft (sidebar.css). */
  color: color-mix(in srgb, var(--text-soft) 55%, var(--surface));
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pbp-open:hover { color: color-mix(in srgb, var(--text-soft) 70%, var(--text)); background: var(--surface-2); }
.pbp-open:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: -0.125rem; }
.pbp-ic { display: grid; place-items: center; flex: none; }
.pbp-ic svg { width: 1.0625rem; height: 1.0625rem; }
/* Gesetzt: die Eckdate bekennt Farbe. Der Wert steht im Tooltip —
   fünf Werte nebeneinander passen nicht in die Pille. */
.pbp-item.is-set { background: var(--ai-tint); }
.pbp-item.is-set .pbp-open { color: var(--ai); }
.pbp-item.is-set .pbp-open:hover { background: color-mix(in srgb, var(--ai) 18%, transparent); }

/* „Leeren" im Modal-Fuß, links neben „Fertig". */
.pbb-modal-f { justify-content: space-between; }

/* Trägt der AGENT etwas ein, leuchtet das Icon einmal auf — die einzige
   Bewegung hier, und sie sagt genau das Richtige: „das kam nicht von dir". */
@keyframes pbpLand {
  0%   { background: var(--ai); }
  100% { background: var(--ai-tint); }
}
.pbp-item.just-set { animation: pbpLand 1s var(--ease); }
.pbp-item.just-set .pbp-open { animation: pbpLandFg 1s var(--ease); }
@keyframes pbpLandFg {
  0%   { color: #fff; }
  100% { color: var(--ai); }
}

/* Wrapper um das Textfeld — Anker für den rotierenden Platzhalter
   (.pb-ph, Optik/Keyframes in search-hero.css). Übernimmt die Flex-Rolle,
   die vorher das Textfeld direkt in der Pille hatte. */
.pba-comp-field {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
/* Overlay auf die ERSTE Zeile gepinnt (Textarea-Text ist top-aligned):
   top = vertikales Padding des Feldes, Höhe = eine Textarea-Zeile
   (--fs-lg × --lh-body, in geerbten em gerechnet) — die kleineren
   Beispiel-Layer (.pb-ph-l, search-hero.css) zentrieren sich darin.
   KEINE font-size hier: die em-Tokens der Layer würden sich sonst
   damit multiplizieren (so geschehen am 27.08., 1.5em × 1.5em). */
.pba-comp-ph {
  /* 29.08.: kein 3px-Versatz mehr — Platzhalter liegt pixelgleich auf
     der ersten Zeile der klassischen Suchpille (Modus-Wechsel). */
  inset: 0 0 auto;
  height: calc(var(--fs-body) * var(--lh-body));
}

.pba-comp-in {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  /* Schrift wie in der klassischen Suchpille (.pb-ai-input) — seit
     30.08. dort --fs-body (eine Zeile ≈ 1.5rem); min-height bleibt auf
     der Sendeknopf-Höhe, damit die Zeile nicht springt. Der harte
     Deckel in pb-agent-composer.js (#autoGrow) MUSS zum max-height
     passen. */
  min-height: 2.25rem;
  max-height: 13.75rem;
  border: 0;
  padding: 0; /* 29.08.: = .pb-ai-input — erste Zeile beider Pillen deckungsgleich */
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  resize: none;
  outline: none;
}
.pba-comp-in::placeholder { color: var(--text-faint); }
.pba-comp-in:disabled { color: var(--text-faint); -webkit-text-fill-color: var(--text-faint); }

.pba-comp-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: opacity var(--dur) var(--ease),
    color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pba-comp-send svg { width: 17px; height: 17px; }
.pba-comp-send:hover:not(:disabled) { background: var(--fill-hover); }
.pba-comp-send:disabled { background: transparent; color: var(--text-faint); cursor: default; }
.pba-comp-spin { display: none; color: var(--text); } /* Spur + Bogen aus currentColor (.pb-spin) */

/* Turn läuft: Pfeil weicht dem Spinner, die Bar ist gesperrt. */
.pba-comp.is-busy .pba-comp-send { background: transparent; color: var(--text-soft); }
.pba-comp.is-busy .pba-comp-send svg { display: none; }
.pba-comp.is-busy .pba-comp-spin { display: block; }
.pba-comp.is-busy .pba-comp-pill { cursor: default; }

/* Gesprächszustand: unten fixiert, über die Inhaltsspalte gespannt.
   Der linke Versatz folgt der Rail (dieselbe Rechnung wie .app-main).
   Die Karte selbst ist auf die Lesespalte gedeckelt und mittig —
   Transkript und Eingabe teilen sich dieselbe Achse. */
.pba.is-chat .pba-comp {
  position: fixed;
  left: calc(var(--rail-w) + var(--rail-gap) * 2);
  right: 0;
  width: auto; /* width:100% aus dem Grundzustand würde über `right` siegen und rechts überstehen */
  bottom: 0;
  z-index: calc(var(--z-sidebar) - 25);
  padding: 0.75rem var(--pba-inset) 1.25rem;
  /* Der Chat scrollt darunter durch — weicher Auslauf statt harter Kante. */
  background: linear-gradient(to top,
    var(--bg) 0%, var(--bg) 62%, color-mix(in srgb, var(--bg) 0%, transparent) 100%);
  transition: left var(--rail-dur) var(--rail-ease);
}
.pba.is-chat .pba-comp-pill,
.pba.is-chat .pba-comp-pill:focus-within,
.pba.is-chat .pba-comp-pill.params-open {
  max-width: var(--pba-col);
  min-height: 7.5rem;
  padding: 1rem 1rem 0.875rem 1.375rem;
}
/* Unten angekommen wird die Schrift ruhiger — genau so gross wie die
   Beschriftung der Seitenleiste (.nav-label, sidebar.css). Die grosse
   Anmutung gehört dem Ruhezustand, im Gespräch zählt die Lesespalte. */
.pba.is-chat .pba-comp-in {
  font-size: 16px;
  min-height: 1.75rem;
}
/* Offene Auswahlkarte macht die fixierte Bar höher — das Transkript
   braucht entsprechend mehr Auslauf, sonst liegt sein Ende darunter.
   --pba-qr-h ist die gemessene Höhe der Karte (suche.js, ResizeObserver,
   Klicktest UX 03.10.2026); 11rem nur als Rückfall. */
.pba.is-chat:has(.pba-qr-dock:not([hidden])) {
  padding-bottom: calc(var(--pba-comp-h) + 2rem + var(--pba-qr-h, 11rem));
}
/* Desktop: der Rechtsfuß hängt HINTER .pba am Container (app.js) und lag
   am Dokumentende unter der fixierten Eingabe — Impressum & Co. waren nicht
   erreichbar (WCAG 2.4.11, Audit 03.10.2026, Punkt 15). Seit 03.10.2026
   abends (Mathias: „eher unter dem Eingabefeld“) steht er im Gespräch fest
   UNTER der Eingabe, im unteren Polster der Bar — immer sichtbar, ohne
   Platz in der Lesespalte. Handy: dort polstert .pba-page den Container
   (Media-Query unten), der Fuß bleibt am Seitenende. */
@media (min-width: 768px) {
  .pba-page { --pba-comp-h: 12.5rem; } /* +1,5 rem Fußzeile in der Bar */
  .pba.is-chat .pba-comp { padding-bottom: 2.75rem; }
  .pba-page:has(.pba.is-chat) > .pb-legalfoot {
    position: fixed;
    left: calc(var(--rail-w) + var(--rail-gap) * 2);
    right: 0;
    bottom: 0;
    z-index: calc(var(--z-sidebar) - 24); /* über der Bar (… - 25) */
    margin: 0;
    padding: 0 1rem 0.875rem;
    transition: left var(--rail-dur) var(--rail-ease);
    /* kommt mit der Pille an (enterChat), statt aufzuspringen */
    animation: pba-rise 0.28s 0.2s var(--ease) both;
  }
  html.td-docked .pba-page:has(.pba.is-chat) > .pb-legalfoot {
    right: calc(var(--td-dock-w, 26.5rem) + var(--rail-gap) * 2);
  }
}
/* Intro (Mathias 05.10.2026): der Rechtsfuß steht fest unten mittig VOR der
   Kartenwand, mit weichem Schatten im Seitengrund — bis dahin rutschte er ans Seitenende HINTER die Wand
   (Entscheid 29.08.) und war nicht zu sehen. Gleiche Lage wie im Gespräch
   (oben), nur ohne Eingabe-Bar. */
.pba-page:has(.pba.is-intro) > .pb-legalfoot {
  position: fixed;
  left: calc(var(--rail-w) + var(--rail-gap) * 2);
  right: 0;
  bottom: 0;
  z-index: 1;
  /* nur so breit wie die Links, mittig (left/right + auto-Ränder); ein
     feiner, breiter Schatten im Seitengrund statt einer Fläche hält die
     Schrift über den Avataren der Wand lesbar (Mathias 05.10.2026: keine
     Ellipse, feiner, durchsichtiger, weicher, breiter) — ein flaches Band
     (::before), das seitlich und nach oben ausläuft. */
  width: fit-content;
  margin: 0 auto;
  padding: 1.5rem 9rem 0.875rem;
  text-shadow: 0 0 6px var(--bg);
  transition: left var(--rail-dur) var(--rail-ease);
}
.pba-page:has(.pba.is-intro) > .pb-legalfoot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  -webkit-mask:
    linear-gradient(to right, transparent, #000 32%, #000 68%, transparent),
    linear-gradient(to top, #000 35%, transparent);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(to right, transparent, #000 32%, #000 68%, transparent),
    linear-gradient(to top, #000 35%, transparent);
  mask-composite: intersect;
}
/* Handy (Mathias 05.10.2026): seit dort die Wand ebenfalls steht, gilt die
   Lage auch hier — im Fluss hing der Fuß mitten im Leerraum über der Wand.
   Ohne Schiene ganz links und über die volle Breite (die 9rem-Flanken von
   Desktop brächen die Links auf 390px um); das Band läuft nur nach oben aus
   und deckt etwas mehr, weil die Links hier genau auf Avatarhöhe der
   vordersten Reihe stehen. Unten Abstand zum Home-Indikator. */
@media (max-width: 767.98px) {
  .pba-page:has(.pba.is-intro) > .pb-legalfoot {
    left: 0;
    width: auto;
    padding: 1.25rem 1rem calc(0.875rem + env(safe-area-inset-bottom, 0px));
    text-shadow: 0 0 4px var(--bg), 0 0 8px var(--bg);
  }
  .pba-page:has(.pba.is-intro) > .pb-legalfoot::before {
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    -webkit-mask: linear-gradient(to top, #000 45%, transparent);
    mask: linear-gradient(to top, #000 45%, transparent);
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .pba-page:has(.pba.is-chat) > .pb-legalfoot,
  .pba-page:has(.pba.is-intro) > .pb-legalfoot { left: calc(var(--rail-collapsed) + var(--rail-gap) * 2); }
}
/* Per Tab fokussierte Karten/Knöpfe landen über der fixierten Eingabe,
   nicht darunter (scroll-padding gilt für focus()-Scrollen). */
html:has(.pba-page .pba.is-chat) { scroll-padding-bottom: 12rem; }
html:has(.pba-page .pba.is-chat .pba-qr-dock:not([hidden])) { scroll-padding-bottom: calc(12rem + var(--pba-qr-h, 11rem)); }
@media (min-width: 768px) {
  html:has(.pba-page .pba.is-chat) { scroll-padding-bottom: 13.5rem; }
  html:has(.pba-page .pba.is-chat .pba-qr-dock:not([hidden])) { scroll-padding-bottom: calc(13.5rem + var(--pba-qr-h, 11rem)); }
}
/* Angedocktes Talent-Fenster verschmälert .app-main (margin-right) —
   die fixierte Bar zieht mit, sonst läge sie darunter. */
html.td-docked .pba.is-chat .pba-comp {
  right: calc(var(--td-dock-w, 26.5rem) + var(--rail-gap) * 2);
}

/* ============================================================
   3 · Transkript — ruhige Lesespalte statt Chat-Kulisse
   ------------------------------------------------------------
   Der Agent antwortet als Fließtext direkt auf der Seitenfläche
   (kein Blasen-Chrome, kein Signet); nur der Nutzer spricht in
   einer dunklen Pille von rechts. Vorbild: das Claude-Chatfenster,
   übersetzt in die Pingbook-Tokens.
   ============================================================ */
.pba-log {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: 100%;
  max-width: var(--pba-col);
  padding: 1rem 0 0;
}

.pba-msg {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  animation: pba-rise 0.28s var(--ease) both;
}
.pba-msg.pba-settled { animation: none; }
@keyframes pba-rise {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}
.pba-msg--me { justify-content: flex-end; padding-left: 3rem; margin-top: 0.75rem; }
/* Der Körper nimmt die ganze Zeile (sonst schrumpfte das Kachel-Gitter
   auf die Breite der Textblase daneben) — die Blasen selbst bleiben über
   ihre eigene max-width schmal. */
.pba-msg-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.pba-msg-body > * { max-width: 100%; }

/* Das Agent-Signet ist im Transkript ausgeblendet — der Agent spricht
   als Fließtext, nicht als Chat-Partner mit Avatar (Claude-Muster).
   Das Markup bleibt (Replay, ARIA), nur die Optik weicht. */
.pba-ava { display: none; }

/* Bubbles: nur noch der NUTZER hat eine — dunkle Pille von rechts. */
.pba-b {
  max-width: 42rem;
  font-size: var(--fs-body);
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
/* Agent = Fließtext auf der Seitenfläche. Bewusst deutlich ÜBER Body
   (14px-Basis): das hier ist Lesetext, keine UI-Beschriftung — Claude
   setzt seine Antworten ähnlich groß ab. */
.pba-b.them {
  max-width: 100%;
  padding: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.125em;
  line-height: 1.65;
}
.pba-b.me {
  /* Hell: dunkle Pille (--primary) — --surface-2 ≈ --bg, die Blase war
     unsichtbar (Mathias, 30.08.). Dunkel behält die ruhige Chip-Fläche:
     dort ist --primary fast weiß und überstrahlte das Transkript
     (Wunsch Mathias, 29.08.). */
  background: var(--primary);
  color: var(--primary-text);
  padding: 0.8125rem 1.25rem;
  border-radius: 1.375rem;
  font-size: 1.0625em; /* zieht mit dem größeren Agent-Lesetext mit */
}
[data-theme="dark"] .pba-b.me {
  background: var(--surface-2);
  color: var(--text);
}
/* Fehler und Versand-Notiz behalten ihre Karte (Spezifität muss den
   transparenten .them-Fließtext schlagen). */
.pba-b.them.pba-b--error {
  display: flex;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r-xl);
  background: var(--bad-bg);
  color: var(--bad-fg); /* Fehler rund und rot (Design „Neu“ #19) */
  font-size: var(--fs-body);
}
.pba-err-ic { flex: none; color: var(--bad-fg); display: grid; place-items: center; height: 1.5rem; }
.pba-err-ic svg { width: 17px; height: 17px; }
.pba-b.them.pba-b--note {
  display: flex;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r-xl);
  background: var(--ok-bg);
  font-size: var(--fs-body);
}
.pba-note-ic { flex: none; color: var(--ok-fg); display: grid; place-items: center; height: 1.5rem; }
.pba-note-ic svg { width: 17px; height: 17px; }
/* Das Schloss füllt sein Feld stärker als Haken/Uhr und wirkte größer als
   die übrigen Schlösser der App (12–13 px in den Pillen) — 14 px passt zum
   Fließtext der Notiz (Mathias 05.10.2026). */
.pba-note-ic[data-ic="lock"] svg { width: 14px; height: 14px; }
/* Sperr-/Grenz-Ton: EXAKT der Sperr-Look der App — --warn-tint/--warn
   wie .pb-btn.is-locked, die Tagessatz-Pille und der Checkout-Topup
   (nicht --warn-bg/-fg, das nutzt nur die Pausen-Zeile im
   Talent-Fenster). Grün bleibt den Erfolgs-Notizen. */
.pba-b.them.pba-b--note.pba-b--warn { background: var(--warn-tint); color: var(--warn); }
.pba-b--warn .pba-note-ic { color: var(--warn); }
.pba-note-hint { display: block; margin-top: 0.25rem; font-size: var(--fs-sm); color: var(--text-soft); }

/* Aktionen unter einer Fehler-Bubble */
.pba-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pba-act--link {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.pba-act--link:hover { color: var(--text); }

/* ---- Schnellantworten — Pillen über der Promptbar ----
   Seit 01.10.2026 (Design „Neu“): keine Karte mehr, sondern je Antwort
   eine Pille auf --surface direkt über der Promptbar, untereinander;
   ohne Kopf (die Frage steht im Verlauf) und ohne ✕ (Escape schließt).
   Nummer + ⏎ bleiben, ↑/↓ + Enter wählen; der Tastatur-Hinweis steht im
   Tooltip der Liste. Gerendert von pb-agent-composer. */
.pba-qr-dock {
  width: 100%;
  max-width: clamp(27rem, 46vw, 36.5rem);  /* = Ruhebreite der Pille */
  margin-bottom: 0.625rem;
  padding: 0 0 0.5rem;
  box-sizing: border-box;
  text-align: left;
  animation: pba-rise 0.28s var(--ease) both;
}
.pba.is-chat .pba-qr-dock { max-width: var(--pba-col); }
.pba-qr-list { display: flex; flex-direction: column; gap: 0.5rem; }
.pba-qr-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.pba-qr-row:hover, .pba-qr-row.is-active { background: var(--surface-bright); }
.pba-qr-row:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: var(--ring-offset); }
.pba-qr-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.5rem;
  background: var(--surface-2);
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.pba-qr-row:hover .pba-qr-num, .pba-qr-row.is-active .pba-qr-num { background: var(--surface-3); }
.pba-qr-lbl { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pba-qr-ret {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-faint);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.pba-qr-ret svg { width: 15px; height: 15px; }
.pba-qr-row:hover .pba-qr-ret, .pba-qr-row.is-active .pba-qr-ret { opacity: 1; }

/* Slice 11d (Supabase): Demo-Hinweis unter der Pille — Basis nutzt den
   Agenten mit maskierten Profilen und einem Tageskontingent. */
.pba-comp-quota {
  display: block;
  margin: 0.5rem 0 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: center;
}
/* Design „Neu“ #20/#84/#85: „**Demomodus** · noch 3 von 5 Suchläufen“ als
   leiser Text, keine Pille; die Einschränkungen stehen im Tooltip. */
.pba-comp-quota b { font-weight: 700; color: var(--text-soft); }
.pba-comp-quota[hidden] { display: none; }
/* Ruhezustand (Mathias 05.10.2026: „ruckelt beim Aufbau von Headline,
   Pille und Begrüßung“): die Zeile kommt erst mit der Kontingent-Antwort
   des Servers. Im Fluss schob sie den vertikal zentrierten Block dann um
   eine halbe Zeile nach oben. Jetzt schwebt sie unter der Pille, ohne
   Platz zu nehmen — Begrüßung, Titel und Pille stehen fest und pixelgleich
   zur klassischen Suche; die Zeile blendet weich ein. */
.pba.is-intro .pba-comp { position: relative; }
.pba.is-intro .pba-comp-quota {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  animation: pba-quota-in 0.3s var(--ease) both;
}
@keyframes pba-quota-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- Arbeitszeile des Agenten ----
   EINE Zeile, direkt auf der Seitenfläche (Abnahme 03.09., dritte
   Runde: keine Liste, keine Chips, kein Aufklapper — „zu viele
   Elemente"): links das stille Buch-Icon, dann „11 s · Durchsuche
   Profile nach „…“ …" (Claude-Muster, Zeit zuerst). Das Phasenwort
   schimmert und rollt beim Wechsel. Fertig: „✓ Erledigt in 14 s ·
   2 Suchen" — dieselbe Zeile, still. */
.pba-work { width: 100%; }
.pba-work-head { display: flex; align-items: center; gap: 0.625rem; min-height: 1.5rem; }
.pba-work-time {
  flex: none;
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}
.pba-work-sep { flex: none; color: var(--text-faint); }
.pba-work-time:empty, .pba-work-time:empty + .pba-work-sep { display: none; }
.pba-work-title {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}
/* Live: EINE Zeile fester Höhe, die clipt — der Phasenwechsel rollt
   den alten Text oben hinaus und den neuen von unten herein. Das
   scheidende Wort liegt absolut, damit die Zeile nicht springt. */
.pba-work[data-state="live"] .pba-work-title {
  position: relative;
  flex: 1 1 auto;
  height: 1.4em;
  overflow: hidden;
}
.pba-work-word {
  display: block;
  line-height: 1.4em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Das scheidende Wort: aus dem Fluss genommen. Die Bewegung selbst
   fährt pb-agent-chat.js über die Web Animations API (siehe dort). */
.pba-work-word.is-out { position: absolute; inset: 0; }
/* Schimmer: eine helle Welle läuft durch das Phasenwort (Claude-/
   ChatGPT-Muster) — das eine Signal, dass gerade gearbeitet wird. Auf
   dem INNEREN Span, getrennt vom rollenden äußeren: `background-clip:
   text` und eine Transform-Animation auf demselben Element lassen
   Chrome die Textmaske verlieren (Balken statt Schrift). */
.pba-work-shim { display: inline-block; max-width: 100%; }
.pba-work[data-state="live"] .pba-work-shim {
  background: linear-gradient(90deg,
    var(--text-soft) 0%, var(--text-soft) 35%,
    var(--text) 50%,
    var(--text-soft) 65%, var(--text-soft) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pba-shimmer 2.2s linear infinite;
}
@keyframes pba-shimmer {
  from { background-position: 125% 0; }
  to   { background-position: -125% 0; }
}

/* Fertig: Haken statt Buch, Dauer, Suchzahl. Der Haken ohne Farbe —
   kein Grün, aber im Kreis: neutrale Chip-Fläche, Haken im gedämpften
   Ton der Zeile (04.09.). */
.pba-work-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--r-pill);
  background: var(--surface-warm);  /* Chip auf Seitengrund — --surface-2 wäre auf Hell ein Hauch */
  color: var(--text-soft);
}
.pba-work-ic svg { width: 12px; height: 12px; }
.pba-work-meta { flex: none; color: var(--text-faint); }
.pba-work-meta::before { content: "· "; }

/* Laufender Schritt: ein stilles Buch-Icon (Mathias 05.10.2026, wie das
   Lese-Icon in Claude). Bis dahin blätterte hier die V3-Logo-Animation als
   Sprite-Maske — die Bewegung zeigt jetzt allein der Schimmer des
   Phasenworts. Im Ton der Zeile (--text-soft), kein --ai. */
.pba-now-book {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--text-soft);
}
.pba-now-book svg { width: 100%; height: 100%; }

/* ============================================================
   3b · Ergebnis-Kacheln im Gespräch
   ------------------------------------------------------------
   Dieselbe <pb-talent-card> wie im Feed, nur enger gesetzt: der
   Chat ist eine Spalte, keine Suchergebnisseite. Unter jeder
   Kachel der lila Stern mit den Begründungen.
   ============================================================ */
.pba-results {
  display: grid;
  gap: 0.875rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr));
  width: 100%;
  margin-top: 0.25rem;
}
.pba-res { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.pba-res pb-talent-card { display: block; }

/* ---- Handlungsaufruf unter den Kacheln ----
   Die Ergebnisse sollen nicht ins Leere laufen. Bewusst KEINE Karte:
   der Aufruf gehört zur Kachelreihe darüber, nicht daneben — deshalb
   nur eine Trennlinie, kein eigener Kasten. Solange nichts ausgewählt
   ist, steht hier ein Satz ohne Knopf: die Handlung ist dann der
   Plus-Knopf auf den Kacheln, nicht ein zweites Ziel. */
.pba-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: 100%;
  /* Design „Neu“ (01.10.2026): ohne Trennlinie, Knöpfe wie „Weiter“ */
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 0;
}
.pba-cta-acts {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pba-cta-go,
.pba-cta-more { flex: none; }
/* Handy: Aktionen zentriert über die volle Breite (Design „Neu“ #21) */
@media (max-width: 560px) {
  .pba-cta-acts { flex-direction: column; align-items: stretch; width: 100%; }
  .pba-cta-acts .pb-btn { width: 100%; justify-content: center; }
}

/* Der lila Stern wohnt seit 29.08. AUF der Kachel (.pb-why-btn,
   talent-card.css) — Kreis neben „Hinzufügen", Begründungen im
   Tooltip. Die frühere Zeile unter der Kachel (.pba-star/.pba-reasons)
   ist ersatzlos entfallen. */
/* ============================================================
   3c · Anfrage-Entwurf
   ============================================================ */
.pba-draft {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  max-width: 30rem;
  padding: 1.5rem;
  border-radius: var(--r-xl);
  background: var(--surface);
  /* Flach wie die Freelancer-Kachel (.pb-fcard): keine Kontur. Der
     Indigo-Rahmen der ersten Fassung stand als einzige Karte im
     Transkript mit Rand da (Mathias, 03.09.). */
  border: 0;
}
.pba-draft-h { display: flex; align-items: center; gap: 0.5rem; }
.pba-draft-t {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem; /* größer, ohne Icon (Design „Neu“) */
}
.pba-draft-people { display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; }
.pba-draft-p {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  font-size: var(--fs-xs);
  color: var(--text);
}
.pba-draft-av {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--r-pill);
  background: var(--avatar);
  font-size: 0.625rem;
  font-weight: 900;
  color: var(--text-soft);
}
.pba-draft-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Eckdaten als Pillen wie im Anfrage-Detail (Design „Neu“ #17) */
.pba-draft-params {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pba-draft-params li {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: var(--r-pill);
  background: rgb(var(--tint) / 0.075);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.pba-draft-pic { display: grid; place-items: center; color: var(--text-soft); }
.pba-draft-pic svg { width: 16px; height: 16px; }
/* Die Nachricht als Zitat mit feiner Linie statt Fläche auf Fläche */
.pba-draft-msg {
  margin: 0;
  padding: 0 0 0 0.875rem;
  border-left: 0.125rem solid var(--hairline-strong);
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.pba-draft-cta { align-self: flex-start; }

/* ============================================================
   4 · Kopfzeile — nichts Besonderes mehr
   ------------------------------------------------------------
   Diese Seite hatte die einzige klebende `.main-top` der App: sie
   trug eine deckende Fläche samt weichem Auslauf nach unten, damit
   das Gespräch sauber darunter durchlief. Beides ist entfallen —
   der Krümelpfad darf wegscrollen wie überall sonst, und der
   dunkle Balken mit Verlauf war ein Fremdkörper auf einer Seite,
   die sonst nur Fläche zeigt.

   Erreichbar bleiben muss trotzdem die Auswahl. Die hängt jetzt
   nicht mehr an dieser Kopfzeile, sondern steht für sich fest —
   app-weit, siehe `.sel-zone` in selection-bar.css. Genau deshalb
   konnte die Kopfzeile hier ohne Verlust statisch werden.

   Inhalt und Optik entsprechen der klassischen Suche: Krümelpfad
   links, <pb-selection-bar> mit eigener Karte rechts. Die
   Anfrage-Eckdaten (Zeitraum, Aufwand, …) stehen NICHT hier — der
   Agent trägt sie ein, geprüft und geändert werden sie im Checkout
   hinter „Weiter" (pb-request-panel).
   ============================================================ */
/* ---- Editor-Modal (mittig) ---- */
.pbb-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: var(--scrim);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.pbb-scrim[hidden] { display: none; }
.pbb-scrim.open { opacity: 1; }
.pbb-modal {
  /* Breiter als der Checkout-Streifen: hier ist Platz für zwei Monate
     nebeneinander und für Werte in Anzeigengrösse. */
  width: min(44rem, 100%);
  max-height: min(46rem, calc(100vh - 3rem));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(0.5rem) scale(0.99);
  transition: transform 0.2s var(--ease);
}
/* Die schmalen Editoren brauchen die Breite nicht — sie wirkt dort leer. */
.pbb-modal--effort,
.pbb-modal--budget,
.pbb-modal--fee,
.pbb-modal--message { width: min(30rem, 100%); }
.pbb-scrim.open .pbb-modal { transform: none; }

/* ---- Kopf: Titel mittig, „Zurücksetzen" als Textlink oben rechts ----
   Der Link liegt absolut, damit der Titel unabhängig von seiner
   Wortlänge wirklich mittig steht. */
.pbb-modal-h {
  flex: none;
  position: relative;
  padding: 1.25rem 1.25rem 0.5rem;
}
.pbb-modal-t {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: var(--track-heading);
}
/* Nur sichtbar, wenn der Schritt einen Wert trägt (hidden-Attribut,
   #syncReset in pb-request-params.js); bewusst ohne Unterstreichung. */
.pbb-modal-reset {
  position: absolute;
  top: 1.375rem;
  right: 1.25rem;
  border: none;
  background: none;
  padding: 0.125rem 0;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.pbb-modal-reset:hover { color: var(--text); }

/* ---- Fuss: eine Zeile, ganze Breite ---- */
.pbb-modal-f {
  flex: none;
  padding: 0.75rem 1.5rem 1.5rem;
}
.pbb-modal-done {
  width: 100%;
  /* Dieselbe Form wie der „Weiter"-Knopf der Auswahl-Leiste (.sel-go:
     r-xl − 0.5rem Karten-Einzug = 8px) — vorher r-lg (12px), der Knopf
     wirkte runder als seine Geschwister (20.08., Mathias). */
  border-radius: calc(var(--r-xl) - 0.5rem);
  background: var(--surface-2);
  color: var(--text-soft);
  font-weight: 600;
}
.pbb-modal-done:hover { background: var(--surface-3); color: var(--text); }
.pbb-modal-done:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: var(--ring-offset); }

/* ---- Die Editoren in Anzeigengrösse ----
   Nur HIER hochskaliert — im Checkout bleiben sie kompakt, dort teilen
   sich fünf Schritte eine schmale Spalte. */
.pbb-modal .rqp-big { height: 5.75rem; border-radius: var(--r-xl); }
.pbb-modal .rqp-big-v { font-size: 3.25rem; font-weight: 800; letter-spacing: var(--track-display); }
.pbb-modal .rqp-bud input { font-size: 3.25rem; font-weight: 800; letter-spacing: var(--track-display); }
.pbb-modal .rqp-bud-cur { font-size: 3.25rem; font-weight: 800; }
/* Auf der weissen Modalfläche verschwände die Fläche der Kreise —
   im Checkout liegen sie auf beigem Grund und brauchen keine Kontur. */
.pbb-modal .rqp-round {
  width: 3.25rem;
  height: 3.25rem;
  background: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--border);
}
.pbb-modal .rqp-round:hover:not(:disabled) { background: var(--surface-1); }
.pbb-modal .rqp-eff { gap: 1rem; }
.pbb-modal .rqp-msg { min-height: 11rem; border-radius: var(--r-xl); }

/* Segmentleiste ohne Schiene: nur die gewählte Option bekennt Farbe. */
.pbb-modal .rqp-seg {
  justify-content: center;
  gap: 0.25rem;
  padding: 0;
  background: transparent;
}
.pbb-modal .rqp-seg-b { padding: 0.5rem 0.875rem; font-size: var(--fs-body); }
.pbb-modal .rqp-seg-b.on {
  background: var(--ai-tint);
  color: var(--ai);
  box-shadow: none;
}

.pbb-modal .rqp-seg-b { flex: none; }

/* ---- Kalender im Modal ----
   Jeder Monat sitzt auf einer eigenen ruhigen Fläche, und der gewählte
   Zeitraum spricht im AI-Ton statt in Schwarz — er ist hier oft vom
   Agenten gesetzt. Die :hover-Regeln der Basis tragen !important,
   darum hier ebenfalls (bei höherer Spezifität). */
.pbb-modal .mcal {
  background: var(--surface-1);
  border-radius: var(--r-xl);
  padding: 1rem 0.875rem 0.75rem;
}
.pbb-modal .mcal-title { font-size: var(--fs-body); font-weight: 600; }
.pbb-modal .rqp .cd.inr { background: var(--ai-tint); color: var(--ai); }
.pbb-modal .rqp .cd.edge { background: var(--ai); color: #fff; }
.pbb-modal .rqp .cd.inr:hover { background: var(--ai-tint) !important; color: var(--ai); }
.pbb-modal .rqp .cd.edge:hover { background: var(--ai) !important; color: #fff; }
.pbb-modal .rqp .cd.today:not(.edge):not(.inr) { background: var(--surface-2); }

/* Zwei Monate nebeneinander; darunter wird gestapelt. */
.mcal-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mcal-arrow-sp { width: 1.75rem; height: 1.75rem; }
@media (max-width: 639.98px) {
  .mcal-pair { grid-template-columns: 1fr; }
  .mcal-pair .mcal:last-child { display: none; }
}

/* Der Editor-Körper trägt `class="rqp"`, damit die unter `.rqp`
   verschachtelten Kalender-Regeln greifen (request-panel.css). Die
   INSEL-Geometrie derselben Klasse muss dafür weichen — hier, gezielt
   und an einer Stelle, statt die Regeln dort zu entschachteln. */
.pbb-modal .rqp {
  position: static;
  inset: auto;
  width: auto;
  max-width: none;
  height: auto;
  display: block;
  overflow-y: auto;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  transition: none;
  padding: 1rem 1.125rem 0.25rem;
}

/* ============================================================
   5 · Bewegung sparsam
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pba-msg, .pba-qr-dock, .pba-page > .pb-legalfoot, .pba-comp-quota { animation: none; }
  /* Kein Schimmer */
  .pba-work[data-state="live"] .pba-work-shim { animation: none; color: var(--text); background: none; }
  .pba-comp-send:hover:not(:disabled) { transform: none; }
}

/* ============================================================
   6 · Schmale Viewports
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .pba.is-chat .pba-comp { left: calc(var(--rail-collapsed) + var(--rail-gap) * 2); }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .pba { --pba-inset: 1.25rem; }
  .pba.is-intro { min-height: clamp(16rem, calc(100dvh - 18rem), 30rem); }
}

@media (max-width: 767.98px) {
  .pba-page { --pba-comp-h: 9.75rem; }
  .pba { --pba-inset: 1rem; }
  /* Handy: knappe Höhe — die Hochschiebe-Luft von Desktop wieder raus */
  .pba.is-intro { min-height: clamp(12rem, calc(100dvh - 16rem), 26rem); padding-inline: 1rem; padding-bottom: 1.25rem; }
  /* = .pb-ai auf dem Handy (search-hero.css) */
  .pba-comp-pill { min-height: 8.5rem; padding: 1.125rem 1.125rem 0.875rem 1.375rem; }
  .pba-comp-in { font-size: max(16px, var(--fs-md)); } /* iOS-Zoom-Falle, = .pb-ai-input */
  /* Erste-Zeilen-Box des Overlays folgt der mobilen Textarea-Zeile. */
  .pba-comp-ph { height: calc(max(16px, var(--fs-md)) * var(--lh-body)); }
  .pba.is-chat .pba-comp {
    left: 0;
    padding: 0.625rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }
  .pba.is-chat .pba-comp-pill,
  .pba.is-chat .pba-comp-pill:focus-within,
  .pba.is-chat .pba-comp-pill.params-open { min-height: 7.5rem; }
  .pba-msg--me { padding-left: 1.5rem; }
  .pba-b { max-width: 100%; }
  .pba-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }

  /* Die schwebende Auswahl-Insel (selection-bar.css) verdeckte im Agent
     sonst den Verlauf bzw. saß auf der fixierten Promptbar. Seit 01.10.2026
     (Design „Neu“): leer ist sie im Agent weg, mit Auswahl steht sie oben
     unter dem Mobilkopf. */
  .app-main.is-agent .sel-zone:not(:has(.sel-go.has)) { display: none; }
  /* + Hinweis-Streifen: der Mobilkopf rückt um --strips-h nach unten
     (strips.css), die Insel lag sonst auf ihm (Mobil-Prüfung 04.10.2026). */
  .app-main.is-agent .sel-zone {
    top: calc(var(--rail-gap) + 4.5rem + env(safe-area-inset-top, 0px) + var(--strips-h, 0px));
    bottom: auto;
  }
  /* .app-main reserviert unten Platz für die schwebende Insel (4.75rem,
     layout.css) — auf dieser Seite kommt die fixierte Promptbar dazu. */
  .pba-page {
    padding-bottom: calc(4.75rem + var(--pba-comp-h) + env(safe-area-inset-bottom, 0px));
  }
  /* Im Ruhezustand gibt es weder die fixierte Eingabe noch (leer) die
     Insel; der Rechtsfuß steht fest vor der Kartenwand (oben). Es bleibt
     nur Luft für ihn — sonst scrollte die Seite auf niedrigen Handys
     (iPhone SE mit Safari-Leisten) um diese Reserve (Mathias 05.10.2026). */
  .pba-page:has(.pba.is-intro) {
    padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
  }
  /* Diesen Platz unter der Eingabe hält auf dem Handy schon .pba-page
     (oben) — die Bühne reservierte ihn ein zweites Mal (Grundregel
     `--pba-comp-h + 2rem`). Am Gesprächsende standen so rund 180px Leere
     vor dem Rechtsfuß, und „ans Ende scrollen“ schob den Anfang eines
     kurzen Beitrags unter den Mobilkopf (Mobil-Prüfung 04.10.2026). Die
     Bühne braucht hier nur noch Luft zum Fuß und, mit offener
     Auswahlkarte, deren Höhe. */
  .pba.is-chat { padding-bottom: 2rem; }
  .pba.is-chat:has(.pba-qr-dock:not([hidden])) {
    padding-bottom: calc(2rem + var(--pba-qr-h, 11rem));
  }
}