/**
 * Gemeinsame Styles für [personal_ai_chat] und [personal_ai_github],
 * analog zu shared-chat-core.js (0.3.0): Vorher waren chat.css und
 * github.css fast vollständig dupliziert (35 identische Regeln plus
 * einige nur kosmetisch abweichende) – Änderungen am Layout mussten
 * dadurch in beiden Dateien nachgezogen werden. chat.css/github.css
 * enthalten jetzt nur noch, was wirklich bereichsspezifisch ist
 * (GitHub: rechtes Panel, Werkzeug-Aufruf-Bubbles).
 *
 * Dabei wurde nebenbei ein echter Bug gefunden und behoben: chat.css
 * definierte den Stil für den "Bitte einloggen"-Hinweis unter der
 * falschen Klasse (".pai-login-hint" statt dem tatsächlich von PHP
 * ausgegebenen ".personal-ai-login-hint") – der Hinweis war im
 * Chat-Bereich dadurch die ganze Zeit komplett unstyled.
 *
 * Changelog:
 * 0.5.63 - Multi-AI sichtbar machen: Symbol in Anbieterfarben (aktiver Knopf), Fortschritts-Karte, Kennzeichnung
 *          an der Antwort mit Einzelmeinungen, Hinweis zum Einschalten (Klassen .pai-mai-*).
 * 0.5.59.1 - Handy: Modell-Feld mit Schalter füllt den Rest der Kopfzeile und kürzt lange Modellnamen mit "…",
 *          statt dass Multi-AI in eine zweite Zeile rutscht (User-Screenshot iPhone, "Gemini 3.1 Flash-Lite").
 * 0.5.59 - Anbieter-Feld mit Schalter für die automatische Anbieterwahl (.pai-provider-field, nutzt die
 *          Regeln des Modell-Felds; ohne Strich; "display: contents", solange die Funktion aus ist;
 *          .is-paused bei aktivem Multi-AI). Handys (max. 440px): Schalter 46px statt 52px und
 *          knappere Innenabstände, damit die Kopfzeile nicht umbricht.
 * 0.5.54 - Aktive Zustände (Feld-Rahmen, Schalter, Striche, Flash, Multi-AI-Knopf, Hinweiszeile)
 *          nutzen var(--pai-ac*) statt festem Blau. Striche auch bei Automatik aus (grau).
 * 0.5.53 - Multi-AI-Knopf im aktiven Zustand blau (Rahmen + Hintergrund wie das Modell-Feld)
 *          statt Leuchtfarbe, gleiche Höhe (33px) wie Anbieter- und Modell-Feld; der Streifen
 *          am Modell-Feld zeigt nur noch bei eingeschalteter Automatik und ab zwei Modellen.
 * 0.5.52 - Modell-Feld mit Schalter so hoch wie die übrigen Kopfzeilen-Felder (User-Screenshot
 *          iPad: Feld war mit 48px deutlich höher als der Anbieter mit 33px - Rand 1px +
 *          innerer Schatten statt 2px, Touch-Höhe 44px entfernt); Stufen-Streifen bei
 *          eingeschalteter Automatik immer sichtbar (leer bis zur ersten Einstufung).
 * 0.5.51 - Modell-Feld mit eingebautem Schalter für die automatische Modellwahl
 *          (.pai-model-field, .pai-auto-toggle, .pai-auto-strip, .pai-auto-coach);
 *          ersetzt die Hervorhebung .pai-model-select.pai-auto-model-selected. Der
 *          Schalter ist gegen Theme-Styles abgesichert (all: unset + !important).
 * 0.5.50 - Denk-Blase: Abstand 10px, neue Klasse .pai-sail-anim (Segel-Warteanimation).
 * 0.5.49 - Härtung: Nachrichten-Textfeld explizit box-sizing: border-box (die
 *          Auto-Höhe per JS stimmt nur damit; DIVI setzt es global, andere
 *          Themes nicht).
 * 0.5.49 - Neu: .pai-area-switch (Umschalter Chat | GitHub oben in der Chat-
 *          Liste), nur im Vollbild sichtbar (Smartphone und Tablet) - siehe
 *          initAreaSwitch() in shared-chat-core.js.
 * 0.5.47 - Feature + Bugfix (User-Rückmeldung zum iPad Pro 11" im Querformat,
 *          Variante B gewählt): Tablets im QUERFORMAT (Touch ist primäres
 *          Eingabegerät, Höhe 501-1100px) im Vollbild wie im Hochformat, Chat-
 *          Liste fest (260px) und einklappbar, einzeilige Kopfzeile. Gemessen
 *          bei 1194x834: Platz für den Chat von ~75% der Breite auf 933px
 *          (eingeklappt 1194px), Eingabefeld sichtbar statt unter dem sicht-
 *          baren Bereich. Bugfix: Aktionen (Pfeil/Stift/Papierkorb) nur beim
 *          geöffneten Chat - bei jedem Chat (Touch-Regel aus 0.5.43, im
 *          Querformat >1100px nicht eingeschränkt) kürzten sie die Titel auf
 *          ~7 Zeichen.
 * 0.5.46 - Feature (User-Rückmeldung zum iPad Pro 11", 4. Generation, im
 *          Hochformat 834x1194: zusammengequetscht): Tablets im Hochformat
 *          (Breite 768-1100px, Hochformat, Touch-Gerät per any-pointer:
 *          coarse) bekommen dasselbe Vollbild wie das Smartphone - gemeinsamer
 *          Vollbild-Block für beide; die Chat-Liste bleibt dort fest sichtbar
 *          (260px) und lässt sich per Menü-Knopf einklappen, die Kopfzeile ist
 *          kompakt. Gemessen bei 834px: Platz für den Chat von ~410px auf
 *          ~570px (eingeklappt 834px), Kopfzeile von 134px auf 86px, Eingabefeld
 *          von ~130px auf ~300px. Querformat unverändert eingebettet.
 * 0.5.44 - Bugfix (User-Screenshot vom iPhone): Vollbild-Chat z-index von
 *          100000 auf 2147482000 (über jedem Theme-Kopfbereich, unter den
 *          Plugin-Fenstern bei 2147483000); der "Antworten"-Knopf bei
 *          markiertem Text (bisher 9999, hängt an <body>) wäre auf dem
 *          Handy hinter dem Chat verschwunden - jetzt 2147482500.
 * 0.5.43 - Feature (User-Wunsch, Smartphone-/Tablet-Ansicht, Schritt 1 von 3):
 *          responsives Layout am Dateiende (Smartphone: Vollbild +
 *          Einblend-Menü für die Chat-Liste, kompakte Kopfzeile, breitere
 *          Blasen, einzeilige Kopfzeile im Querformat; iPad-Hochformat:
 *          schmalere, einklappbare Chat-Liste; Touch: Aktionen sichtbar,
 *          größere Tippflächen, 16px-Schrift gegen Safari-Zoom).
 *          Bugfix für ALLE Geräte: breite Tabellen in Sprechblasen
 *          scrollen jetzt seitlich statt rechts abgeschnitten zu werden.
 * 0.5.41 - Feature (Merkliste, User-Idee): .pai-auto-model-selected -
 *          kräftiges Blau für die Modell-Auswahl, wenn automatisch
 *          anhand der Schwierigkeit der ersten Nachricht gewählt (siehe
 *          applyAutoModelHighlight() in shared-chat-core.js).
 * 0.5.36 - Bugfix (Merkliste, GitHub-Bereich, User-Rückmeldung): #pai-
 *          repo-select bekommt eine max-width (160px, mit Abschneidung)
 *          - hatte als einziges Kopfzeilen-Feld keine Breitenbegrenzung
 *          und brach bei einem langen Repository-Namen plus sichtbarem
 *          Multi-AI-Knopf die ganze Kopfzeile um.
 * 0.5.32 - Bugfix, 2. Anlauf: die geschätzte min-height (66px) aus 0.5.31
 *          passte laut User-Rückmeldung immer noch nicht - auf 44px als
 *          reinen Rückfallwert reduziert, die eigentliche Höhe kommt jetzt
 *          per JavaScript von der tatsächlich gerenderten Größe des
 *          Eingabebereichs (siehe syncPluginInfoHeight() in
 *          shared-chat-core.js), nicht mehr aus einer geratenen Pixelzahl.
 * 0.5.31 - Bugfix (Merkliste, User-Rückmeldung mit Screenshot): sichtbarer
 *          Versatz zwischen der Trennlinie über der Versionsangabe unten
 *          links (.pai-plugin-info, ~30px) und dem Nachrichten-
 *          Eingabebereich rechts (.pai-composer, ~66px) - min-height +
 *          Flexbox-Zentrierung angleichen die Höhe, ohne den Text selbst
 *          zu verändern. Schafft außerdem Platz für die geplante
 *          Firmenbezeichnung (eigener, unpriorisierter Merklisten-Punkt).
 * 0.5.26 - Feature: Knopfleiste (Wiederholen/Bearbeiten/Kopieren) unter
 *          eigenen Nachrichten sowie der zugehörige Bearbeiten-Kasten;
 *          dabei fehlende Klasse .pai-btn-secondary ergänzt (.pai-btn-primary
 *          gab es schon, ein passendes Gegenstück für "Abbrechen"-Knöpfe
 *          bisher nicht).
 * 0.5.0 - Neue .pai-multi-ai-btn-Stile für den Kopfzeilen-Button des
 *          Multi-AI-Features (Ruhezustand dezent, aktiver Zustand
 *          deutlich auffällig mit Textbeschriftung).
 * 0.4.9 - Neue .pai-image-actions-Button-Reihe (Download + neuer
 *          ✏️-Bearbeiten-Button) statt eines einzeln positionierten
 *          Download-Buttons.
 * 0.4.1 - Feature: Finanz-Balken (💰, orange) in der Kostenkontrolle für
 *         die neue, pro Benutzerkonto getrennte Budgetverwaltung (siehe
 *         Personal_AI_Account_Budget). Bild-Download-Button-Stil an die
 *         "Sprung"-Buttons angeglichen (bereits in 0.4.0 begonnen).
 * 0.4.0 - Release 0.4.0: mit diesem Release sind alle ursprünglich
 *         vorgesehenen AI-Anbieter integriert (ChatGPT, Claude, Google,
 *         Mistral, Black Forest Labs). Bugfix: Bild-Download-Button-Stil
 *         an die "Sprung"-Buttons angeglichen (heller Kreis, Rand,
 *         Schlagschatten statt dunklem Overlay-Kreis), etwas größer
 *         (30px statt 26px).
 * 0.3.35 - Unverändert.
 * 0.3.34 - Unverändert.
 * 0.3.33 - Unverändert.
 * 0.3.32 - Unverändert.
 * 0.3.31 - Unverändert.
 * 0.3.30 - Unverändert.
 * 0.3.29 - Unverändert.
 * 0.3.28 - Feature: Styles für Bild-Wrapper (Download-Button beim
 *          Hovern) und die Klick-zum-Vergrößern-Lightbox ergänzt.
 * 0.3.27 - Punkt 4: Styles für die Zitat-Vorschau-Karte ergänzt;
 *          Markdown-Rendering-Styles von Assistant-Bubbles auf beide
 *          Bubble-Rollen erweitert. Punkt 5: Styles für den neuen "Zum
 *          Ende springen"-Button (unten mittig) ergänzt.
 * 0.3.26 - Unverändert.
 * 0.3.25 - Unverändert.
 * 0.3.24 - Unverändert.
 * 0.3.23 - Unverändert.
 * 0.3.22 - UX-Verbesserung: Chip-Style entfernt, Senden-Button größer/
 *          präsenter gestaltet; Stopp-Zustand nutzt jetzt !important,
 *          damit Rot immer Vorrang vor der Anbieterfarbe hat.
 * 0.3.21 - UX-Verbesserung: Style für den neuen Anbieter-Chip am Composer ergänzt.
 * 0.3.20 - Feature: Styles für gerendertes Markdown in Assistant-Bubbles
 *          ergänzt (Überschriften, Listen, Code-Blöcke, Zitate,
 *          Tabellen); white-space:pre-wrap für Assistant-Bubbles
 *          zurückgesetzt (kollidierte mit marked.js-eigenen Zeilenumbrüchen).
 * 0.3.19 - Unverändert.
 * 0.3.18 - Unverändert.
 * 0.3.17 - Unverändert.
 * 0.3.16 - Unverändert.
 * 0.3.15 - Unverändert.
 * 0.3.14 - Bugfix/Feature: hartcodierte weiße Schrift bei Assistant-
 *          Bubbles entfernt (Textfarbe wird jetzt pro Bubble automatisch
 *          per JS anhand der abgeleiteten Hintergrundfarbe berechnet);
 *          Denkprozess-Bubble bekommt dafür explizit weiße Schrift, da
 *          sie unabhängig von der Anbieterfarbe immer dunkel bleibt.
 * 0.3.13 - Unverändert.
 * 0.3.12 - Unverändert.
 * 0.3.11 - Style für den Stopp-Button-Zustand (.pai-btn-stop) ergänzt.
 * 0.3.10 - Style für den neuen "Antworten"-Button (Textmarkierung) ergänzt.
 * 0.3.9 - Unverändert.
 * 0.3.8 - Unverändert.
 * 0.3.7 - Neu erstellt (Extraktion aus chat.css/github.css).
 */

.personal-ai-app {
	display: flex;
	/* 0.6.4.2: Höhe aus "Allgemein > Einbindung > Höhe des Chat-Fensters" (applyEmbedHeight() setzt die Variable). */
	height: var(--pai-embed-h, 80vh);
	min-height: 520px;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	background: #fff;
	color: #1e1e1e;
	position: relative;
}

.pai-sidebar {
	width: 260px;
	flex-shrink: 0;
	background: #f7f7f8;
	border-right: 1px solid #e2e2e2;
	display: flex;
	flex-direction: column;
}

.pai-sidebar-header {
	display: flex;
	gap: 8px;
	padding: 12px;
}

.pai-chat-list {
	flex: 1;
	overflow-y: auto;
	padding: 0 8px;
}

.pai-chat-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	margin-bottom: 2px;
}

