/*
 * Chat-Widget-Stil (ARCHITECTURE.md Abschnitt 4.8, Punkt 2) - lebt
 * innerhalb eines Shadow-DOM-Containers (siehe frontend/js/chat-widget.js),
 * bekommt daher NIE Theme-CSS ueber normale Selektoren. Nutzt nur die drei
 * per JS gesetzten CSS-Variablen (--kb-widget-primary/-radius/-font) fuer
 * die Theme-Anpassung, der Rest ist fest im eigenen Stil (siehe Auftrag).
 * FIX 4 (4. Folgeauftrag): EINE bewusste Ausnahme - .kb-input uebernimmt
 * --kb-widget-font NICHT (siehe dort), eine vom Theme abgeleitete
 * Ueberschriften-/Logo-Schrift war dort auffaellig gross/dekorativ und
 * kaum lesbar, waehrend der Nachrichtenverlauf unveraendert gut aussieht.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

.kb-widget {
	font-family: var( --kb-widget-font, sans-serif );
	line-height: 1.4;
	color: #1a1a1a;
}

/*
 * Folgeauftrag "Konfigurierbarer Widget-Titel" (TEIL B): gemeinsamer
 * fixierter Flex-Container fuer Titel-Label + Bubble (siehe
 * chat-widget.js buildWidget() - bubbleRow enthaelt [bubbleLabel, bubble]
 * in dieser Reihenfolge) - traegt jetzt die Positionierung, die vorher
 * direkt auf .kb-bubble sass, damit das Label als Geschwister-Element
 * links davon erscheint, ohne eigene Positions-/Breitenberechnung.
 */
.kb-bubble-row {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	gap: 10px;
}

.kb-bubble {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background: var( --kb-widget-primary, #2c3e50 );
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.25 );
	padding: 0;
	flex: none;
}

.kb-bubble svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

/*
 * Titel-Label (TEIL B, siehe Auftrag Punkt 5) - bewusst DEZENT (helle
 * Flaeche, nur Rahmen/Schrift in --kb-widget-primary), NICHT ein zweiter
 * voll gefuellter Button wie .kb-bubble selbst - gleiches "Umriss statt
 * Flaeche"-Prinzip wie .kb-greeting-suggestion oben. Sofort beim Laden
 * sichtbar (kein [hidden] im Ausgangszustand), chat-widget.js setzt
 * bubbleLabel.hidden, sobald das Panel geoeffnet wird.
 */
