/* ==========================================================================
   Mini Concierge — Sidebar-Widget mit kontextbezogenen Sprüchen
   Horizontales Layout: Icon links, Sprechblase rechts, Signatur darüber
   ========================================================================== */

.kw-mc {
	--kwl-mc-bubble-bg: color-mix(in srgb, var(--kwl-page-bg, #F5F0E8) 15%, var(--kwl-bg, #ffffff));
	--kwl-mc-text: var(--kwl-text, #1a202c);
	--kwl-mc-border: var(--kwl-border, #e2e8f0);
	--kwl-mc-accent: var(--kwl-accent, #BD9B5C);
	--kwl-mc-radius: var(--kwl-radius-md, 12px);
	--kwl-mc-icon-size: 56px;

	position: relative;
	align-self: flex-start;
}


/* Gold-Akzentlinie über dem Widget
   ========================================================================== */

.kw-mc__accent-line {
	height: 2px;
	margin-bottom: var(--kwl-space-sm, 12px);
	background: linear-gradient(
		to right,
		var(--kwl-mc-accent),
		color-mix(in srgb, var(--kwl-mc-accent) 40%, transparent)
	);
	border-radius: 1px;
}


/* Signatur: "Bruno empfiehlt" — dezente Serif-Linie
   ========================================================================== */

.kw-mc__signature {
	font-family: var(--kwl-font-heading, serif);
	font-size: var(--kwl-fsize-caption, 0.75rem);
	font-style: italic;
	color: var(--kwl-mc-accent);
	letter-spacing: var(--kwl-ls-light);
	margin-bottom: var(--kwl-space-xs, 8px);
	padding-left: calc(var(--kwl-mc-icon-size) + var(--kwl-space-md, 16px));
}


/* Horizontales Layout: Icon links, Blase rechts
   ========================================================================== */

.kw-mc__body {
	display: flex;
	align-items: flex-start;
	gap: var(--kwl-space-md, 16px);
}


/* Icon — ohne Kreis, volle Größe
   ========================================================================== */

.kw-mc__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--kwl-mc-icon-size);
	height: var(--kwl-mc-icon-size);
	color: var(--kwl-mc-accent);
	transition: transform 400ms var(--kwl-ease-decel),
	            opacity 400ms var(--kwl-ease-decel);
}

.kw-mc__icon svg {
	width: 100%;
	height: 100%;
}

/* Während Laden: Icon versteckt — Pop-in via Transition */
.kw-mc--loading .kw-mc__icon {
	transform: scale(0.8);
	opacity: 0;
}

/* Kein Icon: Signatur-Padding entfernen */
.kw-mc--no-icon .kw-mc__signature {
	padding-left: 0;
}


/* Sprechblase
   ========================================================================== */

.kw-mc__bubble {
	flex: 1;
	min-width: 0;
	background: var(--kwl-mc-bubble-bg);
	color: var(--kwl-mc-text);
	border: 1px solid var(--kwl-mc-border);
	border-radius: var(--kwl-mc-radius);
	padding: var(--kwl-space-sm, 12px) var(--kwl-space-md, 16px);
	position: relative;
	box-shadow: var(--kwl-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
	font-size: var(--kwl-fsize-small, 0.875rem);
	line-height: var(--kwl-lh-prose);
}

/* Pfeil zum Icon — zeigt nach links */
.kw-mc__bubble::before {
	content: '';
	position: absolute;
	top: 18px;
	left: -7px;
	width: 12px;
	height: 12px;
	background: var(--kwl-mc-bubble-bg);
	border-left: 1px solid var(--kwl-mc-border);
	border-bottom: 1px solid var(--kwl-mc-border);
	transform: rotate(45deg);
	transition: opacity 400ms var(--kwl-ease-decel) 150ms;
}

/* Pfeil während Laden versteckt */
.kw-mc__bubble--loading::before {
	opacity: 0;
}

/* Kein Pfeil wenn kein Icon */
.kw-mc--no-icon .kw-mc__bubble::before {
	display: none;
}


/* Spruch-Text
   ========================================================================== */

.kw-mc__text {
	display: block;
	overflow-wrap: break-word;
	transition: opacity 300ms var(--kwl-ease-decel),
	            transform 300ms var(--kwl-ease-decel);
}

/* Fragment Caching: Sanfter Fade bei JS-Text-Wechsel (Full-Page-Cache Fallback) */
.kw-mc__text--fading {
	opacity: 0;
	transform: translateY(4px);
}


/* Optionaler Deeplink — Underline-Reveal + Pfeil-Nudge
   ========================================================================== */

.kw-mc__link {
	--kwl-link-color: var(--kwl-mc-text, var(--kwl-text, #1a202c));
	--kwl-link-hover-color: var(--kwl-mc-accent);
	background-image: linear-gradient(var(--kwl-mc-accent), var(--kwl-mc-accent));
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: color 200ms ease, background-size 400ms var(--kwl-ease-decel);
}

.kw-mc__link::after {
	content: ' \2192';
	display: inline-block;
	opacity: 0.5;
	transition: opacity var(--kwl-transition, 200ms ease),
	            transform 300ms var(--kwl-ease-decel);
}

@media (hover: hover) {
	.kw-mc__link:hover {
		background-size: 100% 1px;
	}

	.kw-mc__link:hover::after {
		opacity: 1;
		transform: translateX(3px);
	}
}

.kw-mc__link:active {
	opacity: 0.8;
}

.kw-mc__link:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
	border-radius: 2px;
}


/* Lade-Zustand (Typing Dots) — "Concierge tippt", entfernt durch JS
   ========================================================================== */

.kw-mc__bubble--loading .kw-mc__text {
	color: transparent;
	animation: kwl-mc-no-js-reveal 0s 6s forwards;
}

/* Lade-Text für Reduced Motion (sichtbar bei prefers-reduced-motion) */
.kw-mc__loading-text {
	display: none;
}

/* Drei federnde Punkte — Chat-Metapher */
.kw-mc__dots {
	display: none;
	position: absolute;
	left: var(--kwl-space-md, 16px);
	top: 50%;
	transform: translateY(-50%);
	gap: 6px;
	align-items: center;
}

.kw-mc__bubble--loading .kw-mc__dots {
	display: flex;
	animation: kwl-mc-no-js-hide 0s 6s forwards;
}

.kw-mc__dots span {
	width: 6px;
	height: 6px;
	border-radius: var(--kwl-radius-full, 50%);
	background: var(--kwl-mc-accent);
	animation: kwl-mc-dot-bounce 1.4s ease-in-out infinite;
}

.kw-mc__dots span:nth-child(2) {
	animation-delay: 160ms;
}

.kw-mc__dots span:nth-child(3) {
	animation-delay: 320ms;
}

@keyframes kwl-mc-dot-bounce {
	0%, 60%, 100% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-4px);
	}
}

/* No-JS Sicherheitsnetz — nach 6s Fallback-Text anzeigen, Dots verbergen */
@keyframes kwl-mc-no-js-reveal {
	to { color: var(--kwl-mc-text); }
}

@keyframes kwl-mc-no-js-hide {
	to { visibility: hidden; }
}


/* SR-Only Lade-Hinweis — versteckt sobald Laden beendet */
.kw-mc__bubble:not(.kw-mc__bubble--loading) .kw-mc__loading-hint {
	display: none;
}


/* Fertig-Zustand — Spruch-Einblendung + Gold-Akzent-Glow
   ========================================================================== */

.kw-mc__bubble--ready .kw-mc__text {
	animation: kwl-mc-fade-in 500ms var(--kwl-ease-decel) forwards;
}

@keyframes kwl-mc-fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Gold-Akzent-Leiste glüht kurz auf wenn Spruch erscheint */
.kw-mc__bubble--ready {
	animation: kwl-mc-accent-glow 1s ease-out;
}

@keyframes kwl-mc-accent-glow {
	0%, 100% {
		box-shadow: var(--kwl-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
	}
	40% {
		box-shadow: var(--kwl-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08)),
		            inset 0 2px 10px -3px rgba(189, 155, 92, 0.45);
	}
}


/* Icon Breathe — sanftes Pulsieren nach Pop-in
   ========================================================================== */

.kw-mc--ready .kw-mc__icon {
	animation: kwl-mc-breathe 4s ease-in-out 800ms 3;
}

@keyframes kwl-mc-breathe {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.12); }
}


/* Kategorie-Farben — subtile Variationen
   ========================================================================== */

.kw-mc--weather .kw-mc__bubble {
	border-top: 3px solid color-mix(in srgb, var(--kwl-primary, #00315d) 60%, var(--kwl-mc-accent));
}

.kw-mc--content .kw-mc__bubble,
.kw-mc--events .kw-mc__bubble,
.kw-mc--season .kw-mc__bubble {
	border-top: 3px solid var(--kwl-mc-accent);
}

.kw-mc--local .kw-mc__bubble {
	border-top: 3px solid color-mix(in srgb, var(--kwl-mc-accent) 75%, var(--kwl-primary, #00315d));
}

.kw-mc--easter_egg .kw-mc__bubble {
	border-top: 3px solid color-mix(in srgb, var(--kwl-mc-accent) 70%, var(--kwl-success, #2f855a));
}

.kw-mc--easter_egg .kw-mc__signature {
	color: color-mix(in srgb, var(--kwl-mc-accent) 70%, var(--kwl-success, #2f855a));
}


/* Dark Mode
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	.kw-mc {
		--kwl-mc-bubble-bg: var(--kwl-bg-alt, #2d3748);
		--kwl-mc-text: var(--kwl-text, #f7fafc);
		--kwl-mc-border: var(--kwl-border, #4a5568);
	}

	.kw-mc__accent-line {
		background: linear-gradient(
			to right,
			var(--kwl-mc-accent),
			rgba(189, 155, 92, 0.3)
		);
	}

	.kw-mc__bubble {
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	}

	/* Dark Kategorie-Farben mit rgba */
	.kw-mc--weather .kw-mc__bubble {
		border-top-color: rgba(99, 179, 237, 0.7);
	}

	.kw-mc--easter_egg .kw-mc__bubble {
		border-top-color: rgba(189, 155, 92, 0.7);
	}

	.kw-mc--local .kw-mc__bubble {
		border-top-color: rgba(189, 155, 92, 0.65);
	}

	.kw-mc--easter_egg .kw-mc__signature {
		color: rgba(189, 155, 92, 0.85);
	}

	/* Gold-Glow im Dark Mode mit rgba */
	@keyframes kwl-mc-accent-glow {
		0%, 100% {
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
		}
		40% {
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),
			            inset 0 2px 10px -3px rgba(189, 155, 92, 0.35);
		}
	}
}


/* Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.kw-mc__bubble {
		transition: none;
	}

	/* Statt Dots: Sichtbaren Lade-Text anzeigen */
	.kw-mc__bubble--loading .kw-mc__text {
		animation: none;
		color: transparent;
	}

	.kw-mc__bubble--loading .kw-mc__loading-text {
		display: block;
		color: var(--kwl-text-muted, #718096);
		font-style: italic;
	}

	.kw-mc__bubble--loading .kw-mc__dots {
		display: none;
	}

	.kw-mc__bubble--ready .kw-mc__text {
		animation: none;
		opacity: 1;
	}

	.kw-mc__bubble--ready {
		animation: none;
	}

	.kw-mc--ready .kw-mc__icon,
	.kw-mc:not(.kw-mc--loading) .kw-mc__icon {
		animation: none;
	}

	.kw-mc__icon {
		transform: none;
		opacity: 1;
		transition: none;
	}

	.kw-mc__bubble::before {
		opacity: 1;
		transition: none;
	}

	.kw-mc__text {
		transition: none;
	}

	.kw-mc__text--fading {
		opacity: 1;
		transform: none;
	}

	.kw-mc__link {
		transition: none;
	}

	.kw-mc__link::after {
		transition: none;
	}
}

/* V4 Pink-Reset: zentral in kwl-shared-components.css via [data-kwl-link] (§281) */