.pai-chat-item:hover { background: #ececec; }
.pai-chat-item.active { background: #e2e2e2; }

.pai-chat-color-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.pai-chat-item-title {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pai-chat-item-actions { display: none; gap: 4px; }
.pai-chat-item:hover .pai-chat-item-actions,
.pai-chat-item.active .pai-chat-item-actions { display: flex; } /* 0.5.70: am offenen Chat ist "···" immer sichtbar */
.pai-chat-item-actions button { background: none; border: none; cursor: pointer; font-size: 12px; opacity: 0.7; }

.pai-folder {
	margin: 10px 0 4px;
	font-size: 12px;
	text-transform: uppercase;
	color: #777;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 4px;
}

.pai-folder-actions,
.pai-move-select {
	display: none;
	gap: 4px;
}

.pai-folder:hover .pai-folder-actions { display: inline-flex; }
.pai-folder-actions button { background: none; border: none; cursor: pointer; font-size: 11px; opacity: 0.7; }

.pai-cost-widget {
	border-top: 1px solid #e2e2e2;
	padding: 10px 14px;
	font-size: 12px;
}

.pai-cost-widget h4 { margin: 0 0 6px; font-size: 12px; color: #555; }
.pai-cost-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; break-inside: avoid; }
.pai-cost-today { column-count: 2; column-gap: 14px; }
.pai-cost-today strong { column-span: all; display: block; margin-bottom: 4px; }
.pai-cost-month { margin-top: 6px; font-weight: 600; }

/* Feature 0.4.1: Finanz-Balken in der Kostenkontrolle, zeigt den
   Verbrauch des aktuell angemeldeten Benutzerkontos gegen sein
   hinterlegtes Budget (siehe Personal_AI_Account_Budget). Bewusst
   kompakt für die schmale Seitenleiste – Icon, schmaler Balken,
   Prozentzahl, Details per Tooltip. */
.pai-cost-budget { margin-top: 6px; }
.pai-budget-row { display: flex; align-items: center; gap: 6px; cursor: default; }
.pai-budget-icon { font-size: 12px; line-height: 1; flex: 0 0 auto; }
.pai-budget-bar-outer { flex: 1 1 auto; height: 6px; border-radius: 3px; background: #e2e2e2; overflow: hidden; min-width: 40px; }
.pai-budget-bar-inner { height: 100%; border-radius: 3px; transition: width 0.2s; }
.pai-budget-bar-finance .pai-budget-bar-inner { background: #f0a030; }
.pai-budget-bar-inner.pai-budget-bar-over { background: #b32d2e; }
.pai-budget-percent { font-size: 11px; color: #555; flex: 0 0 auto; min-width: 28px; text-align: right; }

/* Feature (Merkliste, User-Rückmeldung mit Screenshot: sichtbarer "Versatz"
   zwischen der Trennlinie hier und dem Nachrichten-Eingabebereich rechts):
   war nur auf eine einzelne Textzeile ausgelegt (~30px hoch), während der
   Eingabebereich (.pai-composer) durch sein Innenpolster plus die
   Eingabezeile selbst auf rund 66px kommt. min-height + Flexbox-Zentrierung
   gleichen das an, ohne den Text selbst zu verändern. */
/* Bugfix (Merkliste, 2. Anlauf): die von Hand geschätzten 66px aus 0.5.31
   passten laut User-Rückmeldung mit Screenshot immer noch nicht - eine von
   Hand geschätzte Pixelzahl ist naturgemäß unzuverlässig, da die tatsächliche
   Höhe von Schriftart-Rendering/Zoomstufe/Browser abhängt. Die Höhe wird
   jetzt per JavaScript direkt vom tatsächlich gerenderten Eingabebereich
   (.pai-composer) übernommen (siehe syncPluginInfoHeight() in
   shared-chat-core.js) statt geraten - garantiert exakt, unabhängig vom
   Browser. min-height hier nur als Rückfallwert, falls JavaScript aus
   irgendeinem Grund nicht läuft. */
.pai-plugin-info {
	border-top: 1px solid #e2e2e2;
	padding: 8px 14px;
	min-height: 44px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	font-size: 11px;
	color: #999;
}

.pai-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pai-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-bottom: 1px solid #e2e2e2;
	flex-wrap: wrap;
}

.pai-provider-select,
.pai-model-select {
	border-radius: 6px;
	padding: 6px 8px;
	border: 1px solid #ccc;
}

/* Feature 0.5.51 (User-Entscheidungen nach mehreren Entwurfs-Runden): Modell-Feld mit eingebautem
   Schalter für die automatische Modellwahl. Das Feld zeigt IMMER das Modell; blauer Rahmen = Automatik
   an; der Schalter links schaltet sie ein/aus (kein separater Knopf, keine Beschriftung); 5 Segmente am
   unteren Rand zeigen die zuletzt erkannte Schwierigkeit (braucht keine Breite). Ohne
   eingeschaltete Funktion (kein .has-auto) sieht das Feld aus wie ein normales Auswahlfeld.
   Der Schalter ist gegen Theme-Styles abgesichert (DIVI formatiert <button> stark): "all: unset"
   plus !important bei den wenigen Eigenschaften, an denen er sonst verformt würde. */
.pai-model-field { position: relative; display: inline-flex; align-items: stretch; max-width: 100%; min-width: 0; }
/* Höhere Spezifität als die Schalter-Regel unten, sonst bliebe der Schalter bei ausgeschalteter Funktion sichtbar. */
.personal-ai-app .pai-model-field:not(.has-auto) .pai-auto-toggle,
.personal-ai-app .pai-model-field:not(.has-auto) .pai-auto-strip { display: none !important; }
/* Optisch 2px Rahmen, aber nur 1px Rand + 1px innerer Schatten: das Feld ist so hoch wie die übrigen Felder der Kopfzeile. */
.pai-model-field.has-auto { border: 1px solid #d0d0d0; box-shadow: inset 0 0 0 1px #d0d0d0; border-radius: 9px; background: #fff; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.pai-model-field.has-auto.is-auto { border-color: var(--pai-ac, #1a73e8); box-shadow: inset 0 0 0 1px var(--pai-ac, #1a73e8); background: var(--pai-ac-bg, #eef4fe); }
.pai-model-field.has-auto select.pai-model-select,
.pai-model-field.has-auto select.pai-provider-select {
	border: 0;
	border-radius: 0 6px 6px 0;
	background: transparent;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	padding: 3px 26px 6px 10px;
	min-height: 31px;
	min-width: 0;
	max-width: 100%;
	flex: 0 1 auto;
	color: inherit;
	text-overflow: ellipsis;
}
.pai-model-field.has-auto::after {
	content: '';
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -3px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid #5f6368;
	pointer-events: none;
}
.personal-ai-app .pai-model-field .pai-auto-toggle {
	all: unset;
	box-sizing: border-box !important;
	position: relative !important;
	display: block !important;
	flex: 0 0 auto !important;
	width: 52px !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 31px !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer;
	background: transparent !important;
	border: 0 !important;
	border-right: 1px solid #d0d0d0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent;
}
.pai-model-field .pai-auto-toggle::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 38px;
	height: 22px;
	margin: -11px 0 0 -19px;
	border-radius: 11px;
	background: #8a8f94;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
	transition: background 0.15s;
}
.pai-model-field .pai-auto-toggle::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -17px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
	transition: margin-left 0.15s;
}
.pai-model-field.is-auto .pai-auto-toggle { border-right-color: var(--pai-ac-soft, #b9d3f7) !important; }
.pai-model-field.is-auto .pai-auto-toggle::before { background: var(--pai-ac, #1a73e8); }
.pai-model-field.is-auto .pai-auto-toggle::after { margin-left: -1px; }
.pai-model-field .pai-auto-toggle:focus-visible { outline: 2px solid var(--pai-ac, #1a73e8); outline-offset: -3px; }
.pai-auto-strip { position: absolute; left: 62px; right: 12px; bottom: 3px; height: 3px; display: none; gap: 3px; pointer-events: none; }
/* Ab zwei verfügbaren Modellen immer sichtbar (0.5.54: auch bei ausgeschalteter Automatik); Zahl der Segmente und Füllung setzt renderAutoField().
   Automatik an = Anbieterfarbe; Automatik aus = Grau wie der Rahmen (gefüllt bis zum manuell gewählten Modell). */
.pai-model-field.has-auto.has-strip .pai-auto-strip { display: flex; }
.pai-auto-strip i { flex: 1; border-radius: 2px; background: #ececec; }
.pai-auto-strip i.f { background: #b8b8b8; }
.pai-model-field.is-auto .pai-auto-strip i { background: var(--pai-ac-soft, #cfdff7); }
.pai-model-field.is-auto .pai-auto-strip i.f { background: var(--pai-ac, #1a73e8); }
.pai-model-field.pai-auto-flash { animation: pai-auto-ring 0.9s ease-out; }
/* Feature 0.5.59: Schalter für die automatische ANBIETERWAHL im Anbieter-Feld. Das Feld nutzt dieselben
   Regeln wie das Modell-Feld (Klassen .pai-model-field/.pai-auto-toggle), nur ohne Stärke-Streifen.
   Ist die Funktion im Admin aus (kein .has-auto), löst "display: contents" den Rahmen auf - dann liegt
   das Auswahlfeld wie vor 0.5.59 direkt in der Kopfzeile. Bei aktivem Multi-AI ist die Automatik
   pausiert: Schalter gedimmt, im Knopf ein Pause-Zeichen. */
.personal-ai-app .pai-provider-field:not(.has-auto) { display: contents; }
/* Handys (bis 440px, also alle iPhones und die meisten Android-Geräte): Schalter und Innenabstände der beiden Felder etwas knapper, damit
   Anbieter, Modell und Multi-AI-Symbol in EINE Zeile passen (ein Umbruch wäre schlechte Bedienung). */
@media (max-width: 440px) {
	.personal-ai-app .pai-model-field .pai-auto-toggle { width: 46px !important; }
	.pai-model-field.has-auto select.pai-model-select,
	.pai-model-field.has-auto select.pai-provider-select { padding-left: 8px; padding-right: 22px; }
	.pai-model-field.has-auto::after { right: 8px; }
}

.pai-provider-field.is-paused .pai-auto-toggle { opacity: 0.5; }
.pai-provider-field.is-paused .pai-auto-toggle::after {
	background-color: #fff;
	background-image: linear-gradient(90deg, transparent 5px, var(--pai-ac, #1a73e8) 5px, var(--pai-ac, #1a73e8) 7px, transparent 7px, transparent 10px, var(--pai-ac, #1a73e8) 10px, var(--pai-ac, #1a73e8) 12px, transparent 12px);
	background-size: 100% 8px;
	background-position: center;
	background-repeat: no-repeat;
}

@keyframes pai-auto-ring { 0% { box-shadow: 0 0 0 0 rgba(var(--pai-ac-rgb, 26, 115, 232), 0.55); } 100% { box-shadow: 0 0 0 9px rgba(var(--pai-ac-rgb, 26, 115, 232), 0); } }
.pai-auto-coach {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	width: 236px;
	box-sizing: border-box;
	background: #1d1d1b;
	color: #fff;
	border-radius: 9px;
	padding: 10px 12px;
	font-size: 12px;
	line-height: 1.45;
	z-index: 30;
	/* Fängt keine Tipps ab (z.B. auf die Chat-Liste darunter); nur der Knopf ist bedienbar. */
	pointer-events: none;
}
.pai-auto-coach::before { content: ''; position: absolute; top: -6px; left: 22px; border: 6px solid transparent; border-top: 0; border-bottom-color: #1d1d1b; }
.pai-auto-coach button { pointer-events: auto; margin-top: 8px; font-size: 12px; color: #fff; background: transparent; border: 1px solid #777; border-radius: 6px; padding: 4px 10px; cursor: pointer; }

/* Bugfix (Merkliste, User-Rückmeldung): das Repository-Feld hatte anders
   als die übrigen Kopfzeilen-Felder keine Breitenbegrenzung und zeigte
   den vollen "owner/repository-name" - bei einem langen Namen plus dem
   Multi-AI-Knopf reichte der Platz in der Kopfzeile nicht mehr, die Zeile
   (bewusst .pai-header { flex-wrap: wrap }) brach um. Voller Name bleibt
   beim Aufklappen der Liste weiterhin sichtbar, nur die geschlossene
   Anzeige wird jetzt kompakt mit Abschneidung ("…") dargestellt. */
#pai-repo-select {
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Feature 0.5.0/0.5.1: Multi-AI-Button in der Kopfzeile (Umbenennung von
   "AI-Team-Modus" – Namenskollision mit einer künftig geplanten,
   mehrbenutzerfähigen "Team"-Funktion). Im Ruhezustand bewusst farblos
   (nur Rahmen + Schrift, wie die übrigen Kopfzeilen-Elemente) – im
   aktiven Zustand bewusst auffällig (leuchtender Hintergrund + volle
   Zustandsbeschriftung "Multi-AI AN"/"Multi-AI AUS" statt nur Icon-
   Umschaltung), da jede Anfrage im aktiven Zustand potenziell mehrfache
   zusätzliche, kostenpflichtige AI-Aufrufe auslösen kann und das nie
   unbemerkt "an" bleiben darf. Leuchtfarbe #CCFF00 auf Nutzerwunsch;
   dunkle statt weiße Schrift, da Weiß auf diesem hellen Gelbgrün kaum
   lesbar wäre. */
.pai-multi-ai-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 33px;
	box-sizing: border-box;
	border-radius: 6px;
	padding: 6px 10px;
	border: 1px solid #ccc;
	background: #fff;
	color: #555;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.pai-multi-ai-btn svg {
	width: 20px;
	height: 20px;
	display: block;
	flex-shrink: 0;
}
.pai-multi-ai-btn:hover {
	background: #f5f5f5;
}
/* 0.5.53 (User-Wunsch, "dann sieht wieder alles gleich aus"): der aktive Zustand folgt jetzt dem Standard
   des Modell-Felds - blauer Rahmen (1px Rand + 1px innerer Schatten = optisch 2px) und hellblauer
   Hintergrund statt der früheren Leuchtfarbe #CCFF00. Der Text "Multi-AI AN" bleibt der Hinweis, dass
   der kostenpflichtige Modus läuft (auf dem Handy ist er ausgeblendet, dort bleibt der blaue Rahmen). */
.pai-multi-ai-btn.is-active {
	background: var(--pai-ac-bg, #eef4fe);
	border-color: var(--pai-ac, #1a73e8);
	box-shadow: inset 0 0 0 1px var(--pai-ac, #1a73e8);
	color: var(--pai-ac, #1a73e8);
}
.pai-multi-ai-btn.is-active:hover { background: var(--pai-ac-bg-hover, #e3edfd); }
.pai-multi-ai-btn-label {
	font-weight: 600;
	white-space: nowrap;
}

.pai-chat-title-box {
	margin-left: auto;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 13px;
	color: #fff;
	background: #999;
}

.pai-chat-title {
	font-weight: 500;
}

.pai-messages {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pai-bubble {
	max-width: 70%;
	padding: 10px 14px;
	border-radius: 12px;
	line-height: 1.45;
	font-size: 14px;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/* Feature: Markdown-Rendering – Bubbles enthalten jetzt echtes HTML
   (marked.js + DOMPurify) statt reinem Text; pre-wrap würde die eigenen
   Zeilenumbrüche der erzeugten HTML-Struktur zusätzlich sichtbar machen,
   daher hier zurückgesetzt. Gilt für beide Rollen (user + assistant),
   z.B. damit ein per "Antworten" eingefügtes Zitat in der eigenen
   Nachricht ebenfalls als echtes Markdown-Zitat erscheint. */
.pai-bubble.assistant,
.pai-bubble.user {
	white-space: normal;
}
.pai-bubble > *:first-child { margin-top: 0; }
.pai-bubble > *:last-child { margin-bottom: 0; }
.pai-bubble h1,
.pai-bubble h2,
.pai-bubble h3 { margin: 12px 0 6px; line-height: 1.3; }
.pai-bubble p { margin: 0 0 10px; }
.pai-bubble ul,
.pai-bubble ol { margin: 0 0 10px; padding-left: 22px; }
.pai-bubble li { margin-bottom: 3px; }
/* 0.7.3 (User-Screenshot unter Divi): Themes setzen Listennummern in den Textblock (list-style-position: inside) und
   eigene Abstände - dann stand die Nummer allein in einer Zeile. Im Chat gilt immer die Formatierung des Plugins. */
.pai-bubble ul, .pai-bubble ol { list-style-position: outside !important; margin-left: 0 !important; padding-bottom: 0 !important; line-height: inherit; }
.pai-bubble ul { list-style-type: disc; }
.pai-bubble ol { list-style-type: decimal; }
.pai-bubble li { line-height: inherit; padding: 0; }
.pai-bubble li > p { margin: 0 0 6px; padding: 0 !important; display: block; }
.pai-bubble li > p:last-child { margin-bottom: 0; }
.pai-bubble a { color: inherit; text-decoration: underline; }
.pai-bubble code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: rgba(0,0,0,0.08);
	padding: 1px 4px;
	border-radius: 4px;
}
.pai-bubble pre {
	background: rgba(0,0,0,0.08);
	padding: 10px 12px;
	border-radius: 8px;
	overflow-x: auto;
	margin: 0 0 10px;
}
.pai-bubble pre code {
	background: none;
	padding: 0;
}
.pai-bubble blockquote {
	margin: 0 0 10px;
	padding-left: 12px;
	border-left: 3px solid rgba(0,0,0,0.2);
	opacity: 0.9;
}
.pai-bubble table {
	border-collapse: collapse;
	margin: 0 0 10px;
	/* Bugfix 0.5.43 (User-Screenshot Querformat): breite Tabellen ragten rechts aus der
	   Sprechblase heraus und wurden vom Container abgeschnitten. Jetzt scrollt die
	   Tabelle seitlich innerhalb der Blase (auch am PC betroffen). */
	display: block;
	max-width: 100%;
	overflow-x: auto;
}
.pai-bubble th,
.pai-bubble td { border: 1px solid rgba(0,0,0,0.15); padding: 4px 8px; }

.pai-bubble.user { align-self: flex-end; background: #f0f0f0; color: #1e1e1e; border-bottom-right-radius: 2px; }
.pai-bubble.assistant { align-self: flex-start; border-bottom-left-radius: 2px; }

/* Feature (Punkt 4): entfernbare Zitat-Vorschau-Karte oberhalb des
   Composers (Slack/Discord/WhatsApp-Muster). */
.pai-quote-preview {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: #f0f0f0;
	border-left: 3px solid #888;
	border-radius: 6px;
	padding: 6px 10px;
	margin-bottom: 6px;
	font-size: 12px;
	color: #555;
}
.pai-quote-preview-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pai-quote-preview-remove {
	background: none;
	border: none;
	cursor: pointer;
	color: #888;
	font-size: 13px;
	flex-shrink: 0;
	padding: 0 2px;
}
.pai-quote-preview-remove:hover { color: #1e1e1e; }

/* Feature 0.5.16: einheitliche Anhangs-Karte für Bilder und Dokumente.
   Ersetzt die früheren Overlay-Knöpfe am Bild (.pai-image-actions) – die
   Karte ist bewusst hell und unabhängig von der Bubble-Farbe des Anbieters,
   damit sie überall gleich gut lesbar ist. */
.pai-card {
	background: #fff;
	color: #1e1e1e;
	border: 1px solid #dcdcde;
	border-radius: 10px;
	margin-top: 8px;
	overflow: hidden;
	max-width: 440px;
	text-align: left;
}
.pai-card-list { display: flex; flex-direction: column; }
.pai-card-media {
	background: #f0f0f1;
	display: flex;
	justify-content: center;
}
.pai-card-media img {
	display: block;
	max-width: 100%;
	max-height: 300px;
	width: auto;
	height: auto;
	cursor: zoom-in;
}
.pai-card-media-fallback { padding: 12px; font-size: 13px; color: #646970; }
.pai-card-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 10px 12px;
}
.pai-card-image .pai-card-row { border-top: 1px solid #dcdcde; }
.pai-card-badge {
	width: 38px;
	height: 46px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 600;
	flex-shrink: 0;
}
.pai-card-badge.kind-pdf, .pai-chip-badge.kind-pdf { background: #fde8e8; color: #a12626; }
.pai-card-badge.kind-word, .pai-chip-badge.kind-word { background: #e3edfd; color: #1f4ea3; }
.pai-card-badge.kind-excel, .pai-chip-badge.kind-excel { background: #e2f4e6; color: #1e6b34; }
.pai-card-badge.kind-ppt, .pai-chip-badge.kind-ppt { background: #fdeedd; color: #a2500f; }
.pai-card-badge.kind-zip, .pai-chip-badge.kind-zip { background: #fbf1cf; color: #7a5b00; }
.pai-card-badge.kind-text, .pai-chip-badge.kind-text { background: #eceef1; color: #4a4f57; }
.pai-card-info { flex: 1 1 150px; min-width: 0; }
.pai-card-name {
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pai-card-name.is-clickable { cursor: pointer; }
.pai-card-meta { font-size: 12px; color: #646970; margin-top: 2px; }
.pai-card-entries {
	font-size: 12px;
	color: #8c8f94;
	margin-top: 2px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.pai-card-missing .pai-card-name { color: #8c8f94; }
.pai-card-actions { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.pai-card-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.2;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	background: #fff;
	color: #1e1e1e;
	box-shadow: none;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s;
}
.pai-card-btn:hover { background: #f0f0f1; color: #1e1e1e; }
.pai-card-btn svg { width: 15px; height: 15px; flex-shrink: 0; display: block; }
/* Manche Themes (z.B. DIVI) unterstreichen Links im Inhaltsbereich – für die Knöpfe unerwünscht. */
a.pai-card-btn,
a.pai-card-btn:hover,
a.pai-card-btn:focus,
a.pai-card-btn:visited { text-decoration: none !important; color: #1e1e1e; }
a.pai-card-btn span { text-decoration: none !important; }

.pai-provider-hint {
	margin: 0 0 8px;
	padding: 8px 12px;
	background: #fff4d6;
	border: 1px solid #f0d58a;
	border-radius: 6px;
	color: #5c4200;
	font-size: 13px;
	line-height: 1.4;
}
.pai-card-btn-icon { padding: 6px 8px; }

.pai-chip-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	padding: 1px 5px;
	border-radius: 4px;
	margin-right: 6px;
}

/* Vorschau-Fenster für PDF/Text/Markdown/CSV (siehe openDocumentPreview). */
.pai-doc-preview {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.6);
	z-index: 2147483000; /* über festem Theme-Kopfbereich (DIVI) und WordPress-Admin-Leiste */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	box-sizing: border-box;
}
.pai-doc-preview-panel {
	background: #fff;
	color: #1e1e1e;
	border-radius: 10px;
	width: 100%;
	max-width: 860px;
	height: 80vh;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.pai-doc-preview-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid #dcdcde;
}
.pai-doc-preview-title {
	flex: 1;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pai-doc-preview-body { flex: 1; overflow: auto; padding: 16px; }
.pai-doc-preview-body.is-frame { padding: 0; }
.pai-doc-preview-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.pai-doc-preview-body pre {
	white-space: pre-wrap;
	word-break: break-word;
	font-size: 13px;
	margin: 0;
}

/* Feature: Klick-zum-Vergrößern; 0.6.0 mit Zoom, Originalgröße und Verschieben (Mockup Board 14). */
.pai-image-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 2147483000; overflow: hidden; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; -webkit-user-select: none; user-select: none; }
.pai-image-lightbox .pai-lb-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.pai-image-lightbox .pai-lb-img { position: absolute; left: 0; top: 0; max-width: none !important; max-height: none !important; width: auto !important; height: auto !important; margin: 0 !important; border-radius: 3px; transform-origin: 0 0; opacity: 0; transition: opacity .15s; image-rendering: auto; pointer-events: none; }
.pai-image-lightbox.is-ready .pai-lb-img { opacity: 1; }
.pai-image-lightbox .pai-lb-info { position: absolute; top: 14px; left: 16px; right: 64px; font-size: 12.5px; color: #c3c4c7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.pai-image-lightbox-close { position: absolute; top: 10px; right: 12px; background: rgba(0,0,0,0.45); color: #fff; border: none; width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: 16px; line-height: 36px; text-align: center; cursor: pointer; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.pai-image-lightbox-close:hover { background: rgba(255,255,255,0.25); }
.pai-image-lightbox .pai-lb-bar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 999px; background: rgba(29,35,39,0.92); box-shadow: 0 2px 10px rgba(0,0,0,.35); white-space: nowrap; max-width: calc(100vw - 16px); }
.pai-image-lightbox .pai-lb-btn, .pai-image-lightbox .pai-lb-dl { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; margin: 0; padding: 0 11px; border: 0; border-radius: 999px; background: rgba(255,255,255,0.12); color: #fff !important; font: inherit; font-size: 13px; line-height: 1; text-decoration: none !important; cursor: pointer; box-shadow: none; min-width: 0; }
.pai-image-lightbox .pai-lb-btn:hover, .pai-image-lightbox .pai-lb-dl:hover { background: rgba(255,255,255,0.24); }
.pai-image-lightbox .pai-lb-btn:disabled { opacity: .35; cursor: default; }
.pai-image-lightbox .pai-lb-round { width: 32px; padding: 0; font-size: 18px; }
.pai-image-lightbox .pai-lb-pct { background: transparent; min-width: 62px; font-variant-numeric: tabular-nums; }
.pai-image-lightbox .pai-lb-btn.is-on { background: #2271b1; }
.pai-image-lightbox .pai-lb-dl svg { width: 16px; height: 16px; }
.pai-image-lightbox .pai-lb-sep { width: 1px; height: 20px; background: rgba(255,255,255,0.25); margin: 0 4px; }
.pai-image-lightbox .pai-lb-map { position: absolute; right: 14px; bottom: 66px; border: 1px solid rgba(255,255,255,.6); border-radius: 3px; overflow: hidden; background: #000; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.pai-image-lightbox .pai-lb-map[hidden] { display: none; }
.pai-image-lightbox .pai-lb-map img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; opacity: .9; }
.pai-image-lightbox .pai-lb-map span { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.5); box-sizing: border-box; }
/* Touch (iPhone/iPad): kürzere Leiste, größere Tippflächen. */
.pai-image-lightbox.is-touch .pai-lb-desk { display: none !important; }
.pai-image-lightbox.is-touch .pai-lb-bar { bottom: max(18px, env(safe-area-inset-bottom)); padding: 5px 6px; gap: 6px; }
.pai-image-lightbox.is-touch .pai-lb-btn, .pai-image-lightbox.is-touch .pai-lb-dl { height: 38px; padding: 0 14px; }
.pai-image-lightbox.is-touch .pai-lb-pct { min-width: 54px; padding: 0 6px; }
.pai-image-lightbox.is-touch .pai-lb-map { bottom: 76px; right: 10px; }
.pai-image-lightbox.is-touch .pai-lb-info { top: max(14px, env(safe-area-inset-top)); }
.pai-image-lightbox.is-touch .pai-image-lightbox-close { top: max(8px, env(safe-area-inset-top)); width: 40px; height: 40px; line-height: 40px; }

.pai-bubble.thinking { display: inline-flex; align-items: center; gap: 10px; }
/* 0.5.69: räumliches Multi-AI-Modell als Warte-Animation (createMultiAiModelAnimation()). */
.pai-mai-model { position: relative; isolation: isolate; display: block; flex: 0 0 auto; overflow: visible; margin: -10px -4px; }
.pai-mai-model > span { pointer-events: none; }
.pai-thinking-dots { display: inline-flex; gap: 3px; }
.pai-thinking-dots span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.4; animation: pai-bounce 1.1s infinite ease-in-out; }
.pai-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.pai-thinking-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pai-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.35; } 40% { transform: scale(1); opacity: 1; } }

/* Denkprozess-Bubble (Claude Extended Thinking) – bleibt immer dunkel,
   unabhängig von der gewählten Anbieterfarbe, daher fest weiße Schrift. */
.pai-thinking-process {
	background: #2b2b2b !important;
	color: #fff;
	font-size: 12px;
	max-width: 85%;
}

.pai-thinking-header {
	display: flex;
	align-items: center;
	cursor: pointer;
	gap: 2px;
}

.pai-thinking-line {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 320px;
	opacity: 0.85;
}

.pai-thinking-timer, .pai-thinking-toggle {
	opacity: 0.6;
	flex-shrink: 0;
}

.pai-thinking-full {
	margin: 8px 0 0;
	white-space: pre-wrap;
	font-family: monospace;
	font-size: 11px;
	max-height: 200px;
	overflow-y: auto;
	opacity: 0.85;
}

.pai-composer {
	border-top: 1px solid #e2e2e2;
	padding: 10px 16px 16px;
}

.pai-composer-row { display: flex; align-items: flex-end; gap: 8px; }
.pai-composer-row textarea {
	/* 0.5.49: Höhe wird per JS auf scrollHeight (inkl. Padding) gesetzt - nur mit border-box
	   stimmt das; sonst wuchs das Feld bei jedem Zeichen um sein Padding, sobald ein Theme
	   kein globales border-box setzt (DIVI setzt es, deshalb war es dort nie sichtbar). */
	box-sizing: border-box;
	flex: 1;
	resize: none;
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 14px;
	max-height: 160px;
}

.pai-btn { border: none; border-radius: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; }
.pai-btn-primary { background: #1e1e1e; color: #fff; }
.pai-btn-secondary { background: #fff; color: #1e1e1e; border: 1px solid #c3c4c7; }
.pai-btn-secondary:hover { background: #f0f0f1; }

/* Feature: Wiederholen/Bearbeiten/Kopieren unter eigenen Nachrichten (wie im
   echten Claude). Eigene Nachrichten stehen rechtsbündig, die Leiste zieht
   deshalb mit nach rechts. */
.pai-user-actions {
	display: flex;
	justify-content: flex-end;
	gap: 2px;
	margin-top: 4px;
	opacity: 0.55;
}
.pai-bubble.user:hover .pai-user-actions,
.pai-user-actions:focus-within { opacity: 1; }
.pai-user-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.pai-user-action-btn:hover { background: rgba(0,0,0,0.08); }
.pai-user-action-btn svg { width: 14px; height: 14px; display: block; }

.pai-user-edit-hidden-original { display: none; }
.pai-user-edit-box { width: 100%; }
.pai-user-edit-textarea {
	width: 100%;
	min-height: 72px;
	box-sizing: border-box;
	resize: vertical;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	padding: 8px 10px;
	font: inherit;
	color: #1e1e1e;
	background: #fff;
}
.pai-user-edit-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 8px;
}

/* UX-Verbesserung: Senden-Button etwas größer/präsenter als die übrigen
   Buttons, und wird (außer im Stopp-Zustand) mit der Farbe des aktuellen
   Anbieters eingefärbt (siehe updateSendButtonColor() im JS) – ersetzt
   den vorherigen separaten Anbieter-Chip. */
#pai-send-btn {
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 10px;
}

/* Feature: Stopp-Button (ersetzt während einer laufenden Anfrage den
   Senden-Button). !important stellt sicher, dass Rot immer Vorrang vor
   der per JS gesetzten Anbieterfarbe hat. */
.pai-btn-primary.pai-btn-stop { background: #b32d2e !important; color: #fff !important; }
.pai-btn-primary.pai-btn-stop:hover { background: #942423 !important; }
.pai-btn-ghost { background: transparent; border: 1px solid #ccc; }

.pai-icon-btn {
	background: none;
	border: 1px solid transparent;
	border-radius: 6px;
	font-size: 18px;
	cursor: pointer;
	padding: 6px;
}

.pai-icon-btn.is-active {
	border-color: #1e64c8;
	background: #eaf1fb;
}

.pai-attachments-preview {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.pai-attachment-chip {
	font-size: 12px;
	background: #eee;
	border-radius: 20px;
	padding: 4px 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pai-attachment-chip.has-thumb {
	padding: 3px 10px 3px 3px;
}

.pai-attachment-thumb {
	width: 28px;
	height: 28px;
	object-fit: cover;
	border-radius: 14px;
}

/* 0.7.4.1: Sprung-Knöpfe als Paar unten mittig (Mockup „Sprung-Knöpfe“, Stil 2) */
.pai-jump-pair {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 100px;
	display: flex;
	gap: 10px;
	z-index: 5;
}
.pai-jump-pair[hidden], .pai-jump-btn[hidden] { display: none !important; }
.pai-jump-btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid #c3c4c7;
	background: #fff;
	color: #1e1e1e;
	box-shadow: 0 2px 8px rgba(0,0,0,0.16);
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pai-jump-btn:hover { background: #f0f0f1; }
.pai-jump-btn:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; }

.pai-lock-overlay {
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.97);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pai-lock-hint { margin: -4px 0 14px; font-size: 14px; line-height: 1.45; color: #50575e; }
.pai-lock-box { text-align: center; max-width: 320px; padding: 30px; border: 1px solid #e2e2e2; border-radius: 10px; }
.pai-passcode-input { display: block; width: 100%; margin: 14px 0; padding: 10px 12px; border-radius: 8px; border: 1px solid #ccc; }
.pai-lock-error { color: #b32d2e; font-size: 13px; margin-top: 8px; }

/* Bugfix (0.3.7): korrekte Klasse – entspricht dem tatsächlich von PHP
 * ausgegebenen Markup in class-personal-ai-public.php und
 * class-personal-ai-github-public.php ("personal-ai-login-hint"). */
.personal-ai-login-hint { padding: 20px; text-align: center; color: #777; }

/* Neu: "Antworten"-Button bei markiertem Text in einer Chat-Bubble. */
.pai-selection-popup {
	/* Bugfix 0.5.44: hängt an <body> und lag mit 9999 hinter dem Vollbild-Chat (Handy). */
	z-index: 2147482500;
	background: #1e1e1e;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 13px;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.pai-selection-popup:hover {
	background: #333;
}

/* =====================================================================
   Feature 0.5.43 (User-Wunsch, Smartphone-/Tablet-Ansicht, Schritt 1 von
   3: responsives Layout - danach PWA, eine echte App bleibt dem User
   vorbehalten). Zwei getrennte Kriterien statt einer Geraete-Erkennung:
   die BREITE entscheidet ueber das Layout, die Touch-Erkennung
   (pointer: coarse / hover: none) ueber das Bedienverhalten - verlaesslich
   auch dann, wenn sich das iPad in Safari wie ein Desktop-Browser meldet.
   Gilt fuer Chat UND GitHub-Bereich (gemeinsame Datei).
   ===================================================================== */

/* Standard (PC): die neuen Bedienelemente sind unsichtbar. */
.pai-menu-btn,
.pai-sidebar-backdrop,
.pai-touch-only,
.pai-area-switch { display: none; }

.pai-menu-btn {
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #ccc;
	border-radius: 8px;
	background: #fff;
	color: #1e1e1e;
	cursor: pointer;
}
.pai-menu-btn svg { width: 20px; height: 20px; }

/* Ueberall sinnvoll: kein Seiten-Nachladen/Gummiband durch Scrollen am Rand
   der Listen (v.a. Android-Chrome "Pull-to-Refresh" wuerde sonst eine halb
   getippte Nachricht verwerfen). */
.pai-messages,
.pai-chat-list { overscroll-behavior: contain; }

.personal-ai-app {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
.personal-ai-app button,
.personal-ai-app select { touch-action: manipulation; }

/* --- Touch-Geraete (auch iPad): Bedienverhalten ----------------------- */
@media (hover: none) {
	/* Aktionen (Umbenennen/Loeschen/Verschieben) erschienen nur bei Mouse-Over
	   - auf Touch-Geraeten waren sie praktisch nicht erreichbar. */
	.pai-chat-item-actions { display: flex; }
	.pai-folder-actions { display: inline-flex; }

	/* Mouse-Over-Hinweise gibt es hier nicht: der Auto-Modell-Hinweis
	   erscheint als sichtbare Zeile (siehe applyAutoModelHighlight()). */
	.pai-auto-model-note:not([hidden]) { padding: 6px 14px 0; font-size: 12px; }
}
@media (pointer: coarse) {
	.pai-touch-only { display: inline-flex; align-items: center; justify-content: center; }
	.pai-icon-btn { min-width: 40px; min-height: 40px; }
	.pai-chat-item { padding: 12px 10px; }
	.pai-chat-item-actions button,
	.pai-folder-actions button { font-size: 16px; padding: 6px 8px; opacity: 0.85; }
	.pai-user-action-btn { width: 40px; height: 40px; }
	.pai-btn { min-height: 40px; }
	/* Safari zoomt auf dem iPhone in jedes Eingabefeld unter 16px hinein. */
	.personal-ai-app select,
	.personal-ai-app textarea,
	.personal-ai-app input[type="text"],
	.personal-ai-app input[type="password"],
	.personal-ai-app input[type="search"],
	.personal-ai-app input[type="number"] { font-size: 16px; }
}

/* --- Tablet im Hochformat (z.B. iPad): eingebettet wie am PC, Chat-Liste
       schmaler und per Menue-Knopf einklappbar ------------------------- */
@media (min-width: 768px) and (max-width: 1100px) and (pointer: coarse) {
	.pai-menu-btn { display: inline-flex; }
	.pai-sidebar { width: 220px; }
	.personal-ai-app.pai-sidebar-collapsed .pai-sidebar { display: none; }
	/* In der schmalen Chat-Liste sonst nur noch Titelreste sichtbar: Aktionen
	   (Verschieben/Umbenennen/Loeschen) nur beim aktuell geoeffneten Chat. */
	.pai-chat-item:not(.active) .pai-chat-item-actions { display: none; }
}

/* --- Vollbild: Smartphone UND Tablet im Hochformat ----------------------
   Feature 0.5.46 (User-Rückmeldung zum iPad Pro 11", 4. Generation, im
   Hochformat 834x1194): eingebettet blieben durch den Seitenrand der
   Theme-Seite nur ~400px für den Chat, die Kopfzeile brach dreizeilig um
   und das Eingabefeld war nur ~130px breit. Tablets im Hochformat
   bekommen deshalb dasselbe Vollbild wie das Smartphone. Hochformat wird
   über Ausrichtung + Breite erkannt (nicht über den primären Zeiger -
   unsicher, was Safari mit Maus/Trackpad meldet); "any-pointer: coarse"
   verlangt ein Touch-Gerät, damit ein schmales, hohes Desktop-Fenster
   nicht versehentlich ins Vollbild springt.
   Feature 0.5.47 (User-Wunsch, Variante B): auch Tablets im QUERFORMAT
   (z.B. iPad Pro 11": 1194x834) im Vollbild - eingebettet lag das
   Eingabefeld unter dem sichtbaren Bereich (DIVI-Kopfzeile + Überschrift
   ~250px, Chat 80vh), die Kopfzeile brach um und der Chat belegte nur
   ~75% der Breite. Hier bewusst die STRENGERE Bedingung "hover: none +
   pointer: coarse" (Touch ist das primäre Eingabegerät): ein Touch-Laptop
   (Maus/Trackpad primär) oder ein Desktop-Browser bleibt eingebettet.
   Höhe 501-1100px trennt von Smartphones im Querformat (<=500px, dort
   gilt das Smartphone-Layout). ------------------------------------------ */
@media (max-width: 767px), (max-height: 500px) and (pointer: coarse), (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) and (any-pointer: coarse), (orientation: landscape) and (min-width: 768px) and (min-height: 501px) and (max-height: 1100px) and (hover: none) and (pointer: coarse) {
	html.pai-fullscreen-active,
	html.pai-fullscreen-active body { overflow: hidden; }

	.personal-ai-app {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 2147482000; /* über jedem Theme-Kopfbereich, aber unter den Plugin-Fenstern (Vorschau/Lightbox: 2147483000) */
		height: auto;
		min-height: 0;
		border: 0;
		border-radius: 0;
	}

	/* Feature 0.5.49: Umschalter Chat | GitHub oben in der Chat-Liste - im Vollbild ist die
	   Kopfzeile der Theme-Seite mit den Links zu beiden Bereichen verdeckt (siehe
	   initAreaSwitch() in shared-chat-core.js). */
	.personal-ai-app .pai-area-switch { display: flex; gap: 6px; padding: 10px 10px 0; flex: 0 0 auto; }
	.personal-ai-app .pai-area-switch a,
	.personal-ai-app .pai-area-switch span {
		flex: 1;
		text-align: center;
		padding: 10px 10px;
		border: 1px solid #ccc;
		border-radius: 8px;
		font-size: 14px;
		line-height: 1.2;
		text-decoration: none;
		color: #1e1e1e;
		background: #fff;
	}
	.personal-ai-app .pai-area-switch a:hover { background: #f0f0f0; }
	.personal-ai-app .pai-area-switch .is-current { background: #1e1e1e; border-color: #1e1e1e; color: #fff; font-weight: 600; }
}

/* --- Smartphone (Hoch- UND Querformat): Vollbild + Einblend-Menue ------
   Querformat: ein iPhone ist dort ueber 800px breit und wuerde allein
   ueber die Breite als Tablet erkannt - deshalb zusaetzlich die geringe
   Hoehe bei Touch-Geraeten. ------------------------------------------- */
@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
	.pai-menu-btn { display: inline-flex; }

	.pai-sidebar {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: min(86vw, 320px);
		z-index: 3;
		transform: translateX(-102%);
		visibility: hidden;
		transition: transform 0.2s ease, visibility 0s linear 0.2s;
	}
	.personal-ai-app.pai-sidebar-open .pai-sidebar {
		transform: translateX(0);
		visibility: visible;
		transition-delay: 0s;
		box-shadow: 6px 0 24px rgba(0, 0, 0, 0.25);
	}
	.pai-sidebar-backdrop {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 2;
		background: rgba(0, 0, 0, 0.4);
	}
	.personal-ai-app.pai-sidebar-open .pai-sidebar-backdrop { display: block; }

	.paig-right-panel { display: none; }

	/* Kopfzeile: Menue-Knopf + Titel in der ersten Zeile, Auswahlfelder
	   darunter nebeneinander (Multi-AI-Knopf nur als Symbol). */
	.pai-header {
		gap: 6px;
		padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px;
	}
	.pai-menu-btn { order: 0; }
	.pai-chat-title-box {
		order: 1;
		display: block;
		box-sizing: border-box;
		flex: 1 1 calc(100% - 52px);
		min-width: 0;
		margin-left: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.pai-model-field { order: 2; flex: 0 1 auto; min-width: 0; }
	/* 0.5.59.1 (User-Screenshot iPhone: bei "Gemini 3.1 Flash-Lite" rutschte der Multi-AI-Knopf in eine
	   zweite Zeile): das Modell-Feld mit Schalter füllt auf dem Handy den REST der Zeile (Basis 0, damit
	   die Zeile wegen der Namenslänge nicht umbricht) und kürzt einen zu langen Namen mit "…". */
	#pai-model-field.has-auto { flex: 1 1 0; min-width: 120px; }
	#pai-model-field.has-auto select.pai-model-select { width: 100% !important; font-size: 12.5px; padding-left: 6px; padding-right: 18px; }
	#pai-model-field.has-auto::after { right: 7px; }
	.pai-header select,
	#pai-repo-select {
		order: 2;
		flex: 1 1 96px;
		min-width: 0;
		max-width: none;
	}
	.pai-multi-ai-btn { order: 2; }
	.pai-multi-ai-btn-label { display: none; }

	.pai-messages { padding: 12px 10px; gap: 10px; }
	.pai-bubble { max-width: 92%; }

	.pai-composer {
		padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
	}
	.pai-composer-row { gap: 4px; }
	.pai-composer .pai-icon-btn { min-width: 36px; padding: 6px 4px; }
	.pai-composer .pai-btn { padding: 8px 12px; }
}

/* Querformat/breites Handy: Kopfzeile in EINER Zeile statt drei, damit genug
   Hoehe fuer den Chat bleibt (Reihenfolge: Menue, Auswahlfelder, Titel). */
@media (min-width: 560px) and (max-height: 500px) and (pointer: coarse) {
	.pai-header { flex-wrap: nowrap; }
	.pai-header select,
	#pai-repo-select { flex: 0 1 180px; }
	.pai-model-field { flex: 0 1 auto; }
	.pai-multi-ai-btn { order: 2; }
	.pai-chat-title-box { order: 3; flex: 1 1 0; }
}

/* --- Tablet im Hoch- UND Querformat (z.B. iPad Pro 11": 834px hochkant / 1194px quer): Vollbild (siehe oben),
       Chat-Liste aber FEST sichtbar und per Menü-Knopf einklappbar, Kopfzeile
       möglichst einzeilig. Bei 834px: ~260px Liste + ~570px Chat; eingeklappt
       die volle Breite. ------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) and (any-pointer: coarse), (orientation: landscape) and (min-width: 768px) and (min-height: 501px) and (max-height: 1100px) and (hover: none) and (pointer: coarse) {
	.pai-menu-btn { display: inline-flex; order: 0; }
	.pai-sidebar { width: 260px; }
	.personal-ai-app.pai-sidebar-collapsed .pai-sidebar { display: none; }
	/* Bugfix 0.5.47 (User-Screenshot Querformat): Pfeil/Stift/Papierkorb bei JEDEM Chat kürzten
	   die Titel auf ~7 Zeichen (ausgelöst durch die Touch-Regel aus 0.5.43, die im Querformat
	   über 1100px nicht eingeschränkt war). Aktionen nur beim geöffneten Chat. */
	.pai-chat-item:not(.active) .pai-chat-item-actions { display: none; }

	.pai-header {
		gap: 6px;
		padding: 8px 12px;
	}
	.pai-header select,
	#pai-repo-select,
	.pai-model-field { order: 1; min-width: 0; }
	.pai-multi-ai-btn { order: 2; }
	.pai-chat-title-box {
		order: 3;
		box-sizing: border-box;
		display: block;
		flex: 1 1 140px;
		min-width: 0;
		margin-left: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.pai-messages { padding: 14px 16px; }
	.pai-composer { padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------------------
   0.5.63: Multi-AI als herausgestelltes Merkmal (mit dem User per Mockup abgestimmt).
   Das bisherige Symbol (drei verbundene Kreise) zeigt im aktiven Zustand die Farben der
   beteiligten Anbieter; Etikett und Hinweis in einem dunklen, neutralen Ton, damit sich
   Multi-AI von den Automatiken (Anbieterfarbe) abhebt.
   ------------------------------------------------------------------ */
/* 0.5.77: Kopfzeilen-Symbol wird per JavaScript gebaut (buildMaiSvg: Lichtverlauf je Kugel, kräftige Farben);
   hier nur der Rückfall für das statische Markup, bis das Skript läuft. */
.pai-mai-svg:not(.is-on):not(.is-off) circle { fill: #6b7078; }
.pai-mai-svg:not(.is-on):not(.is-off) .pai-mai-l { fill: none; stroke: #4a4f56; stroke-width: 1.7; stroke-linecap: round; }
.pai-mai-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.pai-mai-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); flex: 0 0 auto; vertical-align: middle; box-sizing: border-box; }
.pai-mai-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pai-mai-title { font-size: 15px; font-weight: 700; color: #1d2327; }
.pai-mai-meta { font-size: 13px; color: #50575e; }

.pai-mai-progress { align-self: flex-start; max-width: 620px; width: calc(100% - 24px); box-sizing: border-box; background: #fff; color: #1d2327; border: 1px solid #dcdcde; border-radius: 14px; padding: 14px 16px; margin: 6px 0; display: flex; flex-direction: column; gap: 10px; }
.pai-mai-note { font-size: 13.5px; color: #50575e; }
.pai-mai-step { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pai-mai-step-name { font-weight: 600; min-width: 72px; }
.pai-mai-step-role { color: #3c434a; flex: 1 1 auto; min-width: 0; }
.pai-mai-step-state { font-size: 13px; font-weight: 600; color: #646970; white-space: nowrap; }
.pai-mai-step.is-done .pai-mai-step-state { color: #00742a; }
.pai-mai-step.is-run .pai-mai-step-state { color: #2271b1; }
.pai-mai-step.is-fail .pai-mai-step-state { color: #b32d2e; }

/* 0.6.11.2: Multi-AI-Runde mit mitlaufenden Meinungen und Fortschrittsbalken (Variante C: Abschnitte in der Farbe
   der AI, die gerade arbeitet). */
.pai-mai-progress.pai-mai-run { max-width: 760px; gap: 12px; background: #fbfbfc; }
.pai-mai-since { margin-left: auto; font-size: 12.5px; color: #50575e; white-space: nowrap; }
.pai-mai-prog { display: flex; flex-direction: column; gap: 6px; }
.pai-mai-prog-line { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; font-size: 13px; }
.pai-mai-prog-pct b { font-size: 16px; }
.pai-mai-prog-rest { color: #50575e; }
.pai-mai-segs { display: flex; gap: 3px; height: 12px; }
.pai-mai-seg { position: relative; flex: 1 1 0; min-width: 6px; background: #e6e7e8; overflow: hidden; }
.pai-mai-seg > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #8c8f94; transition: width .45s linear; }
.pai-mai-seg-class { border-radius: 6px 0 0 6px; }
.pai-mai-seg-synth { border-radius: 0 6px 6px 0; }
.pai-mai-seg-ops { display: flex; gap: 2px; flex: 1 1 0; min-width: 20px; }
.pai-mai-seg.is-fail { background: repeating-linear-gradient(45deg, #e6e7e8 0 4px, #f5c6c6 4px 8px); }
.pai-mai-seg.is-fail > i { display: none; }
.pai-mai-rows { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.pai-mai-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.pai-mai-row-name { flex: 1 1 220px; min-width: 0; color: #2c3338; }
.pai-mai-row-state { font-size: 12.5px; color: #50575e; white-space: nowrap; }
.pai-mai-row.is-wait, .pai-mai-row.is-wait .pai-mai-row-name { color: #50575e; }
.pai-mai-ico { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; color: #fff; border: 2px dashed #a7aaad; }
.pai-mai-row.is-done > .pai-mai-ico, .pai-mai-op2.is-done .pai-mai-ico { background: #1f7a4d; border: 0; }
.pai-mai-op2.is-fail .pai-mai-ico { background: #b32d2e; border: 0; }
.pai-mai-op2.is-run .pai-mai-ico, .pai-mai-row.is-run > .pai-mai-ico { border: 2px solid var(--pai-mai-c, #2271b1); animation: pai-mai-pulse 1.4s ease-in-out infinite; }
@keyframes pai-mai-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pai-mai-op2.is-run .pai-mai-ico, .pai-mai-row.is-run > .pai-mai-ico { animation: none; } .pai-mai-seg > i { transition: none; } }
.pai-mai-op2 { display: flex; flex-direction: column; gap: 8px; border: 1px solid #dcdcde; border-left: 3px solid var(--pai-mai-c, #dcdcde); background: #fff; border-radius: 10px; padding: 9px 12px; }
.pai-mai-op2.is-fail .pai-mai-row-state { color: #b32d2e; }
.pai-mai-op2-btn { font: inherit; font-size: 13px; color: #1d2327; background: #fff; border: 1px solid #c3c4c7; border-radius: 6px; padding: 4px 10px; min-height: 30px; cursor: pointer; }
.pai-mai-op2-btn[hidden] { display: none; }
.pai-mai-op2-body { max-height: 16em; overflow: auto; padding-left: 28px; font-size: 13.5px; line-height: 1.5; color: #2c3338; overflow-wrap: anywhere; }
.pai-mai-op2-body[hidden] { display: none; }
.pai-mai-op2.is-run .pai-mai-op2-body { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 1.5em), rgba(0,0,0,.25) 100%); mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 1.5em), rgba(0,0,0,.25) 100%); }
.pai-mai-op2-body > :first-child { margin-top: 0; }
.pai-mai-op2-body > :last-child { margin-bottom: 0; }
@media (max-width: 600px) {
	.pai-mai-op2-btn, .pai-mai-chip { min-height: 44px; }
	.pai-mai-chips { flex-direction: column; align-items: stretch; }
	.pai-mai-chip { justify-content: space-between; border-radius: 8px; }
	.pai-mai-facts { grid-template-columns: minmax(0, 1fr); }
	.pai-mai-op2-body { padding-left: 0; max-height: 12em; }
}

.pai-mai-bar { margin: 12px -2px 0; padding: 10px 12px; background: #fff; color: #1d2327; border: 1px solid #dcdcde; border-radius: 10px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; line-height: 1.4; }
.pai-mai-bar-row { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.pai-mai-badge { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #1d2327; color: #fff; }
.pai-mai-people { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pai-mai-sep { color: #a7aaad; margin: 0 2px; }
.pai-mai-toggle { align-self: flex-start; font: inherit; font-size: 13.5px; font-weight: 600; color: #2271b1; background: #fff; border: 1px solid #2271b1; border-radius: 6px; padding: 6px 12px; min-height: 34px; cursor: pointer; }
/* 0.6.11.3: Ergebnis kompakt - eine Zeile und drei zugeklappte Bereiche (Mockup 7/8). */
.pai-mai-muted { color: #50575e; }
.pai-mai-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pai-mai-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; color: #1d2327; background: #fff; border: 1px solid #c3c4c7; border-radius: 999px; padding: 4px 12px; min-height: 32px; cursor: pointer; }
.pai-mai-chip[aria-expanded="true"] { border-color: #1d2327; background: #f6f7f7; font-weight: 600; }
.pai-mai-chip-arrow { color: #50575e; font-size: 11px; }
.pai-mai-panels:empty { display: none; }
.pai-mai-panel { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; line-height: 1.5; color: #2c3338; overflow-wrap: anywhere; }
.pai-mai-panel[hidden] { display: none; }
.pai-mai-panel > h1, .pai-mai-panel > h2, .pai-mai-panel > h3, .pai-mai-panel > h4 { font-size: 14px; margin: 0; }
.pai-mai-panel > p, .pai-mai-panel > ul, .pai-mai-panel > ol { margin: 0; }
.pai-mai-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; font-size: 13px; color: #3c434a; border-top: 1px solid #f0f0f1; padding-top: 8px; }
.pai-mai-fact-l { color: #50575e; }
.pai-mai-op { border: 1px solid #dcdcde; border-radius: 8px; overflow: hidden; }
.pai-mai-op-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 12px; background: #f6f7f7; }
.pai-mai-op-meta { color: #50575e; font-size: 12.5px; }
.pai-mai-op-body { padding: 8px 12px; font-size: 14px; line-height: 1.55; color: #3c434a; overflow-wrap: anywhere; }
.pai-mai-op-body > :first-child { margin-top: 0; }
.pai-mai-op-body > :last-child { margin-bottom: 0; }

.pai-mai-hint { align-self: flex-start; max-width: 520px; width: calc(100% - 24px); box-sizing: border-box; background: #fff; color: #1d2327; border: 1.5px solid #1d2327; border-radius: 12px; padding: 12px 14px; margin: 8px 0; display: flex; flex-direction: column; gap: 10px; }
.pai-mai-hint-text { font-size: 14px; line-height: 1.5; color: #3c434a; }
.pai-mai-hint-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pai-mai-hint-on { flex: 1 1 auto; min-height: 40px; font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: #1d2327; border: 0; border-radius: 8px; padding: 0 14px; cursor: pointer; }
.pai-mai-hint-later { min-height: 40px; font: inherit; font-size: 14px; color: #1d2327; background: #fff; border: 1px solid #8c8f94; border-radius: 8px; padding: 0 14px; cursor: pointer; }
.pai-mai-hint-foot { font-size: 12.5px; color: #50575e; }
@media (max-width: 600px) {
	.pai-mai-hint-on, .pai-mai-hint-later, .pai-mai-toggle { min-height: 44px; }
	.pai-mai-step-name { min-width: 60px; }
}

/* 0.5.70: "···"-Menü für Nachrichten, Chats und Ordner (openActionMenu() in shared-chat-core.js). */
.pai-more-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 28px; height: 28px; padding: 0 4px;
	border: none; border-radius: 6px; background: transparent; color: inherit;
	cursor: pointer; opacity: 0.75;
}
.pai-more-btn:hover, .pai-more-btn[aria-expanded="true"] { background: rgba(0,0,0,0.08); opacity: 1; }
.pai-chat-item-actions .pai-more-btn, .pai-folder-actions .pai-more-btn { font-size: inherit; }
.pai-action-menu {
	position: fixed; z-index: 2147483647; min-width: 210px; max-width: 290px;
	display: flex; flex-direction: column; padding: 6px;
	background: #fff; color: #1d2327; border: 1px solid #dcdcde; border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.16);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: 14px;
}
.pai-action-item {
	min-height: 42px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent;
	text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.pai-action-item:hover, .pai-action-item:focus-visible { background: #f0f6fc; outline: none; }
.pai-action-item.is-danger { color: #b32d2e; }
.pai-action-sep { height: 1px; background: #f0f0f1; margin: 4px 6px; }

/* 0.5.70: Admin-Ansicht der Chats eines Benutzerkontos (nur lesen). */
.pai-view-banner {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
	padding: 10px 16px; background: #fcf3e6; color: #6b3b05; border-bottom: 1px solid #f0d9b5; font-size: 14px;
}
.pai-view-banner a { color: #2271b1; font-weight: 600; }
.personal-ai-app.pai-view-only .pai-composer,
.personal-ai-app.pai-view-only #pai-new-chat,
.personal-ai-app.pai-view-only #pai-new-folder,
.personal-ai-app.pai-view-only .pai-user-actions,
.personal-ai-app.pai-view-only .pai-chat-item-actions,
.personal-ai-app.pai-view-only .pai-folder-actions,
.personal-ai-app.pai-view-only .pai-auto-toggle { display: none !important; }

/* 0.5.71: Bereiche und Teams in der Seitenleiste, im Chat-Kopf und an Nachrichten. */
.pai-space-head {
	display: flex; align-items: center; gap: 8px;
	margin: 14px 0 4px; padding: 6px 4px 4px; border-top: 1px solid #e2e2e2;
	font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #50575e;
}
.pai-chat-list > .pai-space-head:first-child { border-top: 0; margin-top: 2px; }
.pai-space-tile {
	width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px; background: #e6e7e8; color: #50575e;
	display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0;
}
.pai-space-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pai-space-role { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; border-radius: 999px; padding: 2px 8px; background: #e6e7e8; color: #50575e; }
.pai-space-role.is-lead { background: #e3f0ec; color: #2f6f5e; }
.pai-space-plus {
	width: 28px; height: 28px; border-radius: 6px; border: 1px solid #c3c4c7; background: #fff; color: #3c434a;
	font-size: 16px; line-height: 1; cursor: pointer; padding: 0;
}
.pai-space-head .pai-more-btn { text-transform: none; }
.pai-space-empty { font-size: 12px; color: #8c8f94; padding: 4px 10px 6px; }
.pai-chat-people { display: inline-flex; margin-left: 6px; vertical-align: middle; }
.pai-chat-people .pai-avatar + .pai-avatar { margin-left: -5px; }
.pai-avatar {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
	border-radius: 50%; color: #fff; font-weight: 700; line-height: 1; border: 2px solid #fff; box-sizing: border-box;
}
.pai-author { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #646970; margin: -2px 0 6px; }
.pai-author .pai-avatar { border: 0; }
.pai-space-chip {
	display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; max-width: 40%;
	font-size: 13px; font-weight: 600; color: var(--pai-space, #646970);
	border: 1px solid currentColor; border-radius: 999px; padding: 4px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pai-space-chip::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; flex: 0 0 8px; }
/* 0.5.76: Schild im Titel-Kasten (weiß hinterlegt, damit es auf der Anbieterfarbe lesbar bleibt). */
.pai-chat-title-box .pai-space-chip { background: #fff; padding: 1px 8px; margin: -1px 8px -1px -6px; font-size: 12px; vertical-align: middle; flex: 0 0 auto; max-width: 160px; box-sizing: border-box; }
.pai-chat-title-box { display: flex; align-items: center; min-width: 0; }
.pai-chat-title-box .pai-chat-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Kein Chat offen und kein Schild: leeren Titel-Kasten nicht als farbigen Balken zeigen. */
.pai-chat-title-box:not(:has(.pai-space-chip)):not(:has(.pai-eu-badge)):has(.pai-chat-title:empty) { display: none !important; }
/* 0.5.76: schmale Kopfzeile (z.B. iPad hochkant mit Seitenleiste): Multi-AI nur als Symbol, damit Anbieter, Modell
   und Multi-AI in einer Zeile bleiben. Richtet sich nach der Breite der Kopfzeile, nicht des Bildschirms. */
.pai-header { container-type: inline-size; container-name: pai-header; }
@container pai-header (max-width: 700px) {
	.pai-multi-ai-btn-label { display: none; }
	.pai-multi-ai-btn { padding: 6px 9px; }
}
/* 0.5.78: geteilter Knopf "+ Neuer Chat | ▾" (Ziel-Bereich klein darunter), alles in einer Zeile. */
.pai-split { display: flex; flex: 1 1 auto; min-width: 0; border-radius: 8px; overflow: hidden; }
.pai-split .pai-split-main { flex: 1 1 auto; min-width: 0; border-radius: 0; text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 12px; line-height: 1.2; }
.pai-split-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pai-split-target { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 400; color: #c3c4c7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pai-split-target::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--pai-space, #a7aaad); flex: 0 0 8px; }
.pai-split .pai-split-caret { flex: 0 0 34px; width: 34px; padding: 0; border-radius: 0; border-left: 1px solid #3c434a; font-size: 12px; }
.personal-ai-app.pai-view-only .pai-split-caret { display: none !important; }
.pai-rights-note { font-size: 13px; color: #50575e; background: #f0f0f1; border-radius: 8px; padding: 7px 12px; margin-bottom: 6px; } /* 0.5.74 */
.pai-busy-note { font-size: 13px; color: #8a4b08; background: #fcf3e6; border-radius: 8px; padding: 7px 12px; margin-bottom: 6px; }
.pai-cost-teams { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.pai-cost-team { display: flex; justify-content: space-between; gap: 8px; }
.pai-cost-team-bar { height: 5px; border-radius: 3px; background: #dcdcde; overflow: hidden; margin-bottom: 3px; }
.pai-cost-team-bar > i { display: block; height: 5px; }
.pai-lock-note { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: #1d2327; background: #f0f6fc; border-radius: 8px; padding: 10px 12px; text-align: left; }

/* Dialoge (Teilen, Papierkorb) */
.pai-modal-overlay {
	position: fixed; inset: 0; z-index: 2147483646; background: rgba(0,0,0,0.35);
	display: flex; align-items: center; justify-content: center; padding: 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.pai-modal { width: 100%; max-width: 520px; max-height: 86vh; overflow: auto; background: #fff; color: #1d2327; border-radius: 16px; padding: 22px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.pai-modal h3 { margin: 0 0 12px; font-size: 19px; }
.pai-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.pai-modal-actions .pai-btn { min-height: 44px; padding: 0 18px; }
.pai-share-sub { margin: 0 0 10px; font-size: 14px; color: #50575e; }
.pai-share-opt { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 12px; border: 1px solid #c3c4c7; border-radius: 10px; margin-bottom: 8px; cursor: pointer; font-size: 15px; }
.pai-share-opt small { color: #50575e; font-size: 13px; }
.pai-share-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
@media (max-width: 480px) { .pai-share-modes { grid-template-columns: 1fr; } }
.pai-trash-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0f1; font-size: 14px; }
.pai-trash-row > div { flex: 1; min-width: 0; }
.pai-trash-row small { color: #50575e; }

.personal-ai-app.pai-view-only .pai-space-plus,


/* ------------------------------------------------------------------
   0.5.79 (User-Meldung iPhone-App): Knöpfe unten schwer zu treffen, die Kamera ging oft erst nach dem Tippen
   eines Texts. Ursache: in der Home-Bildschirm-App (PWA) lag die Eingabezeile nur ~10 px über dem unteren Rand,
   also im Bereich des Home-Balkens, dessen Wischgeste iOS für sich beansprucht (mit offener Tastatur rückt die
   Zeile nach oben - deshalb ging es dann). Dazu waren mehrere Touch-Flächen kleiner als die empfohlenen 44 px.
   ------------------------------------------------------------------ */
/* Home-Bildschirm-App: Eingabezeile über den Home-Balken heben (mindestens 26 px, sonst der echte Sicherheitsabstand). */
html.pai-standalone .pai-composer,
html.pai-standalone .paig-composer { padding-bottom: calc(10px + max(env(safe-area-inset-bottom, 0px), 26px)) !important; }
@media (display-mode: standalone) {
	.pai-composer { padding-bottom: calc(10px + max(env(safe-area-inset-bottom, 0px), 26px)) !important; }
}
@media (hover: none) and (pointer: coarse) {
	/* Eingabezeile: Symbol-Knöpfe 44 px hoch, hell hinterlegt, damit sie als Knöpfe erkennbar sind. */
	.pai-composer .pai-composer-row { align-items: flex-end; gap: 4px; }
	.pai-composer .pai-icon-btn {
		min-width: 40px; min-height: 44px; padding: 0 5px;
		display: inline-flex; align-items: center; justify-content: center;
		background: #f0f0f1; border: 1px solid #dcdcde; border-radius: 10px; font-size: 20px;
		touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,0,0,0.08);
	}
	.pai-composer .pai-icon-btn:active { background: #dcdcde; }
	.pai-composer .pai-icon-btn.is-active { background: #eaf1fb; border-color: #1e64c8; }
	.pai-composer .pai-btn { min-height: 44px; touch-action: manipulation; }
	.pai-composer textarea { min-height: 44px; padding-left: 10px; padding-right: 10px; }
	.pai-composer textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

	/* Kleine Knöpfe behalten ihr Aussehen, bekommen aber eine unsichtbar größere Trefferfläche (ca. 44 px). */
	.pai-more-btn, .pai-space-plus, .pai-user-action-btn, #pai-multi-ai-btn { position: relative; touch-action: manipulation; }
	.pai-more-btn::after, .pai-space-plus::after, #pai-multi-ai-btn::after {
		content: ""; position: absolute; inset: -8px;
	}
	.pai-user-action-btn::after { content: ""; position: absolute; inset: -4px -2px; }
	.pai-split .pai-split-caret { flex-basis: 42px; width: 42px; }
	.pai-jump-btn { width: 44px; height: 44px; }
}

/* 0.5.80: verständlicher Hinweis bei leerem Guthaben (statt rohem Fehlertext) */
.pai-credit-notice { display: flex; flex-direction: column; gap: 6px; border: 1px solid #d63638; background: #fcf0f1; color: #1d2327; border-radius: 8px; padding: 10px 12px; line-height: 1.45; text-align: left; }
.pai-credit-notice.pai-credit-quota { border-color: #dba617; background: #fcf9e8; }
.pai-credit-notice .pai-credit-title { color: #8a1f11; font-weight: 700; }
.pai-credit-notice.pai-credit-quota .pai-credit-title { color: #614a00; }
.pai-credit-notice .pai-credit-link { color: #2271b1; font-weight: 600; text-decoration: underline; align-self: flex-start; padding: 4px 0; }
.pai-credit-notice .pai-credit-raw { font-size: 12px; color: #50575e; }
.pai-credit-notice .pai-credit-raw summary { cursor: pointer; padding: 4px 0; }
.pai-credit-notice .pai-credit-raw span { display: block; word-break: break-word; margin-top: 4px; }

/* 0.5.80: Guthaben der Sammelzugänge in der Kostenkontrolle */
.pai-cost-gateways { margin-top: 4px; }
.pai-cost-gateway { font-size: 12px; color: #3c434a; }
.pai-cost-gateway.pai-cost-gateway-low { color: #b32d2e; font-weight: 600; }

/* 0.5.81: Hinweis bei Rückfall auf den Sammelzugang (über der Antwort) */
.pai-route-note { align-self: flex-start; max-width: 85%; margin: 2px 0 -4px; padding: 6px 10px; border-radius: 8px; background: #f0f6fc; color: #1d2327; font-size: 12.5px; line-height: 1.4; }
.pai-route-note.pai-route-note-credit { background: #fcf0e8; color: #6b3a14; }

/* 0.5.89: Lange Chats verdichten - Hinweis im Verlauf (Mockup Board 13) */
.pai-summary-note { margin: 6px 0 12px; border: 1px solid #dcdcde; border-radius: 10px; background: #f6f7f7; color: #3c434a; font-size: 13px; line-height: 1.45; overflow: hidden; }
.pai-summary-head { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 12px; margin: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: none; }
.pai-summary-head:hover { background: #eef0f1; }
.pai-summary-text { flex: 1 1 auto; }
.pai-summary-toggle { flex: 0 0 auto; color: #2271b1; white-space: nowrap; }
.pai-summary-body { border-top: 1px solid #dcdcde; background: #fff; padding: 10px 12px; }
.pai-summary-title { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #646970; margin-bottom: 4px; }
.pai-summary-content p { margin: 0 0 6px; }
.pai-summary-content ul, .pai-summary-content ol { margin: 0 0 6px 18px; padding: 0; }
.pai-summary-meta { margin-top: 6px; font-size: 12px; color: #646970; }
@media (max-width: 600px) {
	.pai-summary-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 2px 8px; }
	.pai-summary-toggle { grid-column: 2; }
}

/* ------------------------------------------------------------------
   0.6.1.1 Theme-Unabhängigkeit: Chat EINGEBETTET in einem schmalen Rahmen (z. B. Lesespalte eines Block-Themes
   wie Twenty Twenty-Five, Seitenleisten-Layout eines klassischen Themes). Die Klassen setzt initResponsiveLayout()
   nach der gemessenen Breite des Chat-Rahmens (ResizeObserver), nicht nach der Bildschirmbreite:
   - pai-narrow (< 820 px): Chat-Liste als Einblend-Menü wie auf dem Handy, Menü-Knopf sichtbar.
   - pai-medium (< 1000 px): im GitHub-Bereich entfällt das rechte Feld.
   Im Vollbild (Handy/Tablet) gelten weiter die Regeln oben.
   ------------------------------------------------------------------ */
.personal-ai-app.pai-narrow .pai-menu-btn { display: inline-flex; order: 0; }
.personal-ai-app.pai-narrow .pai-sidebar {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(86%, 300px);
	z-index: 3;
	transform: translateX(-102%);
	visibility: hidden;
	transition: transform 0.2s ease, visibility 0s linear 0.2s;
}
.personal-ai-app.pai-narrow.pai-sidebar-open .pai-sidebar {
	transform: translateX(0);
	visibility: visible;
	transition-delay: 0s;
	box-shadow: 6px 0 24px rgba(0, 0, 0, 0.25);
}
.personal-ai-app.pai-narrow .pai-sidebar-backdrop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	background: rgba(0, 0, 0, 0.4);
}
.personal-ai-app.pai-narrow.pai-sidebar-open .pai-sidebar-backdrop { display: block; }
.personal-ai-app.pai-narrow .pai-bubble { max-width: 88%; }
.personal-ai-app.pai-medium .paig-right-panel { display: none; }
/* Block-Themes: "alignwide" am Chat (Personal_AI_Public::root_align_class()) - Abstände des Themes nicht übernehmen. */
.personal-ai-app.alignwide,
.personal-ai-app.alignfull { box-sizing: border-box; }

/* ------------------------------------------------------------------
   0.6.4: Seitenleiste einklappbar (Bereiche, Kostenkontrolle) und gezeichnete Symbole.
   Knöpfe theme-fest zurückgesetzt (DIVI und Block-Themes setzen Rahmen, Schatten, Großbuchstaben, Abstände).
   ------------------------------------------------------------------ */
.pai-chevron { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: 0 0 16px; color: #50575e; transition: transform .15s ease; }
.pai-chevron svg { display: block; width: 14px; height: 14px; }
.pai-space-head.is-collapsed .pai-chevron,
.pai-cost-widget.is-collapsed .pai-chevron { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .pai-chevron { transition: none; } }

.pai-space-head .pai-space-toggle {
	flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px;
	margin: 0; padding: 4px 2px; border: 0; border-radius: 6px; background: transparent; box-shadow: none;
	font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #50575e;
	text-align: left; line-height: 1.3; cursor: pointer; min-height: 0; width: auto;
}
.pai-space-head .pai-space-toggle:hover { background: rgba(0,0,0,0.04); }
.pai-space-head .pai-space-toggle:focus-visible { outline: 2px solid #2271b1; outline-offset: 1px; }
.pai-space-head .pai-space-toggle { gap: 5px; padding-left: 0; padding-right: 0; }
.pai-space-head { gap: 6px; }
.pai-space-head .pai-chevron { width: 14px; flex-basis: 14px; }
.pai-space-head .pai-space-label { flex: 0 1 auto; min-width: 4.5em; }
/* Bei wenig Platz wird die Rolle ausgeblendet (fitSpaceHeads), der Name bleibt lesbar. */
.pai-space-head .pai-space-role { flex: 0 0 auto; white-space: nowrap; padding: 2px 6px; }
.pai-space-head.no-role .pai-space-role { display: none; }
/* 0.6.4.2: eingeklappt steht die Anzahl an der Stelle der Rolle - beides zusammen wurde vom "+" überdeckt. */
.pai-space-head.is-collapsed .pai-space-role { display: none; }
.pai-space-head .pai-space-toggle { overflow: hidden; }
.pai-space-count {
	font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #50575e;
	background: #e6e7e8; border-radius: 999px; padding: 1px 7px; flex: 0 0 auto;
}
.pai-space-head.is-collapsed { margin-bottom: 0; }

/* "+" an den Bereichen: gezeichnet und exakt mittig */
.pai-space-head .pai-space-plus { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; }
.pai-space-plus svg { display: block; width: 14px; height: 14px; }

/* "+ Neuer Chat | ⌄": größerer, gezeichneter Pfeil */
.pai-split .pai-split-caret { display: inline-flex; align-items: center; justify-content: center; }
.pai-split .pai-split-caret svg { display: block; width: 18px; height: 18px; }
.pai-split .pai-split-caret svg path { stroke-width: 2.2; }

/* "Neuer Ordner": gezeichnetes Symbol statt "📁+" */
#pai-new-folder { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; color: #3c434a; }
#pai-new-folder svg { display: block; width: 20px; height: 20px; }

/* Kostenkontrolle einklappbar */
.pai-cost-widget h4 { margin: 0 0 6px; }
.pai-cost-widget .pai-cost-toggle {
	display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; width: 100%; margin: 0; padding: 2px 0;
	border: 0; background: transparent; box-shadow: none; border-radius: 4px;
	font: inherit; font-size: 12px; font-weight: 600; color: #555; text-align: left; text-transform: none; letter-spacing: 0;
	line-height: 1.3; cursor: pointer; min-height: 0;
}
.pai-cost-widget .pai-cost-toggle:focus-visible { outline: 2px solid #2271b1; outline-offset: 1px; }
.pai-cost-title { flex: 0 0 auto; }
.pai-cost-summary { display: none; margin-left: auto; font-weight: 400; color: #50575e; white-space: nowrap; }
.pai-cost-summary.is-low { color: #b32d2e; font-weight: 600; }
.pai-cost-widget.is-collapsed h4 { margin-bottom: 0; }
.pai-cost-widget.is-collapsed .pai-cost-summary { display: block; }
.pai-cost-widget.is-collapsed > :not(h4) { display: none !important; }

@media (hover: none) and (pointer: coarse) {
	.pai-space-head .pai-space-toggle { min-height: 40px; }
	.pai-cost-widget .pai-cost-toggle { min-height: 40px; }
	.pai-split .pai-split-caret { flex-basis: 44px; width: 44px; }
}

/* ------------------------------------------------------------------
   0.6.4.1: Exportieren - Leiste unter Antworten und das Export-Fenster (Mockup Board 18).
   ------------------------------------------------------------------ */
.pai-bubble.assistant .pai-answer-actions { justify-content: flex-start; margin-top: 6px; }
.pai-bubble.assistant:hover .pai-answer-actions { opacity: 1; }

.pai-export-modal { position: relative; max-width: 440px; }
.pai-export-modal h3 { padding-right: 36px; }
.pai-modal-x {
	position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; margin: 0; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 8px; background: transparent; color: #50575e; cursor: pointer; box-shadow: none;
}
.pai-modal-x:hover { background: #f0f0f1; }
.pai-export { display: flex; flex-direction: column; gap: 16px; }
.pai-export-field { display: flex; flex-direction: column; gap: 6px; }
.pai-export-label { font-size: 13px; font-weight: 600; color: #50575e; }
.pai-seg { display: flex; border: 1px solid #c3c4c7; border-radius: 10px; overflow: hidden; }
.pai-seg-opt { flex: 1 1 0; position: relative; margin: 0; cursor: pointer; }
.pai-seg-opt + .pai-seg-opt { border-left: 1px solid #c3c4c7; }
.pai-seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pai-seg-opt span { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 8px; font-size: 14px; color: #1d2327; text-align: center; line-height: 1.2; }
.pai-seg-opt input:checked + span { background: #1d2327; color: #fff; }
.pai-seg-opt input:focus-visible + span { outline: 2px solid #2271b1; outline-offset: -3px; }
.pai-export-mail { width: 100%; box-sizing: border-box; min-height: 40px; padding: 6px 10px; border: 1px solid #c3c4c7; border-radius: 8px; font-size: 15px; }
.pai-export-actions { display: flex; gap: 8px; padding-top: 6px; border-top: 1px solid #f0f0f1; }
.pai-export-actions .pai-btn { flex: 1 1 0; min-height: 44px; padding: 0 10px; font-size: 14px; }
.pai-export-actions .pai-btn[hidden] { display: none; }
.pai-export-actions .pai-btn:disabled { opacity: .5; cursor: default; }
.pai-export-note { margin: -6px 0 0; font-size: 12.5px; color: #646970; }
.pai-export-status { margin: -6px 0 0; font-size: 13px; color: #1a7f4b; min-height: 1em; }
.pai-export-status:empty { display: none; }
.pai-export-status.is-error { color: #b32d2e; }

/* Handy: das Fenster kommt als Blatt von unten. */
@media (max-width: 600px) {
	.pai-modal-overlay:has(.pai-export-modal) { align-items: flex-end; padding: 0; }
	.pai-export-modal { max-width: none; border-radius: 16px 16px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------------------
   0.6.4.2: Mehrere Nachrichten auswählen - Kreis an jeder Nachricht, Leiste statt Eingabezeile.
   ------------------------------------------------------------------ */
.personal-ai-app.pai-selecting .pai-composer { display: none !important; }
.personal-ai-app.pai-selecting .pai-bubble[data-message-id] { position: relative; cursor: pointer; }
.personal-ai-app.pai-selecting .pai-bubble.assistant[data-message-id] { margin-left: 34px; }
.personal-ai-app.pai-selecting .pai-bubble.user[data-message-id] { margin-right: 34px; }
.personal-ai-app.pai-selecting .pai-bubble:not([data-message-id]) { opacity: .45; }
.personal-ai-app.pai-selecting .pai-bubble.pai-selected { box-shadow: 0 0 0 2px #2271b1; }
.personal-ai-app.pai-selecting .pai-user-actions { visibility: hidden; }
.pai-sel {
	position: absolute; top: 6px; width: 22px; height: 22px; box-sizing: border-box;
	border: 2px solid #8c8f94; border-radius: 50%; background: #fff; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.pai-bubble.assistant > .pai-sel { left: -32px; }
.pai-bubble.user > .pai-sel { right: -32px; }
.pai-selected > .pai-sel { background: #2271b1; border-color: #2271b1; }
.pai-selected > .pai-sel::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.pai-sel:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; }
.pai-select-bar {
	display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid #e2e2e2; background: #f6f7f7;
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.pai-select-count { flex: 1; font-size: 14px; }
.pai-select-bar .pai-btn { min-height: 40px; padding: 0 14px; font-size: 14px; }
.pai-select-bar .pai-btn:disabled { opacity: .5; cursor: default; }
@media (hover: none) and (pointer: coarse) {
	.pai-select-bar .pai-btn { min-height: 44px; }
	.pai-sel::before { content: ""; position: absolute; inset: -10px; }
}

/* 0.6.5: Inhalt des Exports (wörtlich / Besprechungsvorlage) */
.pai-export-content { display: flex; flex-direction: column; gap: 6px; }
.pai-export-radio { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 8px 10px; border: 1px solid #dcdcde; border-radius: 10px; cursor: pointer; font-size: 14px; line-height: 1.3; }
.pai-export-radio input { margin: 2px 0 0; flex: 0 0 auto; }
.pai-export-radio > span { display: flex; flex-direction: column; gap: 2px; }
.pai-export-radio small { font-size: 12.5px; color: #646970; }
.pai-export-radio:has(input:checked) { border-color: #2271b1; background: #f0f6fc; }

/* 0.6.6: "Papierkorb leeren" */
.pai-modal-actions .pai-btn-danger { color: #b32d2e; border-color: #e5a5a6; margin-right: auto; }
.pai-modal-actions .pai-btn-danger:hover { background: #fcf0f1; }

/* 0.6.6.6: weicher Rand, während eine Antwort entsteht - die untersten ca. 2,5 Zeilen laufen sanft aus
   (neuer Text erscheint dadurch weich statt ruckartig). Am Ende blendet das Skript den Rand weg (--pai-fade -> 0). 0.6.9: Rand 1,5 statt 2,5 Zeilen. */
.personal-ai-app .pai-bubble.pai-streaming {
	-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--pai-fade, 1.5em)), rgba(0, 0, 0, 0.12) 100%);
	mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--pai-fade, 1.5em)), rgba(0, 0, 0, 0.12) 100%);
}
@media (prefers-reduced-motion: reduce) {
	.personal-ai-app .pai-bubble.pai-streaming { -webkit-mask-image: none; mask-image: none; }
}

/* 0.6.11.6: Formeln (KaTeX). Solange KaTeX lädt oder fehlt, steht der Formel-Code lesbar da. */
.pai-math:not(.pai-math-done) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em; white-space: pre-wrap; opacity: 0.8; }
.pai-math-block { display: block; margin: 10px 0; overflow-x: auto; overflow-y: hidden; }
.pai-math-block .katex-display { margin: 0; }
.pai-math .katex { font-size: 1.08em; }
.pai-bubble p.pai-math-p { margin: 0; }

/* 0.6.11.6: Tabellen - Antworten mit Tabelle nutzen die volle Breite; zu breite Tabellen blättern seitlich, die erste
   Spalte bleibt stehen, rechts blasst die Tabelle aus, darunter der Hinweis „→ n weitere Spalten“. */
.pai-bubble.assistant.assistant:has(.pai-table-wrap) { align-self: stretch; max-width: 100%; }
.pai-table-wrap { position: relative; margin: 0 0 10px; }
.pai-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pai-bubble .pai-table-scroll table { display: table; max-width: none; overflow: visible; margin: 0; font-variant-numeric: tabular-nums; }
/* 0.6.11.7 (User-Test: ohne Umbruch wurden lange Zellen zu einer sehr langen, unlesbaren Zeile): Zellen brechen wieder
   um, haben aber eine Mindest- und Höchstbreite - so bleibt die Tabelle lesbar und blättert nur bei vielen Spalten. */
.pai-bubble .pai-table-scroll th,
.pai-bubble .pai-table-scroll td { white-space: normal; overflow-wrap: break-word; min-width: 4.5em; max-width: 16em; vertical-align: top; }
.personal-ai-app.pai-narrow .pai-bubble .pai-table-scroll th,
.personal-ai-app.pai-narrow .pai-bubble .pai-table-scroll td { max-width: 11em; }
.pai-bubble .pai-table-scroll th,
.pai-bubble .pai-table-scroll td { -webkit-hyphens: auto; hyphens: auto; }
@media (max-width: 600px) {
	/* 0.6.11.8 (User-Test iPhone: Spalten zusammengequetscht): am Handy nimmt jede Spalte ihre natürliche Breite (höchstens
	   11 Zeichen, längere Texte brechen um) - die Tabelle blättert dann seitlich, statt sich auf Bildschirmbreite zu quetschen. */
	.pai-bubble .pai-table-scroll table { width: max-content; }
	.pai-bubble .pai-table-scroll th,
	.pai-bubble .pai-table-scroll td { max-width: 11em; -webkit-hyphens: manual; hyphens: manual; }
	/* stehende erste Spalte schmaler, damit daneben genug Platz zum Lesen bleibt */
	.pai-table-more .pai-table-scroll th:first-child,
	.pai-table-more .pai-table-scroll td:first-child { max-width: 7.5em; }
}

.pai-table-more .pai-table-scroll th:first-child,
.pai-table-more .pai-table-scroll td:first-child { position: sticky; left: 0; z-index: 1; background: var(--pai-table-bg, #ffffff); }
.pai-table-more::after { content: ""; position: absolute; top: 0; right: 0; bottom: 30px; width: 48px; pointer-events: none; background: linear-gradient(to right, rgba(255,255,255,0), var(--pai-table-bg, #ffffff)); transition: opacity 0.2s; }
.pai-table-more.pai-table-end::after { opacity: 0; }
.pai-table-hint { width: fit-content; margin: 6px 0 0 auto; font-size: 12.5px; line-height: 1.4; color: #135e96; background: #ffffff; border: 1px solid #c3dbea; border-radius: 999px; padding: 3px 10px; }
.pai-table-more.pai-table-scrolled .pai-table-hint { display: none; }
.pai-table-more.pai-table-scrolled::after { bottom: 0; }

/* 0.6.11.6: Export – Multi-AI-Anhang (Kästchen) */
.pai-export-field[hidden] { display: none !important; }
.pai-export-check { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 4px 2px; cursor: pointer; font-size: 14px; line-height: 1.3; }
.pai-export-check input { margin: 2px 0 0; flex: 0 0 auto; width: 16px; height: 16px; }
.pai-export-check > span { display: flex; flex-direction: column; gap: 2px; }
.pai-export-check small { font-size: 12.5px; color: #646970; }

/* 0.6.11.8: Linien bleiben auch an der stehenden ersten Spalte sichtbar (mit „border-collapse: collapse“ verliert Safari/
   Chrome die Linien klebender Zellen) - Linien deshalb je Zelle rechts/unten, Tabelle oben/links. */
.pai-bubble .pai-table-scroll table { border-collapse: separate; border-spacing: 0; border-top: 1px solid rgba(0,0,0,0.15); border-left: 1px solid rgba(0,0,0,0.15); }
.pai-bubble .pai-table-scroll th,
.pai-bubble .pai-table-scroll td { border: 0; border-right: 1px solid rgba(0,0,0,0.15); border-bottom: 1px solid rgba(0,0,0,0.15); }
.pai-table-more .pai-table-scroll th:first-child,
.pai-table-more .pai-table-scroll td:first-child { border-right-color: transparent; border-bottom-color: transparent; box-shadow: inset -1px -1px 0 rgba(0,0,0,0.15); background-clip: padding-box; }

/* 0.6.11.8: Rückfrage zu einer Multi-AI-Antwort */
.pai-mai-note { font-size: 12.5px; color: #50575e; margin-top: 2px; }

/* 0.7.0.2: Texterkennung für eingescannte PDFs – Fortschritt, Abschrift-Zeile an der Anhangs-Karte, Ansicht. */
.pai-ocr-run, .pai-ocr-done { align-self: flex-start; max-width: 760px; width: calc(100% - 24px); box-sizing: border-box; background: #fbfbfc; color: #1d2327; border: 1px solid #dcdcde; border-radius: 14px; padding: 14px 16px; margin: 6px 0; display: flex; flex-direction: column; gap: 10px; }
.pai-ocr-head-row { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; font-size: 15px; }
.pai-ocr-meta { font-size: 13px; color: #50575e; min-width: 0; overflow-wrap: anywhere; }
.pai-ocr-since { margin-left: auto; font-size: 12.5px; color: #50575e; font-variant-numeric: tabular-nums; }
.pai-ocr-line { display: flex; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; font-size: 13px; }
.pai-ocr-pct { color: #50575e; font-variant-numeric: tabular-nums; }
.pai-ocr-bar { height: 8px; border-radius: 4px; background: #e6e8eb; overflow: hidden; }
.pai-ocr-bar i { display: block; height: 100%; background: #2271b1; border-radius: 4px; transition: width .6s ease; }
.pai-ocr-rows { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.pai-ocr-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.pai-ocr-row-l { flex: 1 1 220px; min-width: 0; color: #2c3338; }
.pai-ocr-row-s { font-size: 12.5px; color: #50575e; white-space: nowrap; }
.pai-ocr-ck { width: 18px; height: 18px; border-radius: 50%; background: #00a32a; color: #fff; font-size: 11px; display: inline-grid; place-items: center; flex: none; }
.pai-ocr-ring { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c3c4c7; box-sizing: border-box; flex: none; }
.pai-ocr-ring.is-run { border-color: #2271b1; border-top-color: transparent; animation: pai-ocr-spin 1s linear infinite; }
@keyframes pai-ocr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pai-ocr-ring.is-run { animation: none; } .pai-ocr-bar i { transition: none; } }
.pai-ocr-note { font-size: 12.5px; color: #50575e; }
.pai-ocr-done-name { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.pai-ocr-strip { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid #e6e8eb; font-size: 13px; }
.pai-ocr-done .pai-ocr-strip { border-top: 0; padding: 0; }
.pai-ocr-strip-t { color: #2c3338; }
.pai-ocr-pill { font-size: 12px; border-radius: 999px; padding: 1px 8px; background: #f0f0f1; color: #50575e; }
.pai-ocr-pill.is-warn { background: #fcf6e0; color: #6b4e00; }
.pai-ocr-err { color: #b32d2e; font-size: 13px; }
.pai-ocr-view { max-height: min(70vh, 640px); overflow: auto; font-size: 14px; line-height: 1.55; min-width: 0; overflow-wrap: anywhere; }
.pai-modal:has(.pai-ocr-view) { max-width: 720px; }
.pai-ocr-head { font-size: 12.5px; color: #50575e; margin-bottom: 8px; }
.pai-ocr-text .pai-ocr-page { font: 600 12px ui-monospace, Menlo, Consolas, monospace; color: #646970; border-top: 1px dashed #c3c4c7; padding-top: 6px; margin-top: 12px; }
.pai-ocr-text .pai-ocr-hand { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #646970; margin-top: 8px; }
.pai-ocr-text mark.pai-ocr-unsure { background: #fde7b0; color: #4d3800; border-radius: 3px; padding: 0 3px; }
.pai-ocr-text table { border-collapse: collapse; } .pai-ocr-text td, .pai-ocr-text th { border: 1px solid #dcdcde; padding: 3px 6px; }
.pai-ocr-loading { color: #50575e; }
/* 0.7.0.3: Auswahl nach fehlgeschlagener Texterkennung */
.pai-ocr-choice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* 0.7.1: Abschrift berichtigen, gegenprüfen; Fotos als ein Dokument */
.pai-ocr-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.pai-ocr-saved { font-size: 12.5px; margin-left: 4px; }
.pai-ocr-saved.is-ok { color: #00a32a; }
.pai-ocr-saved.is-err { color: #b32d2e; }
.pai-ocr-text mark.pai-ocr-unsure { cursor: pointer; }
.pai-ocr-text mark.pai-ocr-unsure:focus-visible { outline: 2px solid #2271b1; outline-offset: 1px; }
.pai-ocr-fix { display: inline-flex; align-items: center; gap: 4px; background: #fff; padding: 2px; border-radius: 6px; }
.pai-ocr-fix input { font: inherit; padding: 1px 6px; border: 1px solid #8c8f94; border-radius: 4px; min-width: 4em; }
.pai-ocr-fix .pai-card-btn { padding: 2px 8px; }
.pai-ocr-edit { width: 100%; box-sizing: border-box; min-height: 340px; font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; border: 1px solid #c3c4c7; border-radius: 8px; padding: 10px; resize: vertical; }
.pai-ocr-edit-hint { font-size: 12px; color: #646970; margin: 6px 0; }
.pai-ocr-edit-row { display: flex; gap: 8px; }
.pai-bundle-opt { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: #3c434a; margin: 4px 8px; cursor: pointer; }
.pai-bundle-busy { font-size: 12.5px; color: #646970; margin: 4px 8px; }
.pai-bundle-busy.is-err { color: #b32d2e; }
/* 0.7.1.1: zwei Lesungen */
.pai-ocr-text mark.pai-ocr-unsure.has-alt { box-shadow: inset 0 -2px 0 #dba617; }
.pai-ocr-pick { font: inherit; font-size: 13px; padding: 1px 8px; border: 1px solid #dba617; background: #fcf3d6; color: #4d3800; border-radius: 4px; cursor: pointer; }
.pai-ocr-pick:hover { background: #f7e3a6; }
/* 0.7.1.2: Knopfleiste der Abschrift bleibt oben sichtbar */
.pai-ocr-tools { position: sticky; top: 0; z-index: 2; background: #fff; padding: 4px 0 8px; margin-bottom: 4px; }

/* 0.7.3: Einheitliche Fortschrittsanzeige – laufender Lichtschimmer im Balken, fertige Zeile mit Dauer. */
.pai-ocr-bar.is-run i { background-color: #2271b1; background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%); background-size: 120px 100%; background-repeat: no-repeat; animation: pai-prog-shine 1.6s linear infinite; }
@keyframes pai-prog-shine { from { background-position: -120px 0; } to { background-position: 720px 0; } }
.pai-prog [hidden] { display: none !important; }
.pai-prog-done { align-self: flex-start; max-width: 760px; width: calc(100% - 24px); box-sizing: border-box; background: #fbfbfc; color: #2c3338; border: 1px solid #dcdcde; border-radius: 14px; padding: 10px 14px; margin: 6px 0; display: flex; gap: 6px 12px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.pai-prog-sum { min-width: 0; overflow-wrap: anywhere; color: #50575e; }
.pai-prog-pill { font-size: 12px; border-radius: 999px; padding: 1px 8px; background: #f0f0f1; color: #50575e; font-variant-numeric: tabular-nums; }
.pai-thinking[hidden], .pai-bubble[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .pai-ocr-bar.is-run i { animation: none; background-image: none; } }
/* 0.7.3: laufender Upload im Anhang-Chip (Mockup 3) */
.pai-attachment-chip.pai-upload-chip { flex-direction: column; align-items: stretch; gap: 5px; border-radius: 10px; padding: 7px 10px; width: 250px; max-width: 100%; box-sizing: border-box; background: #f6f7f7; border: 1px solid #dcdcde; }
.pai-upload-top { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.pai-upload-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pai-upload-x { margin-left: auto; border: 0; background: none; padding: 0 2px; color: #50575e; cursor: pointer; font: inherit; line-height: 1; }
.pai-upload-x:hover { color: #b32d2e; }
.pai-upload-chip .pai-ocr-bar { height: 5px; display: block; }
.pai-upload-s { color: #50575e; font-variant-numeric: tabular-nums; }
.pai-wait-uploads { opacity: .65; }
/* 0.7.3.1: Karte „Antwort“ – Hinweis, wenn eine Datei sehr groß wird (Mockup 11) */
.pai-prog-warn { font-size: 12.5px; color: #8a5a00; background: #fcf9e8; border: 1px solid #f0e2a8; border-radius: 8px; padding: 6px 10px; }
/* 0.7.4: Fortschrittsanzeige „Animiert“ – Segel auf glattem Wasser (Mockups 13–19) */
.pai-ocr-run.pai-prog-sea { max-width: none; }
.pai-sea { position: relative; height: 38px; margin-top: -2px; overflow: visible; }
.pai-sea svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pai-sea-sail { position: absolute; left: 0; top: 0; width: 17px; height: 26px; transform-origin: 50% 100%; pointer-events: none; max-width: none; }
.pai-ocr-bar[hidden] { display: none !important; }

/* 0.7.4: Vorlagen im Chat (Mockups 22–24) */
.pai-chip-tpl { display: inline-flex; flex-direction: column; gap: 4px; border: 1px solid #dcdcde; border-radius: 10px; padding: 6px 8px; background: #fff; max-width: 100%; }
.pai-chip-tpl .pai-attachment-chip { align-self: flex-start; }
.pai-chip-tpl-q { font-size: 12px; color: #50575e; }
.pai-chip-tpl-bb { display: flex; gap: 6px; flex-wrap: wrap; }
.pai-chip-tpl-b { font: inherit; font-size: 12.5px; border: 1px solid #c3c4c7; background: #fff; color: #1d2327; border-radius: 8px; padding: 3px 10px; cursor: pointer; }
.pai-chip-tpl-b.is-on { border-color: #2271b1; color: #2271b1; background: #eef5fb; font-weight: 600; }
.pai-tpl-line { font-size: 12.5px; color: #50575e; padding: 6px 12px 8px; border-top: 1px solid rgba(0,0,0,.06); overflow-wrap: anywhere; }
.pai-tpl-line b { color: #1d2327; }
.pai-tpl-line.is-busy { opacity: .7; }
.pai-tpl-link { font: inherit; background: none; border: 0; padding: 0; color: #2271b1; text-decoration: underline; cursor: pointer; }
.pai-tpl-status.is-bad { color: #b32d2e; }
.pai-tpl-menu { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; font-size: 12.5px; color: #50575e; }
.pai-tpl-pick { font: inherit; border: 1px solid #c3c4c7; background: #fff; color: #1d2327; border-radius: 8px; padding: 3px 10px; cursor: pointer; }
.pai-tpl-pick:hover { border-color: #2271b1; color: #2271b1; }

/* 0.7.4.1: eigene Nachricht bearbeiten – Blase so breit wie die Antworten (jeweils erlaubte Höchstbreite), Feld wächst mit */
.pai-bubble.user.is-editing { width: 100%; }
.pai-bubble.user.is-editing .pai-user-edit-textarea { min-height: 72px; resize: vertical; line-height: 1.45; }

/* 0.7.5: leere Seite „Neuer Chat“ (Start und „+ Neuer Chat“) */
.pai-empty-new { margin: auto; max-width: 460px; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: #50575e; }
.pai-empty-new .pai-empty-sail { width: 30px; height: auto; opacity: .9; }
.pai-empty-new .pai-empty-title { font-size: 20px; color: #1e1e1e; }
.pai-empty-new .pai-empty-where b { color: #1e1e1e; }
.pai-empty-new .pai-empty-hint { font-size: 13px; line-height: 1.5; color: #646970; }
.pai-split.is-current, #pai-new-chat.is-current { box-shadow: 0 0 0 3px rgba(34, 113, 177, .35); }
@keyframes pai-input-flash { 0% { box-shadow: 0 0 0 0 rgba(34,113,177,.0); } 30% { box-shadow: 0 0 0 4px rgba(34,113,177,.45); } 100% { box-shadow: 0 0 0 0 rgba(34,113,177,0); } }
.pai-input-flash { animation: pai-input-flash .9s ease-out; }
@media (prefers-reduced-motion: reduce) { .pai-input-flash { animation: none; outline: 2px solid #2271b1; } }

/* 0.7.5: schmale Zeile „Multi-AI · Schritt 3 von 5 · ca. 76 %“, wenn die Karte aus dem Bild gescrollt ist */
.pai-mai-pill { position: absolute; left: 50%; transform: translateX(-50%); bottom: 100px; z-index: 6; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); height: 36px; padding: 0 14px; border: 1px solid #c3c4c7; border-radius: 999px; background: #fff; color: #1e1e1e; box-shadow: 0 2px 8px rgba(0,0,0,.14); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.pai-mai-pill[hidden] { display: none !important; }
.pai-mai-pill svg { flex: 0 0 auto; }
.pai-mai-pill > span:not(.pai-mai-pill-bar) { overflow: hidden; text-overflow: ellipsis; }
.pai-mai-pill-bar { flex: 0 0 70px; height: 5px; border-radius: 3px; background: #e5e7eb; overflow: hidden; }
.pai-mai-pill-bar i { display: block; height: 100%; background: #2271b1; border-radius: 3px; }
.pai-mai-pill:hover { background: #f6f7f7; }
@media (max-width: 480px) { .pai-mai-pill-bar { display: none; } }

/* 0.7.5 (Mockups 3a–3c): Automatik-Zeile auf allen Geräten - Ursache und Wirkung in Worten */
.pai-auto-model-note { display: block; padding: 5px 20px 0; font-size: 12.5px; line-height: 1.45; color: var(--pai-ac, #1a73e8); overflow-wrap: anywhere; }
.pai-auto-model-note[hidden] { display: none !important; }
.pai-auto-model-note b { font-weight: 600; }

/* 0.7.5 (Sammelliste Punkt 4, Mockups 4a–4e): mehrere Chats parallel */
.pai-run-park { display: none !important; }
.pai-chat-item.has-run { flex-wrap: wrap; row-gap: 2px; }
/* 0.7.5.3 (User): laufender Chat - der Punkt in der Anbieterfarbe pulsiert sanft; Balken in derselben Farbe */
.pai-chat-color-dot.is-working { animation: pai-dot-pulse 1.5s ease-in-out infinite; box-shadow: 0 0 0 0 var(--pai-run-color, #74aa9c); }
@keyframes pai-dot-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; filter: none; } 50% { transform: scale(1.35); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pai-run-color, #74aa9c) 30%, transparent); filter: brightness(1.15); } }
.pai-chat-run { flex: 0 0 100%; display: flex; align-items: center; gap: 8px; padding-left: 20px; font-size: 12px; line-height: 1.3; color: #50575e; min-width: 0; }
.pai-chat-run-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pai-chat-run-bar { flex: 0 0 56px; height: 3px; border-radius: 2px; background: #e2e4e7; overflow: hidden; }
.pai-chat-run-fill { display: block; width: 0; height: 100%; background: var(--pai-run-color, #74aa9c); border-radius: 2px; transition: width .4s ease; }
.pai-chat-item.is-finished { background: #eaf5ee; box-shadow: inset 0 0 0 2px #b9e0c6; }
/* 0.8.0.2: Chat des verknüpften Zugangs (Admin ↔ Konto) */
.pai-chat-linked { flex: 0 0 auto; margin-left: 6px; padding: 0 5px; border: 1px solid #c3c4c7; border-radius: 4px; color: #50575e; font-size: 11px; font-weight: 600; line-height: 1.5; max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pai-chat-fin { flex: 0 0 auto; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #d3eedc; color: #1a6b38; font-size: 11.5px; font-weight: 700; animation: pai-fin-flash 1.2s ease 2; }
@keyframes pai-fin-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(46, 157, 91, 0); } 50% { box-shadow: 0 0 0 4px rgba(46, 157, 91, .35); } }
.pai-ico { display: inline-flex; flex: 0 0 auto; }
.pai-ico svg { display: block; }
.pai-mai-resumed { align-self: stretch; display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border: 1px solid #c5d9ed; border-radius: 10px; background: #f0f6fc; color: #1d2327; font-size: 13px; line-height: 1.5; }
.pai-mai-resumed .pai-ico { color: #2271b1; margin-top: 1px; }
.pai-mai-expired { align-self: stretch; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid #f0d9a8; border-radius: 12px; background: #fdf8ec; font-size: 13.5px; line-height: 1.5; color: #1d2327; }
.pai-mai-expired-text { display: flex; gap: 10px; align-items: flex-start; }
.pai-mai-expired-text .pai-ico { color: #8a5a00; margin-top: 2px; }
.pai-mai-expired-actions { padding-left: 28px; }
.pai-mai-expired-btn { min-height: 36px; padding: 0 16px; border: 0; border-radius: 8px; background: #1e1e1e; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.pai-mai-expired-btn:focus-visible, .pai-wait-btn:focus-visible, .pai-leave-actions button:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; }
.pai-mai-watch { align-self: stretch; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px dashed #c3c4c7; border-radius: 12px; background: #fafafa; font-size: 13px; color: #1d2327; }
.pai-mai-watch-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.pai-mai-watch-who { color: #50575e; }
.pai-mai-watch-age { margin-left: auto; color: #6b7280; font-size: 12px; }
.pai-mai-watch-bar { display: flex; gap: 3px; height: 6px; }
.pai-mai-watch-bar span { flex: 1; background: #e5e7eb; border-radius: 3px; }
.pai-wait-row { align-self: flex-end; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; max-width: 85%; margin-top: -4px; font-size: 12.5px; color: #50575e; }
.pai-wait-row .pai-ico svg { width: 14px; height: 14px; }
.pai-wait-btn { min-height: 28px; padding: 0 10px; border: 1px solid #c3c4c7; border-radius: 6px; background: #fff; color: #1e1e1e; font: inherit; font-size: 12.5px; cursor: pointer; }
.pai-wait-btn:hover { background: #f6f7f7; }
.pai-leave-shade { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(30, 30, 30, .45); }
.pai-leave-dialog { width: 100%; max-width: 460px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border-radius: 14px; background: #fff; color: #1e1e1e; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); font-size: 14px; }
.pai-leave-title { font-size: 16px; }
.pai-leave-text { margin: 0; line-height: 1.5; color: #3c434a; }
.pai-leave-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.pai-leave-actions button { min-height: 38px; padding: 0 16px; border-radius: 8px; font: inherit; cursor: pointer; }
.pai-leave-go { border: 1px solid #c3c4c7; background: #fff; color: #1e1e1e; }
.pai-leave-stay { border: 0; background: #1e1e1e; color: #fff; font-weight: 600 !important; }
@media (prefers-reduced-motion: reduce) { .pai-chat-fin { animation: none; } .pai-chat-run-fill { transition: none; } .pai-chat-color-dot.is-working { animation: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--pai-run-color, #74aa9c); } }

/* 0.7.5.1: Chat ließ sich nicht laden - Meldung mit „Erneut versuchen“ statt leerer Fläche */
.pai-load-error { align-self: center; max-width: 520px; margin: 40px auto; padding: 14px 16px; border: 1px solid #f0d9a8; border-radius: 10px; background: #fdf8ec; color: #1d2327; font-size: 13.5px; line-height: 1.5; text-align: center; }
.pai-load-error-btn { display: block; margin: 10px auto 0; min-height: 34px; padding: 0 14px; border: 1px solid #c3c4c7; border-radius: 8px; background: #fff; font: inherit; cursor: pointer; }

/* 0.7.5.2: Fehler mit Grund in Worten, Meldung des Anbieters klein darunter */
.pai-error-reason { font-weight: 600; }
.pai-error-detail { margin-top: 4px; font-size: 12px; opacity: .75; overflow-wrap: anywhere; }

/* 0.7.6: Stopp mit Rückfrage in der Multi-AI-Karte (Mockup „mockup-stopp.html“) */
.pai-mai-row.is-fail .pai-mai-ico { background: #b32d2e; border: 0; color: #fff; }
.pai-mai-row.is-fail .pai-mai-row-state { color: #b32d2e; }
.pai-mai-ask { background: #fff7e6; border: 1px solid #f0c36d; border-radius: 10px; padding: 12px 14px; margin: 10px 0 4px; color: #1d2327; }
.pai-mai-ask-h { font-weight: 600; line-height: 1.4; }
.pai-mai-ask-p { margin: 6px 0 10px; color: #3c434a; font-size: 14px; line-height: 1.45; }
.pai-mai-ask-list { margin: 6px 0 10px 18px; padding: 0; font-size: 14px; color: #3c434a; }
.pai-mai-ask-list li { margin: 2px 0; }
.pai-mai-ask-b { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pai-mai-ask-btn { font: inherit; font-size: 14px; color: #1d2327; background: #fff; border: 1px solid #c3c4c7; border-radius: 8px; padding: 6px 12px; min-height: 34px; cursor: pointer; }
.pai-mai-ask-btn.is-primary { background: #1d2327; border-color: #1d2327; color: #fff; }
.pai-mai-ask-btn:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; }
.pai-mai-ask-link { font-size: 14px; color: #2271b1; text-decoration: none; padding: 6px 4px; }
.pai-mai-ask-note { margin-top: 8px; font-size: 12px; color: #646970; }

/* 0.7.6: Benachrichtigung bei längeren Antworten (Mockup 2) */
.pai-notify-bell { font: inherit; font-size: 12px; color: inherit; background: none; border: 0; padding: 0 0 0 8px; cursor: pointer; opacity: .85; white-space: nowrap; }
.pai-notify-bell:hover, .pai-notify-bell:focus-visible { opacity: 1; text-decoration: underline; }
/* 0.7.8.2: Test-Knopf und Hinweis an der Glocke (blockiert, nur in der App vom Home-Bildschirm, Test gesendet). */
.pai-notify-test[hidden], .pai-notify-hint[hidden] { display: none !important; }
.pai-notify-hint { display: block; font-size: 11.5px; line-height: 1.35; margin-top: 4px; white-space: normal; opacity: .9; }
.pai-notify-offer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; background: #fff7e6; border: 1px solid #f0c36d; border-radius: 10px; padding: 8px 12px; margin: 0 0 8px; font-size: 14px; color: #1d2327; }
.pai-notify-offer-t { flex: 1 1 220px; }
.pai-notify-offer-btn { font: inherit; font-size: 14px; background: #fff; color: #1d2327; border: 1px solid #c3c4c7; border-radius: 8px; padding: 5px 12px; min-height: 32px; cursor: pointer; }
.pai-notify-offer-btn.is-primary { background: #1d2327; border-color: #1d2327; color: #fff; }

/* 0.7.6 (Variante 1, freigegeben): Automatik an - Feld innen ruhig grau, Schrift schwarz; Rahmen grau, nach der ersten
   Antwort in der Farbe des gewählten Anbieters. */
.pai-model-field.has-auto.is-auto { border-color: #c4c8cf; box-shadow: inset 0 0 0 1px #c4c8cf; background: #eef0f3; }
.pai-model-field.has-auto.is-auto.is-picked { border-color: var(--pai-ac, #1a73e8); box-shadow: inset 0 0 0 1px var(--pai-ac, #1a73e8); }
/* 0.7.7.2 (User): Anbieter/Modell von Hand gewählt (Automatik aus) - Rahmen wieder in der Farbe des Anbieters. */
.pai-model-field.has-auto:not(.is-auto) { border-color: var(--pai-ac, #1a73e8); box-shadow: inset 0 0 0 1px var(--pai-ac, #1a73e8); }
.pai-model-field.has-auto.is-auto select.pai-model-select,
.pai-model-field.has-auto.is-auto select.pai-provider-select { color: #1d2327; }
.pai-model-field.is-auto .pai-auto-toggle { border-right-color: #d6d9de !important; }
.pai-model-field.is-auto .pai-auto-toggle::before { background: #8a8f98; }
.pai-model-field.is-auto .pai-auto-strip i { background: #d6d9de; }
.pai-model-field.is-auto .pai-auto-strip i.f { background: #8a8f98; }

/* 0.7.8 (Mockup 2a/2b): Wahl „Gründlich / Zügig“, Laufzeit-Hinweis, Überziehung, Werkzeug-Zeile */
.pai-mai-long { margin: 8px 0 2px; padding: 8px 12px; border-radius: 8px; background: #f0f6fc; border: 1px solid #c5d9ed; color: #1d2327; font-size: 13.5px; line-height: 1.45; }
.pai-mai-choose { border: 1px solid #c3c4c7; border-radius: 10px; padding: 12px 14px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.pai-mai-choose-h { font-weight: 600; line-height: 1.4; }
.pai-mai-choose-p { margin: 0; font-size: 13.5px; color: #3c434a; line-height: 1.45; }
.pai-mai-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pai-mai-tile { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid #c3c4c7; border-radius: 8px; background: #fff; color: #1d2327; cursor: pointer; min-height: 44px; }
.pai-mai-tile.is-sel { border: 2px solid #1d2327; padding: 9px 11px; background: #f6f7f7; }
.pai-mai-tile:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; }
.pai-mai-tile-n { font-size: 13px; font-weight: 600; color: #3c434a; }
.pai-mai-tile small { font-size: 12.5px; color: #50575e; line-height: 1.4; }
.pai-mai-choose-cd { font-size: 12.5px; color: #646970; }
.pai-mai-row-state.is-over { color: #9a6700; white-space: normal; }
.pai-mai-op2-skip { font: inherit; font-size: 13px; color: #1d2327; background: #fff; border: 1px solid #9a6700; border-radius: 6px; padding: 4px 10px; min-height: 30px; cursor: pointer; }
.pai-mai-op2-skip[hidden] { display: none; }
.pai-mai-op2-skip:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; }
.pai-mai-op2-meta { padding-left: 28px; font-size: 12.5px; color: #646970; line-height: 1.4; overflow-wrap: anywhere; }
.pai-mai-op2-meta[hidden] { display: none; }
@media (max-width: 600px) {
	.pai-mai-tiles { grid-template-columns: minmax(0, 1fr); }
	.pai-mai-op2-skip { min-height: 44px; }
	.pai-mai-op2-meta { padding-left: 0; }
}

/* 0.8.0: Link-Prüfung der Quellen (Mockup freigegeben) */
.pai-bubble .pai-linkcheck { margin-top: 6px; font-size: 12.5px; color: #50575e; }
.pai-bubble .pai-linkcheck summary { cursor: pointer; }
.pai-bubble .pai-linkcheck > div { padding: 6px 0 0 14px; line-height: 1.6; overflow-wrap: anywhere; }
.pai-bubble .pai-src-tag { font-size: 11.5px; color: #6b4e00; background: #fcf9e8; border-radius: 4px; padding: 1px 6px; margin-left: 4px; }

/* 0.8.0: EU-Kennzeichen vorn im Chat-Feld (Mockup freigegeben 26.10.2026) */
.pai-chat-title-box { position: relative; }
.pai-chat-title-box .pai-eu-badge { margin: -1px 8px -1px -4px; height: 20px; min-width: 26px; font-size: 10.5px; border: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
.pai-eu-tip { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; background: #1d2327; color: #fff; font-size: 12.5px; font-weight: 400; line-height: 1.3; padding: 6px 9px; border-radius: 6px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.25); }

/* 0.7.8.2: EU-Betrieb – Kennzeichen in der Kopfzeile, gesperrter Multi-AI-Knopf */
.pai-eu-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 30px;
	height: 22px;
	padding: 0 5px;
	border-radius: 4px;
	background: #003399;
	color: #ffcc00;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .04em;
	cursor: help;
}
.pai-multi-ai-btn.is-eu-off,
.pai-multi-ai-btn.is-eu-off:hover {
	opacity: .45;
	cursor: not-allowed;
	background: transparent;
}

/* 0.8.3: Ordner in der Chat-Liste auf- und zuklappbar */
.pai-folder-toggle { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pai-folder-toggle .pai-chevron { display: inline-flex; width: 12px; height: 12px; transition: transform .15s; opacity: .7; }
.pai-folder-toggle .pai-chevron svg { width: 12px; height: 12px; }
.pai-folder-toggle.is-collapsed .pai-chevron { transform: rotate(-90deg); }

/* 0.8.3.4 (Mockup D): Hinweis bei Multi-AI-Rückfrage mit „Als neue Runde stellen“ */
.pai-mai-fu { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid #dba617; background: #fcf9e8; border-radius: 8px; padding: 8px 12px; }
.pai-mai-fu .pai-mai-fu-text { flex: 1 1 260px; }
.pai-mai-fu .pai-mai-fu-btn { margin-left: auto; white-space: nowrap; }

/* 0.8.3.5 (Mockup freigegeben): Dock-Auswahl als eigenes Menü */
.pai-dock-menu { position: fixed; z-index: 2147483647; overflow-y: auto; background: #fff; color: #1d2327; border: 1px solid #dcdcde; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.16); padding: 4px 0 6px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: 14px; box-sizing: border-box; }
.pai-dock-h { display: flex; align-items: center; gap: 8px; padding: 10px 14px 4px; border-top: 1px solid #f0f0f1; }
.pai-dock-h:first-child { border-top: 0; }
.pai-dock-ht { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pai-dock-h small { margin-left: auto; color: #646970; font-size: 11.5px; }
.pai-dock-ic { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.pai-dock-github { background: #24292f; } .pai-dock-wordpress { background: #21759b; } .pai-dock-bridge { background: #7a5af8; } .pai-dock-zip { background: #c2410c; }
.pai-dock-it { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; background: none; border: 0; padding: 7px 14px 7px 44px; cursor: pointer; position: relative; min-height: 40px; color: inherit; font: inherit; }
.pai-dock-it:hover, .pai-dock-it:focus { background: #f0f6fc; outline: none; }
.pai-dock-it.is-sel::before { content: "✓"; position: absolute; left: 20px; top: 8px; color: #2271b1; font-weight: 700; }
.pai-dock-it.is-sel { background: #f6faff; }
.pai-dock-name { font-weight: 500; }
.pai-dock-sub { font-size: 12px; color: #646970; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pai-dock-add { display: block; margin: 4px 12px 4px 44px; width: calc(100% - 56px); padding: 8px 10px; border: 1px dashed #72aee6; border-radius: 6px; color: #2271b1; font-weight: 600; background: #f6faff; text-align: left; cursor: pointer; font: inherit; font-weight: 600; }
.pai-dock-add:hover, .pai-dock-add:focus { background: #e6f0fa; outline: none; }
.pai-dock-empty { margin: 8px 14px; color: #646970; }