/**
 * 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.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;
	height: 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 { display: flex; }
.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; }

.pai-plugin-info {
	border-top: 1px solid #e2e2e2;
	padding: 8px 14px;
	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;
}

.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; }
.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; }
.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; }

.pai-image-wrapper {
	position: relative;
	display: inline-block;
	margin-top: 6px;
}

.pai-bubble .pai-image-wrapper img {
	max-width: 240px;
	max-height: 240px;
	display: block;
	border-radius: 8px;
	object-fit: cover;
	cursor: zoom-in;
}

/* Feature: Download-Button direkt am Bild – standardmäßig dezent, beim
   Hovern über das Bild deutlicher sichtbar (Muster aus etablierten
   Chat-Oberflächen). Bugfix 0.4.0: Stil an die "Sprung"-Buttons
   angeglichen (heller Kreis, dünner Rand, Schlagschatten) statt eines
   optisch abweichenden dunklen Overlay-Kreises – ein einziger
   Knopf-Look im ganzen Plugin. Etwas größer (30px statt 26px), damit
   der Button sich gegen das darunterliegende Foto behauptet; der
   Schlagschatten sorgt zusätzlich für genug Kontrast auch auf hellen
   Bildbereichen. */
.pai-image-download {
	position: absolute;
	right: 6px;
	bottom: 6px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid #ccc;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,0.25);
	color: #333;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	opacity: 0.9;
	transition: opacity 0.15s, background 0.15s;
}
.pai-image-download svg {
	width: 15px;
	height: 15px;
	display: block;
}
.pai-image-wrapper:hover .pai-image-download {
	opacity: 1;
}
.pai-image-download:hover {
	background: #f0f0f0;
}

/* Feature: Klick-zum-Vergrößern – einfache Vollbild-Vorschau. */
.pai-image-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	cursor: zoom-out;
}
.pai-image-lightbox img {
	max-width: 90vw;
	max-height: 85vh;
	border-radius: 6px;
	cursor: default;
}
.pai-image-lightbox-download {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	color: #1e1e1e;
	padding: 8px 16px;
	border-radius: 999px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
}
.pai-image-lightbox-close {
	position: absolute;
	top: 20px;
	right: 24px;
	background: rgba(255,255,255,0.15);
	color: #fff;
	border: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 16px;
	cursor: pointer;
}

.pai-bubble.thinking { display: inline-flex; align-items: center; gap: 6px; }
.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 {
	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; }

/* 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;
}

.pai-jump-to-answer {
	position: absolute;
	right: 20px;
	bottom: 100px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid #ccc;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
	cursor: pointer;
	font-size: 16px;
	z-index: 5;
}

.pai-jump-to-answer:hover {
	background: #f0f0f0;
}

/* Punkt 5: "Zum Ende springen"-Button, unten mittig positioniert. */
.pai-jump-to-bottom {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 100px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid #ccc;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
	cursor: pointer;
	font-size: 16px;
	z-index: 5;
	align-items: center;
	justify-content: center;
}

.pai-jump-to-bottom:hover {
	background: #f0f0f0;
}

.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-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 {
	z-index: 9999;
	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;
}