/* =====================================================================
   Rechteck-Auswahl auf jeder Portalseite (Stufe 2, Paket 02a, 23.09.2026)
   js/auswahl.js · docs/AUSWAHL-2026-09-23.md

   Drei Knoten: der feste Rahmen, die Aktionsleiste an seiner unteren
   Kante, und der Chip „Auswahl (N Zeichen)" im Chat — vor dem Senden im
   Anhangskasten, danach als aufklappbarer Block in der Nutzerblase. Nur
   --pp-Tokens (hell und dunkel), Bewegung nur unter `.pp-anim`.

   Die Chip-Klasse heißt bewusst `ki-ausschnitt`, nicht `ki-auswahl`:
   `.ki-auswahl` ist seit dem 14.09.2026 die Situationskarte ÜBER dem
   Eingabefeld (docs/KI-AUSWAHL-2026-09-14.md), und deren Tests zählen
   diese Klasse.
   ===================================================================== */

/* Solange gezogen wird, wählt der Browser keinen Text mit (A1: der blanke
   Linkszug ist der Rahmen; Shift + Zug bleibt die native Auswahl und
   setzt diese Klasse nie). */
body.pp-auswahl-aktiv, body.pp-auswahl-aktiv * { user-select: none; -webkit-user-select: none; }
body.pp-auswahl-aktiv { cursor: crosshair; }

/* Der Rahmen: fest im Viewport, über der Seite, unter Kopfzeile-Overlays
   und Dialogen (.pp-modal-bg steht auf 150; die Leiste darf nie über
   einem Dialog liegen — ein offener Dialog beendet die Geste ohnehin). */
#pp-auswahl-rahmen {
  position: fixed; z-index: 138; pointer-events: none;
  border: 1.5px solid var(--pp-accent);
  border-radius: 4px;
  box-sizing: border-box;
}
/* Die Füllung ist eine EIGENE, halbdurchsichtige Ebene — nie das Token
   --pp-accent-tint als Hintergrund: Das ist im hellen Theme DECKEND
   (rgb(231,240,253), WebKit gemessen), und der Rahmen deckte den Text zu,
   den er markiert. Die Deckkraft steht hier, nicht am Token; die Farbe
   bleibt der Akzent beider Themes. */
#pp-auswahl-rahmen::before {
  content: ""; position: absolute; inset: 0; border-radius: 3px;
  background: var(--pp-accent); opacity: .13;
}

/* Die Aktionsleiste an der unteren Rahmenkante. Eine SPALTE (r1-05): oben
   die Knöpfe, darunter — erst nach „KI fragen" — das Feld. Ohne Feld ist
   die Spalte genau die Knopfzeile und sieht aus wie vorher. */
#pp-auswahl-leiste {
  position: fixed; z-index: 139;
  display: inline-flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 4px 6px;
  border: 1px solid var(--pp-line-2); border-radius: 10px;
  background: var(--pp-surface); color: var(--pp-text);
  box-shadow: var(--pp-lift);
  font-family: var(--pp-sans); font-size: var(--pp-fs-klein);
  white-space: nowrap; max-width: calc(100vw - 8px);
}
#pp-auswahl-leiste .pp-auswahl-knoepfe { display: flex; align-items: center; gap: 6px; }
#pp-auswahl-leiste .pp-btn { line-height: var(--pp-lh-eng); }
/* Das Feld unter der Leiste (r1-05). Die Breite ist eine OBERgrenze —
   auf dem Telefon nimmt es, was da ist. `white-space` zurück auf normal:
   Die Leiste steht auf nowrap (die Knopfzeile bricht nie um), Chip und
   Zielzeile tragen ihre Ellipse selbst. */
#pp-auswahl-leiste .pp-auswahl-frage {
  display: flex; flex-direction: column; gap: 4px;
  width: min(440px, calc(100vw - 24px));
  padding: 6px 0 2px; border-top: 1px solid var(--pp-line);
  white-space: normal;
}
#pp-auswahl-leiste .pp-auswahl-chip {
  align-self: flex-start; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 8px; border-radius: 8px;
  border: 1px solid var(--pp-line-2); background: var(--pp-bg-2); color: var(--pp-text-2);
  font-size: var(--pp-fs-mini); line-height: var(--pp-lh-eng);
}
#pp-auswahl-leiste .pp-auswahl-feldzeile { display: flex; align-items: flex-end; gap: 6px; }
/* AW1 (14.10.2026, docs/AW1-AUSWAHL-PDF-TEXT-2026-10-14.md): Das Feld
   wächst mit dem Text bis ≈ 8 Zeilen (FELD_MAX in js/auswahl.js) und hat
   einen ZIEHGRIFF — Jonas: „die Box lässt sich nicht in der Größe
   anpassen". `resize: both`: in der Höhe frei (Deckel 60 % des Fensters),
   in der Breite bis an den Rand; die Hülle (.pp-auswahl-frage) wächst mit
   (width: auto, min-width statt width). Kein waagerechter Rollbalken:
   Zeilen brechen (pre-wrap), overflow-x hidden. */