.kb-bubble-label {
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var( --kb-widget-primary, #2c3e50 );
	background: #fff;
	color: var( --kb-widget-primary, #2c3e50 );
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.15 );
}

.kb-bubble-label[hidden] {
	display: none;
}

/*
 * FIX 2 (Folgeauftrag, Panel-Groesse erhoehen): 380px/66vh waren spuerbar
 * knapp fuer laengere Antworten samt Karten - 500px/80vh grosszuegiger,
 * max-width bleibt calc(100vw - 24px) (siehe @media unten fuer schmale
 * Viewports: dort weiterhin nahezu Vollbreite, unveraendert).
 */
.kb-panel {
	position: fixed;
	right: 20px;
	bottom: 90px;
	z-index: 2147483000;
	width: 500px;
	max-width: calc( 100vw - 24px );
	max-height: 80vh;
	background: #fff;
	border-radius: var( --kb-widget-radius, 8px );
	box-shadow: 0 8px 30px rgba( 0, 0, 0, 0.3 );
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.kb-panel[hidden] {
	display: none;
}

.kb-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: var( --kb-widget-primary, #2c3e50 );
	color: #fff;
	flex: none;
}

.kb-panel-title {
	font-weight: 600;
}

.kb-panel-close {
	background: none;
	border: none;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.kb-consent {
	padding: 16px;
	font-size: 14px;
	overflow-y: auto;
	border-bottom: 1px solid #e2e2e2;
}

.kb-consent[hidden] {
	display: none;
}

.kb-consent a {
	color: var( --kb-widget-primary, #2c3e50 );
}

.kb-consent-accept {
	margin-top: 10px;
	padding: 8px 14px;
	border: none;
	border-radius: var( --kb-widget-radius, 8px );
	background: var( --kb-widget-primary, #2c3e50 );
	color: #fff;
	cursor: pointer;
}

.kb-messages {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 12px 16px;
	min-height: 0;
}

.kb-message {
	margin: 0 0 8px;
	font-size: 14px;
}

.kb-message-bot {
	color: #1a1a1a;
}

.kb-message-user {
	color: #444;
	text-align: right;
}

/*
 * Folgeauftrag ("rotierendes Symbol statt 'tippt...'", siehe
 * chat-widget.js appendTypingIndicator()): .kb-typing selbst traegt nur
 * noch das Layout (kein Text mehr) - Kreis + rotierendes Segment sind
 * reines Inline-SVG, keine externe Bibliothek/kein Bild.
 */
.kb-typing {
	display: flex;
	align-items: center;
}

.kb-spinner {
	width: 20px;
	height: 20px;
	transform-origin: center;
	animation: kb-spinner-rotate 0.9s linear infinite;
}

.kb-spinner-track {
	stroke: currentColor;
	color: #888;
	opacity: 0.2;
}

/*
 * Farbiges Segment - uebernimmt --kb-widget-primary (siehe
 * frontend/js/chat-widget.js readThemeDesignValues()/init()), damit sich
 * die Ladeanzeige an das jeweilige Shop-Theme anpasst, gleiches Muster wie
 * .kb-bubble/.kb-send/.kb-add-to-cart oben.
 */
.kb-spinner-arc {
	stroke: var( --kb-widget-primary, #2c3e50 );
	stroke-dasharray: 25 75;
}

@keyframes kb-spinner-rotate {
	to {
		transform: rotate( 360deg );
	}
}

/*
 * Folgeauftrag ("Server-Sent Events statt fertiger JSON-Antwort", Punkt 4):
 * Statustext NEBEN dem weiterhin rotierenden Spinner (siehe
 * chat-widget.js updateTypingStatus()) - .kb-typing ist bereits flex
 * (siehe oben), das reicht fuer die Nebeneinander-Anordnung. Leer (noch
 * kein "status"-Ereignis empfangen), bis das erste Ereignis eintrifft -
 * nimmt dann natuerlich keinen sichtbaren Platz ein.
 */
.kb-typing-status {
	margin-left: 8px;
	font-size: 0.85em;
	color: #666;
}

/*
 * Proaktive Begruessung mit Themenvorschlaegen (Folgeauftrag, siehe
 * chat-widget.js appendGreetingLoadingIndicator()) - kleineres, gedaempfteres
 * Gegenstueck zu .kb-typing (dort 20px/volle Deckkraft): hier hat noch keine
 * echte Nutzeraktion stattgefunden, der Ladezustand soll entsprechend
 * unaufdringlicher wirken. Wiederverwendet .kb-spinner/.kb-spinner-track/
 * .kb-spinner-arc UNVERAENDERT (gleiche Animation/Farblogik), nur Groesse/
 * Deckkraft werden hier ueberschrieben.
 */
.kb-greeting-loading {
	display: flex;
	align-items: center;
	margin: 0 0 8px;
	opacity: 0.55;
}

.kb-greeting-loading .kb-spinner {
	width: 14px;
	height: 14px;
}

/*
 * Vorschlags-"Chips" (Folgeauftrag, siehe chat-widget.js
 * renderGreetingSuggestions()) - bewusst DEUTLICH dezenter/heller als die
 * echten Aktions-Buttons (.kb-send/.kb-add-to-cart/.kb-consent-accept: alle
 * mit voll gefuellter --kb-widget-primary-Flaeche + weisser Schrift): hier
 * nur ein duenner Rahmen + eingefaerbte Schrift in --kb-widget-primary auf
 * weissem Grund, zusaetzlich per opacity gedaempft (volle Deckkraft erst bei
 * :hover) - klar als Vorschlag, nicht als Hauptaktion erkennbar.
 */
.kb-greeting-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
}

.kb-greeting-suggestion {
	padding: 6px 10px;
	border: 1px solid var( --kb-widget-primary, #2c3e50 );
	border-radius: var( --kb-widget-radius, 8px );
	background: #fff;
	color: var( --kb-widget-primary, #2c3e50 );
	opacity: 0.75;
	font-size: 13px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

.kb-greeting-suggestion:hover {
	opacity: 1;
}

/*
 * FIX 1 (Folgeauftrag, Markdown korrekt rendern): .kb-message-bot ist seit
 * FIX 1 ein <div>, das die von chat-widget.js markdownToHtml() erzeugten
 * <p>/<ul>/<li>/<strong>-Elemente enthaelt (siehe dort) - ohne diese Regeln
 * wuerden die Browser-Standardabstaende der inneren <p>/<ul> zusaetzlich
 * zum .kb-message-Abstand oben stapeln (sichtbar zu grosser Leerraum).
 * Letztes Kind ohne Abstand nach unten, da .kb-message selbst schon einen
 * Abstand zur naechsten Nachricht traegt.
 */
.kb-message-bot p,
.kb-message-bot ul {
	margin: 0 0 6px;
}

.kb-message-bot p:last-child,
.kb-message-bot ul:last-child {
	margin-bottom: 0;
}

.kb-message-bot ul {
	padding-left: 18px;
}

.kb-product-card {
	margin: 0 0 10px;
	padding: 10px 12px;
	border: 1px solid #e2e2e2;
	border-radius: var( --kb-widget-radius, 8px );
}

/*
 * FIX 3 (Folgeauftrag, Thumbnail-Layout): klassisches Karten-Layout -
 * Bild links, Name/Preis/Begruendung (.kb-product-info) rechts daneben in
 * einer flex-row (chat-widget.js renderProductCard() baut .kb-product-main
 * als gemeinsamen Container fuer beide). "In den Warenkorb" bleibt
 * AUSSERHALB von .kb-product-main, volle Kartenbreite darunter.
 */
.kb-product-main {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 8px;
}

.kb-product-info {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Thumbnail (Folgeauftrag, TEIL B; Layout seit FIX 3 siehe .kb-product-main
 * oben) - feste Groesse, object-fit: cover verhindert Verzerrung
 * unabhaengig vom Originalseitenverhaeltnis. Fehlt product.image_url,
 * wird dieses Element gar nicht erst erzeugt - kein kaputtes Bild-Icon.
 */
.kb-product-image {
	flex: none;
	display: block;
	width: 64px;
	height: 64px;
	border-radius: var( --kb-widget-radius, 8px );
	object-fit: cover;
}

.kb-product-name {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
}

.kb-product-price {
	margin: 0 0 4px;
	font-size: 13px;
	color: #444;
}

.kb-product-reasoning {
	margin: 0 0 8px;
	font-size: 13px;
	color: #666;
}

.kb-add-to-cart {
	width: 100%;
	padding: 8px 14px;
	border: none;
	border-radius: var( --kb-widget-radius, 8px );
	background: var( --kb-widget-primary, #2c3e50 );
	color: #fff;
	cursor: pointer;
	font-size: 13px;
}

.kb-add-to-cart:disabled {
	opacity: 0.7;
	cursor: default;
}

/*
 * Folgeauftrag "Varianten-Attribut-Klassifizierung als Onboarding-Schritt"
 * (TEIL D): renderProductCard() setzt bei einem variablen Vaterprodukt ohne
 * aufgeloeste Variante einen <a>-Link statt eines <button> ein, teilt sich
 * aber die Klasse .kb-add-to-cart oben fuer Farbe/Radius/Groesse - <a> ist
 * anders als <button> standardmaessig ein Inline-Element, box-sizing/
 * display/text-align/text-decoration muessen deshalb hier ergaenzt werden,
 * damit width:100%/padding aus .kb-add-to-cart genauso wirken wie beim Button.
 */
.kb-product-details-link {
	display: block;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
}

/*
 * KVP Mechanismus 2 "Kunden-Feedback im Chat-Widget" (Folgeauftrag, siehe
 * frontend/js/chat-widget.js renderFeedbackPrompt()) - bewusst DEZENT
 * gehalten (kleine, gedaempfte Symbole, kein auffaelliger Rahmen/
 * Hintergrund), siehe Auftrag: "NICHT als aufdringlicher Dialog".
 */
.kb-feedback {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: -4px 0 10px;
}

.kb-feedback-button {
	background: none;
	border: none;
	padding: 2px 4px;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.55;
	border-radius: var( --kb-widget-radius, 8px );
}

.kb-feedback-button:hover {
	opacity: 1;
}

.kb-feedback-thanks {
	margin: 0 0 10px;
	font-size: 12px;
	color: #888;
	font-style: italic;
}

.kb-input-row {
	display: flex;
	/*
	 * TEIL C (Folgeauftrag "Eingabefeld vergroessern"): flex-end statt des
	 * Flex-Defaults "stretch" - .kb-input ist jetzt ein mehrzeiliges
	 * <textarea> (3 Zeilen), .kb-send soll dabei unten buendig sitzen statt
	 * auf dieselbe Hoehe gestreckt zu werden.
	 */
	align-items: flex-end;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid #e2e2e2;
	flex: none;
}

.kb-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: var( --kb-widget-radius, 8px );
	/*
	 * FIX 4 (4. Folgeauftrag): bewusst NICHT `font: inherit` - das wuerde
	 * ungefiltert die vom Theme abgeleitete --kb-widget-font uebernehmen
	 * (siehe frontend/js/chat-widget.js, readThemeDesignValues() liest
	 * document.body's Font 1:1 durch). Ueberschriften-/Logo-Schriften
	 * mancher Themes sind fuer ein Eingabefeld ungeeignet (auffaellig
	 * gross/dekorativ) - der Nachrichtenverlauf (.kb-message) hat bereits
	 * eine eigene, feste font-size (14px) und bleibt unveraendert, das
	 * Eingabefeld bekommt hier zusaetzlich eine eigene, IMMER lesbare
	 * Standardschrift, unabhaengig vom Theme.
	 */
	font-family: system-ui, sans-serif;
	font-size: 14px;
	/*
	 * TEIL C: .kb-input ist jetzt ein <textarea> (rows=3, siehe
	 * chat-widget.js) - resize:none haelt die Panel-Breite/-Hoehe
	 * konsistent mit dem Rest des fest dimensionierten Layouts, kein vom
	 * Kunden ziehbarer Rand.
	 */
	resize: none;
	line-height: 1.4;
}

.kb-send {
	flex: none;
	padding: 8px 14px;
	border: none;
	border-radius: var( --kb-widget-radius, 8px );
	background: var( --kb-widget-primary, #2c3e50 );
	color: #fff;
	cursor: pointer;
}

.kb-input:disabled,
.kb-send:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.kb-footer {
	padding: 8px 16px;
	border-top: 1px solid #e2e2e2;
	font-size: 12px;
	text-align: center;
	flex: none;
}

.kb-escalation {
	color: var( --kb-widget-primary, #2c3e50 );
}

@media ( max-width: 420px ) {
	.kb-panel {
		right: 12px;
		left: 12px;
		bottom: 84px;
		width: auto;
		max-width: none;
	}

	.kb-bubble-row {
		right: 12px;
	}
}