#pp-auswahl-leiste .pp-auswahl-frage { width: auto; min-width: min(440px, calc(100vw - 24px)); max-width: calc(100vw - 24px); }
#pp-auswahl-leiste .pp-auswahl-feld {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box;
  min-height: 32px; max-height: 60vh; resize: both; overflow-y: auto; overflow-x: hidden;
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-width: calc(100vw - 90px);
  padding: 6px 8px; border: 1px solid var(--pp-line-feld); border-radius: 8px;
  background: var(--pp-bg); color: var(--pp-text);
  font: var(--pp-fs-klein)/var(--pp-lh-text) var(--pp-sans);
}
#pp-auswahl-leiste .pp-auswahl-feld::placeholder { color: var(--pp-text-3); opacity: 1; }
#pp-auswahl-leiste .pp-auswahl-feld:focus { border-color: var(--pp-accent); }
#pp-auswahl-leiste .pp-auswahl-senden { flex: none; }
#pp-auswahl-leiste .pp-auswahl-ziel {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--pp-text-2); font-size: var(--pp-fs-mini); line-height: var(--pp-lh-eng);
}
#pp-auswahl-leiste .pp-auswahl-ziel b { color: var(--pp-text); font-weight: 600; }
/* Auf dem Finger (Regel C56): das Feld 44 px hoch wie jeder Knopf daneben. */
@media (max-width: 860px), (pointer: coarse) and (max-width: 1200px) {
  #pp-auswahl-leiste .pp-auswahl-feld { min-height: 44px; }
}
#pp-auswahl-leiste .pp-auswahl-zu {
  border: 0; background: transparent; color: var(--pp-text-2);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  font: 16px/1 var(--pp-sans);
}
#pp-auswahl-leiste .pp-auswahl-zu:hover { color: var(--pp-err); background: var(--pp-bg-2); }
/* fx1020 (ab1020 Befund S3): Auf dem Finger stand das ✕ mit 30 × 30 px neben
   44 px hohen Knöpfen — nur mit eigenen Knöpfen des Wirts (.mit-eigenen,
   unten) war es schon 44. Jetzt IMMER auf dem Finger (Regel C56). */
@media (max-width: 860px), (pointer: coarse) and (max-width: 1200px) {
  #pp-auswahl-leiste .pp-auswahl-zu { width: 44px; height: 44px; flex: none; }
}

/* Der Chip im Chat — vor dem Senden (im Anhangskasten) und danach in der
   Nutzerblase. Die Blase steht auf `white-space: pre-wrap` (die Antwort
   des Modells braucht es); ein Block darin malt sonst seine eigene
   Einrückung (18.09.2026, WebKit gemessen: 327 statt 131 px). Deshalb
   `white-space: normal` an der Hülle, `pre-wrap` nur im Textkörper. */
.ki-ausschnitt {
  display: block; white-space: normal; max-width: 100%;
  margin: 2px 0 6px; border-radius: 8px;
  border: 1px solid var(--pp-line-2); background: var(--pp-bg-2); color: var(--pp-text);
  font-size: var(--pp-fs-mini);
}
.ki-msg.du .ki-ausschnitt { background: var(--pp-surface); }
.ki-ausschnitt > summary {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px; cursor: pointer; list-style: none;
  color: var(--pp-text-2);
}
.ki-ausschnitt > summary::-webkit-details-marker { display: none; }
.ki-ausschnitt > summary::before { content: "›"; display: inline-block; color: var(--pp-text-2); }
.ki-ausschnitt[open] > summary::before { transform: rotate(90deg); }
/* Wer in der Kopfzeile nachgibt (Fallstrick 41): NUR der Ort — er trägt die
   Ellipse. Symbol und Beschriftung sind ein Flex-Kind ohne Schrumpfen; ohne
   `flex: none` brach „✂ Auswahl (453 Zeichen)" in WebKit mitten in der
   Klammer um, während der Ort daneben abgeschnitten wurde. */
.ki-ausschnitt > summary .ki-ausschnitt-kopf { flex: none; white-space: nowrap; }
.ki-ausschnitt > summary .ki-ausschnitt-ort {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto;
}
.ki-ausschnitt > summary button {
  margin-left: auto; border: 0; background: none; cursor: pointer; padding: 0 2px;
  color: var(--pp-text-2); font-size: var(--pp-fs-mini); line-height: var(--pp-lh-eng);
}
.ki-ausschnitt > summary button:hover { color: var(--pp-err); }
.ki-ausschnitt > pre {
  margin: 0; padding: 6px 10px 8px; max-height: 260px; overflow: auto;
  border-top: 1px dashed var(--pp-line-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
  font: var(--pp-fs-mini)/var(--pp-lh-text) var(--pp-mono);
  color: var(--pp-text);
}

/* Bewegung nur mit Schalter, nie unter reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .pp-anim #pp-auswahl-leiste { animation: pp-auswahl-auf 140ms ease-out; }
  .pp-anim #pp-auswahl-rahmen { transition: background-color 120ms ease-out; }
}
@keyframes pp-auswahl-auf {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Die EIGENEN Knöpfe eines Wirts (HEFT-AUSWAHL-LEISTE, 13.10.2026 —
   docs/HEFT-AUSWAHL-LEISTE-2026-10-13.md): das Heft hängt Kopieren,
   Ausschneiden, Duplizieren, Text kopieren, Löschen (Symbole der
   Zeichenleiste) und „→ Aufgabe" hinter „KI fragen". Mit ihnen DARF die
   Knopfzeile umbrechen — auf dem Telefon (390 px) passt sie nicht in eine
   Zeile, und eine Leiste, die aus dem Bild ragt, ist keine. Ohne eigene
   Knöpfe bleibt sie einzeilig wie überall. */
#pp-auswahl-leiste.mit-eigenen { white-space: normal; }
#pp-auswahl-leiste.mit-eigenen .pp-auswahl-knoepfe { flex-wrap: wrap; row-gap: 4px; }
#pp-auswahl-leiste .pp-auswahl-eigen { flex: none; white-space: nowrap; }
/* Ein Symbol-Knopf so hoch wie der Textknopf daneben (.pp-btn.slim:
   6 + Zeile + 6 + Rand = 27 px, in WebKit gemessen; 4 + 17 + 4 + 2 = 27). */
#pp-auswahl-leiste .pp-auswahl-eigen.nur-symbol {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; padding: 4px 6px;
}
#pp-auswahl-leiste .pp-auswahl-eigen .zg-ico { display: block; width: 17px; height: 17px; }
@media (max-width: 860px), (pointer: coarse) and (max-width: 1200px) {
  #pp-auswahl-leiste.mit-eigenen .pp-btn { min-height: 44px; }
  #pp-auswahl-leiste .pp-auswahl-eigen.nur-symbol { min-width: 44px; }
  #pp-auswahl-leiste.mit-eigenen .pp-auswahl-zu { width: 44px; height: 44px; }
}

/* AUSBAU-A3 (14.10.2026, docs/AUSBAU-A3-2026-10-14.md): die gemeinsamen
   ZIELE („→ Notiz", „→ Fläche", „→ Karteikarte", „→ Aufgabe") stehen in
   derselben Knopfzeile. Auf schmalen Schirmen darf sie umbrechen (wie mit
   eigenen Knöpfen); als UNTERE ZEILE (Notiz auf dem Telefon) rollt sie
   stattdessen seitlich — eine Zeile über der Tastatur, keine drei. */
#pp-auswahl-leiste .pp-auswahl-zielknopf { flex: none; white-space: nowrap; }
/* aw1019 (docs/AW1019.md): „→ Notiz", „→ Fläche" und „→ Aufgabe" sind
   weg — an ihrer Stelle EIN Knopf „Erstellen ▾" (Menü über #pp-ctx, wie
   „Erstellen ▾" der Arbeitsumgebung). Die Leiste ist damit zwei Knöpfe
   schmaler; umbrechen darf sie auf dem Telefon weiter. */
#pp-auswahl-leiste .pp-auswahl-erstellen { flex: none; white-space: nowrap; }
@media (max-width: 860px), (pointer: coarse) and (max-width: 1200px) {
  #pp-auswahl-leiste .pp-auswahl-erstellen, #pp-auswahl-leiste .pp-auswahl-zielknopf { min-height: 44px; }
}
@media (max-width: 600px) {
  #pp-auswahl-leiste.mit-zielen { white-space: normal; }
  #pp-auswahl-leiste.mit-zielen .pp-auswahl-knoepfe { flex-wrap: wrap; row-gap: 4px; }
}
#pp-auswahl-leiste.pp-auswahl-unten { max-width: none; white-space: nowrap; }
#pp-auswahl-leiste.pp-auswahl-unten .pp-auswahl-knoepfe {
  flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
#pp-auswahl-leiste.pp-auswahl-unten .pp-auswahl-knoepfe > * { flex: none; }
#pp-auswahl-leiste .pp-auswahl-meldung {
  white-space: normal; font-size: var(--pp-fs-mini); color: var(--pp-err); max-width: 360px; padding: 0 2px 2px;
}
/* AW1: die Rückfrage „Bild schicken?" steht als Knopf in der Meldezeile. */
#pp-auswahl-leiste .pp-auswahl-rueckfrage { margin-left: 6px; vertical-align: middle; }

/* fx1020 (js/auswahl.js Teil h, docs/FX1020-AUSWAHL.md): die LAUF-ANZEIGE der
   Wege aus „Erstellen ▾" — unten mittig wie der Toast der Arbeitsumgebung
   (#vl-toast, css/vorlesung.css), aber an den Lauf gebunden: sie steht,
   solange er läuft, und zeigt nach einem Fehlschlag (über den Chip der
   Kopfzeile) den Grund an Ort und Stelle. `hidden` gilt auch ohne
   Stylesheet. Unter einem offenen Kontextmenü (#pp-ctx, z 140) tritt sie
   zurück wie der Toast (sim1016-R6). */
.pp-auswahl-lauf {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 160;
  display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: min(640px, calc(100vw - 32px)); box-sizing: border-box; padding: 10px 12px 10px 16px; border-radius: 10px;
  background: var(--pp-surface); color: var(--pp-text); border: 1px solid var(--pp-line-2); box-shadow: var(--pp-lift);
  font-family: var(--pp-sans); font-size: var(--pp-fs-klein); line-height: var(--pp-lh-text);
}
.pp-auswahl-lauf[hidden] { display: none; }
body:has(> .pp-ctx:not([hidden])) .pp-auswahl-lauf { opacity: 0; pointer-events: none; }
.pp-auswahl-lauf-txt { min-width: 0; flex: 1 1 auto; }
.pp-auswahl-lauf-txt b { display: block; font-weight: 600; }
.pp-auswahl-lauf-s { display: block; color: var(--pp-text-2); margin-top: 2px; }
.pp-auswahl-lauf[data-stand="fehler"] { border-color: var(--pp-err); }
/* W6 (Befund 2): die Quittung eines Ziels — „✓ Karte in „Gesammelt“ (NumA)
   angelegt · Öffnen · ✕" (js/auswahl.js fertigZeigen). */
.pp-auswahl-lauf-ok { flex: none; color: var(--pp-ok); font-weight: 600; }
.pp-auswahl-lauf .pp-btn { flex: none; }
.pp-auswahl-lauf-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pp-accent); }
body.pp-anim .pp-auswahl-lauf-dot { animation: pp-auswahl-lauf-puls 1.2s ease-in-out infinite; }
@keyframes pp-auswahl-lauf-puls { 50% { opacity: .35; } }
.pp-auswahl-lauf-zu {
  flex: none; border: 0; background: transparent; color: var(--pp-text-2); cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px; font: 16px/1 var(--pp-sans);
}
.pp-auswahl-lauf-zu:hover { color: var(--pp-err); background: var(--pp-bg-2); }
@media (max-width: 860px), (pointer: coarse) and (max-width: 1200px) {
  .pp-auswahl-lauf .pp-btn { min-height: 44px; }
  .pp-auswahl-lauf-zu { width: 44px; height: 44px; }
}

/* ew1020-b (docs/EW1020-B.md): die Meldung an der Freikontingent-Grenze —
   in der Lauf-Anzeige unten (js/auswahl.js grenzeZeigen) und in der
   Meldezeile des Hefts (js/entwurf.js heftGrund) — trägt den Abo-Weg
   (PreppRender.aboHinweis). Der Streifen spricht in der normalen
   Textfarbe; rot ist nur der Grund. */
.pp-auswahl-lauf[data-stand="grenze"] { align-items: flex-start; }
.pp-auswahl-lauf .pp-abo-weg, .hf-meldung .pp-abo-weg { color: var(--pp-text); margin-top: 6px; }
.hf-meldung .pp-entwurf-grund-x {
  float: right; border: 0; background: none; color: var(--pp-text-3); cursor: pointer; font: inherit; padding: 0 4px; margin-left: 6px;
}
@media (max-width: 860px), (pointer: coarse) and (max-width: 1200px) {
  .hf-meldung .pp-entwurf-grund-x { min-width: 44px; min-height: 44px; }
}