.kl-conv {
	/* Prefer shared design tokens used across the site (gallery/single), with safe fallbacks. */
	--kl-conv-bg: var(--lula-bg, #0f0f11);
	--kl-conv-gold: var(--lula-gold, #c89a4b);
	--kl-conv-text: var(--lula-text, #e8e5de);
	/* Background image/texture (defaults to none; page can override). */
	--kl-conv-bg-image: var(--lula-texture-url, none);
	/* Fallbacks (for browsers without color-mix). */
	--kl-conv-muted: rgba(232, 229, 222, 0.7);
	--kl-conv-edge: rgba(200, 154, 75, 0.35);
	--kl-conv-shadow: rgba(0, 0, 0, 0.45);

	color: var(--kl-conv-text);
	font-family: var(--lula-font-family, "Cormorant Garamond", serif);
	/* Background moved to ::before for proper fade masking */
	background: transparent;
	padding: 64px 16px 84px;
	position: relative;
	isolation: isolate;
}

/* Page-level default: reuse the same premium texture used on landing.
   If theme already injects --lula-texture-url via kl_build_design_style_attr(), this won't override it. */
.kl-conv--start {
	--kl-conv-bg-image: var(--lula-texture-url, url("/wp-content/themes/astra-child-lula/assets/img/Pozadina - recenzije.webp"));
}

@supports (color: color-mix(in srgb, #fff 50%, transparent)) {
	.kl-conv {
		--kl-conv-muted: color-mix(in srgb, var(--kl-conv-text) 70%, transparent);
		--kl-conv-edge: color-mix(in srgb, var(--kl-conv-gold) 40%, transparent);
	}
}

/* Main background layer with fade-out at top */
.kl-conv::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		/* Main overlay gradient */
		linear-gradient(180deg, rgba(10, 7, 5, 0.74) 0%, rgba(10, 7, 5, 0.55) 40%, rgba(10, 7, 5, 0.78) 100%),
		/* Texture image */
		var(--kl-conv-bg-image),
		/* Premium gold accents */
		radial-gradient(circle at 18% 18%, rgba(200, 154, 75, 0.16), transparent 55%),
		radial-gradient(circle at 86% 15%, rgba(200, 154, 75, 0.12), transparent 58%),
		/* Softer texture overlay */
		radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.04), transparent 58%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.35));
	pointer-events: none;
	z-index: -1;
	/* Fade out on all edges - creates seamless floating effect */
	-webkit-mask-image: 
		/* Vertical fade: top and bottom */
		linear-gradient(to bottom, 
			transparent 0px, 
			rgba(0,0,0,0.25) 25px, 
			rgba(0,0,0,0.6) 50px, 
			rgba(0,0,0,0.85) 75px, 
			black 100px, 
			black calc(100% - 100px), 
			rgba(0,0,0,0.85) calc(100% - 75px), 
			rgba(0,0,0,0.6) calc(100% - 50px), 
			rgba(0,0,0,0.25) calc(100% - 25px), 
			transparent 100%
		),
		/* Horizontal fade: left and right */
		linear-gradient(to right, 
			transparent 0px, 
			rgba(0,0,0,0.4) 20px, 
			rgba(0,0,0,0.8) 40px, 
			black 60px, 
			black calc(100% - 60px), 
			rgba(0,0,0,0.8) calc(100% - 40px), 
			rgba(0,0,0,0.4) calc(100% - 20px), 
			transparent 100%
		);
	-webkit-mask-composite: source-in;
	mask-image: 
		linear-gradient(to bottom, 
			transparent 0px, 
			rgba(0,0,0,0.25) 25px, 
			rgba(0,0,0,0.6) 50px, 
			rgba(0,0,0,0.85) 75px, 
			black 100px, 
			black calc(100% - 100px), 
			rgba(0,0,0,0.85) calc(100% - 75px), 
			rgba(0,0,0,0.6) calc(100% - 50px), 
			rgba(0,0,0,0.25) calc(100% - 25px), 
			transparent 100%
		),
		linear-gradient(to right, 
			transparent 0px, 
			rgba(0,0,0,0.4) 20px, 
			rgba(0,0,0,0.8) 40px, 
			black 60px, 
			black calc(100% - 60px), 
			rgba(0,0,0,0.8) calc(100% - 40px), 
			rgba(0,0,0,0.4) calc(100% - 20px), 
			transparent 100%
		);
	mask-composite: intersect;
}

/* Premium separator - dots in center with fading lines on sides (matches landing page style) */
.kl-conv::after {
	content: "•  •  •";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: color-mix(in srgb, var(--kl-conv-gold) 90%, transparent);
	font-size: 8px;
	line-height: 1;
	text-shadow: 0 0 5px color-mix(in srgb, var(--kl-conv-gold) 60%, transparent);
	background: 
		linear-gradient(
			90deg,
			transparent 0%,
			transparent 15%,
			color-mix(in srgb, var(--kl-conv-gold) 30%, transparent) 20%,
			color-mix(in srgb, var(--kl-conv-gold) 50%, transparent) 30%,
			color-mix(in srgb, var(--kl-conv-gold) 50%, transparent) 45%,
			transparent 48%,
			transparent 52%,
			color-mix(in srgb, var(--kl-conv-gold) 50%, transparent) 55%,
			color-mix(in srgb, var(--kl-conv-gold) 50%, transparent) 70%,
			color-mix(in srgb, var(--kl-conv-gold) 30%, transparent) 80%,
			transparent 85%,
			transparent 100%
		);
	background-position: center center;
	background-size: 100% 2px;
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 2;
}

.kl-conv__inner {
	max-width: 1120px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

/* Split layout wrapper (desktop: 2 columns, mobile: stacked).
   This mirrors the gallery mental model (left sidebar + right content) without touching existing "glass" styles. */
.kl-conv__layout {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.kl-conv__layout-panel {
	min-width: 0;
}

@media (min-width: 980px) {
	.kl-conv__layout {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 48px;
		align-items: start;
	}
}

/* Mobile switcher (CTA) + view states.
   NOTE: HTML for the switcher is added in later phases; these styles are "ready" and safe. */
.kl-conv__mobile-switch {
	display: none;
}

.kl-conv__switch-line {
	display: inline;
}

@media (max-width: 979px) {
	.kl-conv__mobile-switch {
		display: flex;
		gap: 10px;
		align-items: center;
		justify-content: center;
		margin: 6px 0 14px;
		padding: 0 6px;
	}

	.kl-conv__switch-btn {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 2px;
		border: 1px solid color-mix(in srgb, var(--kl-conv-gold) 45%, transparent);
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.06);
		color: var(--kl-conv-text);
		padding: 10px 14px;
		font-family: var(--lula-body-font, "Inter", sans-serif);
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		cursor: pointer;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
	}

	.kl-conv--single-cta .kl-conv__mobile-switch {
		justify-content: center;
	}

	.kl-conv--single-cta .kl-conv__switch-btn {
		flex: 0 0 auto;
	}

	.kl-conv__switch-line {
		display: block;
		line-height: 1.1;
	}

	.kl-conv__switch-btn[aria-pressed="true"] {
		background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--kl-conv-gold) 55%, transparent),
			rgba(0, 0, 0, 0.12)
		);
		border-color: color-mix(in srgb, var(--kl-conv-gold) 70%, transparent);
		color: color-mix(in srgb, var(--kl-conv-bg) 10%, #000 90%);
	}

	.kl-conv__switch-btn:hover,
	.kl-conv__switch-btn:focus-visible,
	.kl-conv__switch-btn:active {
		background: linear-gradient(180deg, rgba(150,115,70,1) 0%, rgba(150,115,70,.74) 100%);
		border-color: rgba(176,141,87,.78);
		box-shadow:
			0 18px 52px rgba(0,0,0,.45),
			0 0 0 1px rgba(176,141,87,.18),
			inset 0 1px 0 rgba(255,255,255,.28);
		outline: none;
	}

	/* View switching: applied on .kl-conv root. */
	.kl-conv.is-view-new .kl-conv__layout-panel--chat {
		display: none;
	}

	.kl-conv.is-view-chat .kl-conv__layout-panel--start {
		display: none;
	}

	/* Default (mobile): show only CTA until user chooses (or JS forces a view). */
	.kl-conv[data-kl-conv-root]:not(.is-view-new):not(.is-view-chat) .kl-conv__layout-panel {
		display: none;
	}

	/* Mobile: hide chat title under the "Nastavi razgovor" switch. */
	.kl-conv__layout-panel--chat .kl-conv__bar .kl-conv-title {
		display: none;
	}
}

/* Mobile-only: hide archive + close action until FAZA 4 sets a "has-first-message" marker. */
@media (max-width: 979px) {
	.kl-conv:not(.has-first-message) [data-kl-conv-close-form] {
		display: none;
	}

	.kl-conv:not(.has-first-message) .kl-conv__bar-actions .kl-conv-link {
		display: none;
	}
}

.kl-conv__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 22.4px;
	border-radius: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	position: relative;
}

.kl-conv__bar-main {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	text-align: center;
}

.kl-conv__eyebrow {
	font-size: 12px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--kl-conv-gold) 80%, transparent);
}

.kl-conv-title {
	margin: 0;
	font-size: clamp(21.76px, 1.984vw, 30.72px);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 16px;
	text-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.kl-conv-title::before,
.kl-conv-title::after {
	content: "";
	height: 1px;
	flex: 1;
	opacity: 0.85;
}

.kl-conv-title::before {
	background-image:
		linear-gradient(to right, transparent, color-mix(in srgb, var(--kl-conv-gold) 70%, transparent)),
		radial-gradient(circle at 100% 50%, color-mix(in srgb, var(--kl-conv-gold) 90%, transparent) 0 2px, transparent 3px);
	background-repeat: no-repeat;
	background-size: 100% 1px, 7px 7px;
	background-position: 0 50%, 100% 50%;
}

.kl-conv-title::after {
	background-image:
		linear-gradient(to left, transparent, color-mix(in srgb, var(--kl-conv-gold) 70%, transparent)),
		radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--kl-conv-gold) 90%, transparent) 0 2px, transparent 3px);
	background-repeat: no-repeat;
	background-size: 100% 1px, 7px 7px;
	background-position: 0 50%, 0% 50%;
}

.kl-conv-subtitle {
	margin: 0;
	font-size: 11.264px;
	color: var(--kl-conv-text);
	font-family: var(--lula-body-font, "Inter", sans-serif);
	font-style: italic;
	max-width: 62ch;
}

.kl-conv-intro {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
	font-family: var(--lula-body-font, "Inter", sans-serif);
	font-size: 12.8px;
	color: var(--kl-conv-muted);
	max-width: 62ch;
	width: 100%;
	text-align: left;
}

.kl-conv-intro li::before {
	content: "•";
	color: color-mix(in srgb, var(--kl-conv-gold) 85%, transparent);
	margin-right: 10px;
}

.kl-conv-intro-main {
	margin: 10px 0 12px;
	padding: 0;
	font-family: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
	font-size: 0.95em;
	font-weight: 400;
	font-style: normal;
	line-height: 1.6;
	max-width: 44ch;
	width: 100%;
	text-align: center;
	color: rgba(236, 218, 185, 0.9);
}

.kl-conv-intro-sub {
	margin: 12px 0 20px;
	padding: 0;
	font-family: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
	font-size: 0.90em;
	font-weight: 300;
	font-style: italic;
	letter-spacing: 0.01em;
	opacity: 0.675;
	max-width: 44ch;
	width: 100%;
	text-align: center;
	color: rgba(236, 218, 185, 0.6);
}

.kl-conv-hint {
	margin: 10px 0 0;
	font-size: 14px;
	font-family: var(--lula-body-font, "Inter", sans-serif);
	color: color-mix(in srgb, var(--kl-conv-text) 80%, transparent);
	max-width: 62ch;
}

.kl-conv__bar-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	font-family: var(--lula-body-font, "Inter", sans-serif);
	margin-left: auto;
}

.kl-conv-link {
	color: var(--kl-conv-text);
	text-decoration: none;
	font-size: 13px;
	border-bottom: 1px solid color-mix(in srgb, var(--kl-conv-gold) 65%, transparent);
	padding-bottom: 2px;
}

.kl-conv-link--right {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 600;
	background: linear-gradient(180deg, rgba(176,141,87,1) 0%, rgba(176,141,87,.74) 100%);
	color: #0b0c0f;
	border: 1px solid rgba(176,141,87,.78);
	border-bottom: 1px solid rgba(176,141,87,.78);
	box-shadow: 0 14px 38px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.22);
	font-family: var(--lula-body-font, "Inter", sans-serif);
	transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
	text-decoration: none;
	user-select: none;
}

.kl-conv-link--right:hover {
	background: linear-gradient(180deg, rgba(150,115,70,1) 0%, rgba(150,115,70,.74) 100%);
	box-shadow: 0 18px 52px rgba(0,0,0,.45), 0 0 0 1px rgba(176,141,87,.18), inset 0 1px 0 rgba(255,255,255,.28);
	transform: translateY(-1px);
	color: #0b0c0f;
}

.kl-conv-link--right:active {
	transform: translateY(0px);
	box-shadow: 0 14px 38px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.22);
}

.kl-conv-link--right:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(176,141,87,.35), 0 14px 38px rgba(0,0,0,.38);
}

.kl-conv-panel {
	background:
		linear-gradient(135deg, rgba(200, 154, 75, 0.08), rgba(0, 0, 0, 0.20)),
		linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
	border-radius: 14.4px;
	padding: 22.4px;
	border: 1px solid color-mix(in srgb, var(--kl-conv-gold) 22%, transparent);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 22.4px 44px rgba(0, 0, 0, 0.5);
	-webkit-backdrop-filter: blur(12px) saturate(115%) brightness(92%);
	backdrop-filter: blur(12px) saturate(115%) brightness(92%);
	position: relative;
	font-size: 0.8em;
}

.kl-conv__placeholder-actions {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 10px;
}

/* Desktop: constrain the chat panel width to match the pre-chat placeholder panel (no typography changes). */
@media (min-width: 980px) {
	.kl-conv__layout-panel--chat .kl-conv-panel {
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
	}

	.kl-conv__layout-panel--chat .kl-conv__placeholder-actions {
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Start panel: 25% narrower width (390px = 520px * 0.75), preserve all internal sizes. */
	.kl-conv__layout-panel--start .kl-conv__bar {
		width: 450px;
		max-width: 450px;
		margin-left: 2px;
		margin-right: auto;
		box-sizing: border-box;
	}

	.kl-conv__layout-panel--start .kl-conv__bar-main {
		width: 100%;
		align-items: center;
		text-align: center;
	}

	.kl-conv__layout-panel--start .kl-conv-panel {
		width: 450px;
		max-width: 450px;
		margin-left: 2px;
		margin-right: auto;
		font-size: 0.8em;
		padding: 22.4px;
		box-sizing: border-box;
	}
}

.kl-conv-panel .is-hidden {
	display: none;
}

.kl-conv-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

.kl-conv-panel__title {
	margin: 0;
}

.kl-conv-panel__reopen {
	padding: 8px 14px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.kl-conv-archive-drawer {
	position: absolute;
	inset: 14px;
	border-radius: 16px;
	background:
		linear-gradient(135deg, rgba(200, 154, 75, 0.32), rgba(0, 0, 0, 0.68)),
		linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)),
		rgba(15, 11, 7, 0.88);
	border: 1px solid color-mix(in srgb, var(--kl-conv-gold) 28%, transparent);
	box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55);
	-webkit-backdrop-filter: blur(16px) saturate(130%);
	backdrop-filter: blur(16px) saturate(130%);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 10;
}

.kl-conv-archive-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.kl-conv-archive-drawer__title {
	font-family: var(--lula-body-font, "Inter", sans-serif);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 12px;
	color: color-mix(in srgb, var(--kl-conv-gold) 85%, transparent);
}

.kl-conv-archive-drawer__close {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--kl-conv-gold) 50%, transparent);
	background: rgba(255, 255, 255, 0.04);
	color: var(--kl-conv-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	padding: 0;
	margin: 0;
}

.kl-conv-archive-drawer__close span {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-weight: 300;
	width: 100%;
	height: 100%;
}

.kl-conv-archive-drawer__close:hover {
	background: rgba(255, 255, 255, 0.06);
}

.kl-conv-archive__list {
	overflow: auto;
	padding-right: 4px;
}

/* Allow archive items to be rendered as buttons (JS) or anchors (existing archive page). */
.kl-conv-archive__item {
	appearance: none;
	border: 1px solid rgba(194, 138, 67, 0.2);
	cursor: pointer;
	text-align: left;
	width: 100%;
}

.kl-conv-panel__title {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 600;
}

.kl-conv-body {
	/* Chat canvas should feel like a transcript (as per mock), not like a "form panel". */
	background: transparent;
	border-radius: 16px;
	padding: 6px 10px 0 0;
	max-height: min(520px, 55vh);
	overflow-y: auto;
	border: 0;
	margin-bottom: 18px;
}

/* Premium scrollbar styling (matches site design) */
.kl-conv-body::-webkit-scrollbar {
	width: 10px;
}

.kl-conv-body::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.22);
	border-radius: 999px;
}

.kl-conv-body::-webkit-scrollbar-thumb {
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--kl-conv-gold) 70%, transparent),
		color-mix(in srgb, var(--kl-conv-gold) 55%, transparent)
	);
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--kl-conv-gold) 28%, transparent);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.kl-conv-body::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--kl-conv-gold) 82%, transparent),
		color-mix(in srgb, var(--kl-conv-gold) 62%, transparent)
	);
}

/* Firefox */
.kl-conv-body {
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--kl-conv-gold) 60%, transparent) rgba(0, 0, 0, 0.22);
}

.kl-conv-messages {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.kl-conv-message {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 100%;
	font-family: var(--lula-body-font, "Inter", sans-serif);
}

.kl-conv-message--user {
	/* Mock shows "Vi" aligned to the left, not the typical right-aligned chat. */
	align-self: flex-start;
	text-align: left;
}

.kl-conv-message--master {
	/* Majstor poruke desno */
	align-self: flex-end;
	text-align: right;
}

.kl-conv-message--system {
	align-self: center;
	font-size: 14px;
	color: var(--kl-conv-muted);
}

.kl-conv-message__meta {
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--kl-conv-gold) 80%, transparent);
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Section-like label with lines (matches overall design system). */
.kl-conv-message__meta::before,
.kl-conv-message__meta::after {
	content: "";
	flex: 1;
	height: 1px;
	background: color-mix(in srgb, var(--kl-conv-gold) 40%, transparent);
	opacity: 0.85;
}

.kl-conv-message--user .kl-conv-message__meta {
	justify-content: flex-start;
}

.kl-conv-message--user .kl-conv-message__meta::before {
	display: none;
}

.kl-conv-message--master .kl-conv-message__meta {
	/* Majstor meta desno, s linijom koja "dolazi" s lijeve strane */
	justify-content: flex-end;
	text-align: right;
	padding-right: 6px;
}

.kl-conv-message--master .kl-conv-message__meta::before,
.kl-conv-message--master .kl-conv-message__meta::after {
	display: block;
}

.kl-conv-message--master .kl-conv-message__meta::after {
	/* da se label ne "centrira" između dvije linije kad je desno */
	display: none;
}

.kl-conv-message__bubble {
	display: inline-block;
	padding: 14px 18px;
	border-radius: 14px;
	/* "Parchment" bubble to match mock (light card on dark/wood background). */
	background: linear-gradient(180deg, rgba(232, 229, 222, 0.92), rgba(232, 229, 222, 0.84));
	color: rgba(12, 10, 8, 0.92);
	border: 1px solid rgba(200, 154, 75, 0.35);
	box-shadow: 0 18px 35px rgba(0, 0, 0, 0.38);
	line-height: 1.5;
	white-space: pre-wrap;
	width: fit-content;
	max-width: min(720px, 92%);
	/* Spriječi prelom riječi osim ako su duže od 50 znakova */
	word-break: normal;
	overflow-wrap: normal;
}

/* Za dugačke riječi (više od 50 znakova bez razmaka) omogući prelom */
.kl-conv-message__bubble[data-has-long-words] {
	overflow-wrap: break-word;
	word-break: break-word;
}

.kl-conv-message--user .kl-conv-message__bubble {
	/* User bubble slightly warmer. */
	background: linear-gradient(180deg, rgba(239, 231, 214, 0.94), rgba(232, 229, 222, 0.82));
}

.kl-conv-message--master .kl-conv-message__bubble {
	margin-left: auto;
}

@media (max-width: 768px) {
	.kl-conv-message__bubble {
		max-width: 92%;
	}
}

@media (min-width: 980px) {
	/*
	 * FIX: On wider screens, align-self:flex-start/flex-end makes the message wrapper shrink-to-fit.
	 * Because the bubble uses max-width in %, the computed width can become too small and text
	 * "leaks" outside the bubble background. Stretch the wrapper on desktop so % widths are
	 * based on the chat column width (mobile behavior stays unchanged).
	 */
	.kl-conv-message--user,
	.kl-conv-message--master {
		align-self: stretch;
	}

	.kl-conv-message__bubble {
		max-width: 60%;
	}
}

.kl-conv-message__time {
	font-size: 11px;
	color: var(--kl-conv-muted);
}

.kl-conv-message--master .kl-conv-message__time {
	text-align: right;
}

.kl-conv-message--user .kl-conv-message__time {
	text-align: left;
}

.kl-conv-attachments {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	gap: 10px;
	margin-top: 8px;
}

.kl-conv-attachments__item img {
	width: 100%;
	height: 90px;
	object-fit: cover;
	border-radius: 12px;
	border: 1px solid rgba(194, 138, 67, 0.35);
	display: block;
}

.kl-conv-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-family: var(--lula-body-font, "Inter", sans-serif);
}

/* Make the reply composer feel like a compact chat input (not a second "form"). */
.kl-conv-form--message .kl-conv-field label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.kl-conv-form--message textarea {
	min-height: 56px;
}

.kl-conv-wait {
	padding: 12px 14px;
	border-radius: 14px;
	background: rgba(0, 0, 0, 0.24);
	border: 1px solid rgba(194, 138, 67, 0.22);
	color: var(--kl-conv-muted);
	font-family: var(--lula-body-font, "Inter", sans-serif);
}

.kl-conv-wait--bar {
	margin-top: 10px;
	max-width: 62ch;
}

.kl-conv-wait--panel {
	margin-top: 16px;
	text-align: center;
	font-size: 0.875em;
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}

.kl-conv-compose {
	display: block;
}

.kl-conv-compose__form {
	gap: 10px;
}

.kl-conv-compose__row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 16px;
	border: 1px solid rgba(194, 138, 67, 0.22);
	background: rgba(0, 0, 0, 0.18);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.kl-conv-compose__attach,
.kl-conv-compose__send {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 1px solid color-mix(in srgb, var(--kl-conv-gold) 55%, transparent);
	background: rgba(255, 255, 255, 0.04);
	color: var(--kl-conv-text);
	font-family: var(--lula-body-font, "Inter", sans-serif);
	font-weight: 800;
	line-height: 1;
	padding: 0;
	margin: 0;
	/* Align with first line of textarea text (textarea has padding-top: 10px) */
	margin-top: 10px;
}

.kl-conv-compose__attach:hover {
	background: rgba(255, 255, 255, 0.06);
}

.kl-conv-compose__attach span,
.kl-conv-compose__send span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 20px;
	line-height: 1;
	font-weight: 300;
}

.kl-conv-compose__send {
	border-color: color-mix(in srgb, var(--kl-conv-gold) 70%, transparent);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--kl-conv-gold) 100%, #fff 0%),
		color-mix(in srgb, var(--kl-conv-gold) 74%, #000 26%)
	);
	color: color-mix(in srgb, var(--kl-conv-bg) 10%, #000 90%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 14px rgba(0, 0, 0, 0.28);
}

.kl-conv-compose__send:hover {
	filter: brightness(1.05);
}

.kl-conv-compose__field {
	flex: 1;
	margin: 0;
}

.kl-conv-compose__field textarea {
	width: 100%;
	min-height: 56px;
	max-height: none;
	resize: none;
	border-radius: 14px;
	padding: 10px 14px;
	background: rgba(26, 18, 12, 0.6);
	border: 1px solid rgba(190, 155, 95, 0.22);
	color: rgba(240, 224, 195, 0.95);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.55;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
	overflow-y: hidden;
	height: auto;
}

.kl-conv-compose__field textarea::placeholder {
	font-size: 0.9rem;
	font-weight: 300;
	color: rgba(240, 224, 195, 0.45);
}

.kl-conv-compose__field textarea:focus {
	outline: none;
	border-color: rgba(210, 180, 120, 0.45);
	box-shadow: 0 0 0 1px rgba(210, 180, 120, 0.15);
}

.kl-conv-compose__attachments {
	margin: 0;
}

.kl-conv-compose__attachments-summary {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--kl-conv-muted);
}

.kl-conv-compose__attachments-summary:empty {
	display: none;
}

/* Progressive enhancement:
   - Without JS: show file input normally.
   - With JS (.is-js): keep file input accessible but visually hidden (button "+" opens it). */
.kl-conv.is-js .kl-conv-compose__file {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Field wrapper reset (avoid browser default <p> margins + keep consistent spacing) */
.kl-conv-field {
	margin: 0;
	padding: 0;
}

.kl-conv-field label {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 6px;
	color: rgba(200, 170, 120, 0.6);
}

.kl-conv-field input,
.kl-conv-field textarea,
.kl-conv-field input[type="search"] {
	width: 100%;
	border-radius: 12px;
	border: 1px solid rgba(190, 155, 95, 0.22);
	background: rgba(30, 22, 16, 0.55) !important;
	color: rgba(240, 224, 195, 0.95) !important;
	padding: 10px 14px;
	font-size: 0.95rem;
	font-weight: 400;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.kl-conv-field input:hover,
.kl-conv-field input:active,
.kl-conv-field textarea:hover,
.kl-conv-field textarea:active {
	background: rgba(30, 22, 16, 0.55) !important;
	color: rgba(240, 224, 195, 0.95) !important;
}

.kl-conv-field textarea {
	background: rgba(26, 18, 12, 0.6);
	line-height: 1.55;
}

.kl-conv-field input::placeholder,
.kl-conv-field textarea::placeholder {
	font-size: 0.9rem;
	font-weight: 300;
	color: rgba(240, 224, 195, 0.45);
}

/* File input wrapper */
.kl-conv-attachments-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 0;
}

/* Hide the native file input */
.kl-conv-attachments-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	opacity: 0;
}

/* Custom button styled like "Pogledaj kolekciju" */
.kl-conv-attachments-btn {
	margin: 0;
	padding: 6px 22px;
	min-height: 31px;
	font-size: 12px;
	letter-spacing: 0.09em;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(176,141,87,1) 0%, rgba(176,141,87,.74) 100%);
	border-color: rgba(176,141,87,.78);
	box-shadow:
		0 14px 38px rgba(0,0,0,.38),
		inset 0 1px 0 rgba(255,255,255,.22);
	color: #0b0c0f;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
	user-select: none;
	font-family: var(--lula-body-font, "Inter", sans-serif);
}

.kl-conv-attachments-btn:hover {
	background: linear-gradient(180deg, rgba(150,115,70,1) 0%, rgba(150,115,70,.74) 100%);
	box-shadow:
		0 18px 52px rgba(0,0,0,.45),
		0 0 0 1px rgba(176,141,87,.18),
		inset 0 1px 0 rgba(255,255,255,.28);
	transform: translateY(-1px);
}

.kl-conv-attachments-btn:active {
	transform: translateY(0px);
	box-shadow: 0 14px 38px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.22);
}

.kl-conv-attachments-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(176,141,87,.35), 0 14px 38px rgba(0,0,0,.38);
}

/* Message next to button */
.kl-conv-attachments-message {
	margin: 0;
	font-size: 12px;
	color: var(--kl-conv-muted);
	font-family: var(--lula-body-font, "Inter", sans-serif);
}

/* Lista odabranih datoteka (start forma) */
.kl-conv-attachments-message.has-files {
	/* Omogućuje da lista bude "ispod" gumba, bez rušenja layouta. */
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kl-conv-attachments-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kl-conv-attachments-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.18);
	border: 1px solid rgba(194, 138, 67, 0.22);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.kl-conv-attachments-list-item-name {
	flex: 1;
	min-width: 0;
	font-size: 12px;
	color: var(--kl-conv-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kl-conv-attachments-list-item-remove {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	padding: 0;
	border-radius: 999px;
	border: 1px solid rgba(194, 138, 67, 0.40);
	background: rgba(255, 255, 255, 0.06);
	color: var(--kl-conv-text);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
	font-family: var(--lula-body-font, "Inter", sans-serif);
}

.kl-conv-attachments-list-item-remove:hover {
	background: rgba(255, 255, 255, 0.10);
	border-color: rgba(194, 138, 67, 0.60);
	transform: translateY(-1px);
}

.kl-conv-attachments-list-item-remove:active {
	transform: translateY(0px);
}

.kl-conv-attachments-list-item-remove:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px rgba(176, 141, 87, 0.35);
}

.kl-conv-field input:focus,
.kl-conv-field textarea:focus,
.kl-conv-field input[type="search"]:focus {
	outline: none !important;
	background: rgba(30, 22, 16, 0.55) !important;
	color: rgba(240, 224, 195, 0.95) !important;
	border-color: rgba(210, 180, 120, 0.45) !important;
	box-shadow: 0 0 0 1px rgba(210, 180, 120, 0.15) !important;
}

.kl-conv-field textarea:focus {
	background: rgba(26, 18, 12, 0.6) !important;
}

/* Prevent browser autofill from changing background to white */
.kl-conv-field input:-webkit-autofill,
.kl-conv-field input:-webkit-autofill:hover,
.kl-conv-field input:-webkit-autofill:focus,
.kl-conv-field input:-webkit-autofill:active {
	/* Chrome/Edge: paint our dark background over autofill */
	-webkit-box-shadow: 0 0 0 1000px rgba(30, 22, 16, 0.55) inset !important;
	box-shadow: 0 0 0 1000px rgba(30, 22, 16, 0.55) inset !important;
	-webkit-text-fill-color: rgba(240, 224, 195, 0.95) !important;
	caret-color: rgba(240, 224, 195, 0.95) !important;
	background-color: rgba(30, 22, 16, 0.55) !important;
	transition: background-color 9999s ease-out 0s;
}

/* (Optional but safe) If some browsers autofill textarea as well */
.kl-conv-field textarea:-webkit-autofill,
.kl-conv-field textarea:-webkit-autofill:hover,
.kl-conv-field textarea:-webkit-autofill:focus,
.kl-conv-field textarea:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px rgba(30, 22, 16, 0.55) inset !important;
	box-shadow: 0 0 0 1000px rgba(30, 22, 16, 0.55) inset !important;
	-webkit-text-fill-color: rgba(240, 224, 195, 0.95) !important;
	caret-color: rgba(240, 224, 195, 0.95) !important;
	background-color: rgba(30, 22, 16, 0.55) !important;
	transition: background-color 9999s ease-out 0s;
}

/* Firefox */
.kl-conv-field input:-moz-autofill,
.kl-conv-field textarea:-moz-autofill {
	box-shadow: 0 0 0 1000px rgba(30, 22, 16, 0.55) inset !important;
	-moz-text-fill-color: rgba(240, 224, 195, 0.95) !important;
}

.kl-conv-field--hidden {
	display: none;
}

.kl-conv-field--checkbox label {
	font-size: 13px;
	text-transform: none;
	letter-spacing: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Custom checkbox (keeps it consistent with the rest of the UI). */
.kl-conv-field--checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, var(--kl-conv-gold) 55%, transparent);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.35));
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
	margin-top: 0;
	flex: 0 0 auto;
	display: inline-grid;
	place-content: center;
}
.kl-conv-field--checkbox input[type="checkbox"]::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 3px;
	transform: scale(0);
	transition: transform 120ms ease;
	background: color-mix(in srgb, var(--kl-conv-gold) 92%, #000 8%);
}
.kl-conv-field--checkbox input[type="checkbox"]:checked::before {
	transform: scale(1);
}

.kl-conv-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: center;
}

.kl-conv-action {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: center;
}

.kl-conv-button {
	margin: 0;
	padding: 6px 22px;
	min-height: 31px;
	font-size: 12px;
	letter-spacing: 0.09em;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(176,141,87,1) 0%, rgba(176,141,87,.74) 100%);
	border: 1px solid rgba(176,141,87,.78);
	box-shadow:
		0 14px 38px rgba(0,0,0,.38),
		inset 0 1px 0 rgba(255,255,255,.22);
	color: #0b0c0f;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
	user-select: none;
	font-family: var(--lula-body-font, "Inter", sans-serif);
}

.kl-conv-button:hover {
	background: linear-gradient(180deg, rgba(150,115,70,1) 0%, rgba(150,115,70,.74) 100%);
	box-shadow:
		0 18px 52px rgba(0,0,0,.45),
		0 0 0 1px rgba(176,141,87,.18),
		inset 0 1px 0 rgba(255,255,255,.28);
	transform: translateY(-1px);
}

.kl-conv-button--ghost {
	background: transparent;
	color: var(--kl-conv-ink);
	border: 1px solid rgba(194, 138, 67, 0.5);
	box-shadow: none;
}

.kl-conv-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* Start form loading indicator (thin premium bar + subtle pulse text) */
.kl-conv-loading {
	margin-top: 12px;
	width: 100%;
	max-width: 340px;
	text-align: center;
}

.kl-conv-loading__bar {
	width: 100%;
	height: 3px;
	background: color-mix(in srgb, var(--kl-conv-gold) 18%, transparent);
	border-radius: 999px;
	overflow: hidden;
	position: relative;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.kl-conv-loading__progress {
	height: 100%;
	width: 0%;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--kl-conv-gold) 85%, #fff 15%),
		var(--kl-conv-gold),
		color-mix(in srgb, var(--kl-conv-gold) 85%, #fff 15%)
	);
	border-radius: 999px;
	transition: width 0.18s ease-out;
	box-shadow: 0 0 10px color-mix(in srgb, var(--kl-conv-gold) 55%, transparent);
}

.kl-conv-loading__text {
	margin: 8px 0 0;
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--kl-conv-muted);
	font-family: var(--lula-body-font, "Inter", sans-serif);
	animation: kl-conv-loading-pulse 1.35s ease-in-out infinite;
}

@keyframes kl-conv-loading-pulse {
	0%, 100% { opacity: 0.55; }
	50% { opacity: 1; }
}

.kl-conv-status {
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	background: rgba(255, 255, 255, 0.08);
	color: var(--kl-conv-ink);
	border: 1px solid rgba(194, 138, 67, 0.3);
}

.kl-conv-status--open {
	background: rgba(194, 138, 67, 0.2);
}

.kl-conv-status--answered {
	background: rgba(92, 130, 98, 0.35);
}

.kl-conv-status--closed {
	background: rgba(131, 74, 74, 0.35);
}

.kl-conv-notice {
	margin-bottom: 16px;
	padding: 10px 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(194, 138, 67, 0.2);
	font-family: var(--lula-body-font, "Inter", sans-serif);
}

.kl-conv-guest-notice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	padding: 10px 14px 10px 18px;
	border-radius: 12px;
	background: rgba(24, 17, 12, 0.54);
	border: 1px solid rgba(214, 182, 118, 0.36);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
	font-family: var(--lula-body-font, "Inter", sans-serif);
	font-size: 12.5px;
	color: rgba(236, 226, 210, 0.92);
	position: relative;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	overflow: hidden;
}

.kl-conv-guest-notice::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 10px;
	bottom: 10px;
	width: 2px;
	border-radius: 999px;
	background: linear-gradient(
		180deg,
		transparent 0%,
		rgba(205, 168, 104, 0.85) 25%,
		rgba(205, 168, 104, 1) 50%,
		rgba(205, 168, 104, 0.85) 75%,
		transparent 100%
	);
	opacity: 0.6;
	box-shadow: 0 0 0 rgba(205, 168, 104, 0);
	animation: kl-guest-line-pulse 2.1s ease-in-out infinite;
	z-index: 0;
}

.kl-conv-guest-notice::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
	background:
		radial-gradient(circle at 12% 50%, rgba(222, 190, 128, 0.28), transparent 60%),
		linear-gradient(120deg, rgba(222, 190, 128, 0.22), rgba(20, 14, 10, 0));
	opacity: 0.28;
	box-shadow: 0 0 0 rgba(222, 190, 128, 0);
	animation: kl-guest-panel-pulse 2.6s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

.kl-conv-guest-notice > * {
 position: relative;
	z-index: 1;
}

.kl-conv-guest-text {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.kl-conv-guest-icon {
	width: 18px;
	height: 18px;
	color: rgba(205, 168, 104, 0.9);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0 2px 6px rgba(205, 168, 104, 0.25));
	flex: 0 0 auto;
}

.kl-conv-guest-icon svg {
	width: 18px;
	height: 18px;
}

.kl-conv-guest-message {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.kl-conv-guest-notice__cta {
	border-radius: 999px;
	border: 1px solid rgba(205, 168, 104, 0.45);
	background: linear-gradient(180deg, rgba(176, 141, 87, 1) 0%, rgba(176, 141, 87, 0.74) 100%);
	color: #0b0c0f;
	padding: 6px 12px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
	transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.kl-conv-guest-notice__cta:hover {
	background: linear-gradient(180deg, rgba(150, 115, 70, 1) 0%, rgba(150, 115, 70, 0.74) 100%);
	border-color: rgba(205, 168, 104, 0.7);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	transform: translateY(-1px);
}

.kl-conv-guest-notice__cta:focus-visible {
	outline: 2px solid rgba(205, 168, 104, 0.65);
	outline-offset: 2px;
}

@keyframes kl-guest-line-pulse {
	0%, 100% {
		opacity: 0.35;
		box-shadow: 0 0 0 rgba(222, 190, 128, 0);
	}
	50% {
		opacity: 1;
		box-shadow: 0 0 14px rgba(222, 190, 128, 0.45);
	}
}

@keyframes kl-guest-panel-pulse {
	0%, 100% {
		opacity: 0.22;
		box-shadow: 0 0 0 rgba(222, 190, 128, 0);
	}
	50% {
		opacity: 0.55;
		box-shadow: 0 0 26px rgba(222, 190, 128, 0.3);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kl-conv-guest-notice::before {
		animation: none;
	}
	.kl-conv-guest-notice::after {
		animation: none;
	}
}

@media (max-width: 520px) {
	.kl-conv-guest-notice {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.kl-conv-guest-message {
		white-space: normal;
	}

	.kl-conv-guest-notice__cta {
		width: 100%;
		text-align: center;
	}
}

.kl-conv-notice:empty {
	display: none;
}

.kl-conv-notice--error {
	background: rgba(131, 74, 74, 0.35);
	border-color: rgba(186, 98, 98, 0.5);
}

.kl-conv-footer {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.kl-conv-footer .is-hidden {
	display: none;
}

.kl-conv-closed-note {
	margin: 0 0 12px;
	color: var(--kl-conv-muted);
	font-family: var(--lula-body-font, "Inter", sans-serif);
}

.kl-conv-archive {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.kl-conv-archive__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.kl-conv-archive__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-radius: 16px;
	background: rgba(0, 0, 0, 0.3);
	text-decoration: none;
	color: inherit;
	border: 1px solid rgba(194, 138, 67, 0.2);
	transition: transform 0.2s ease, border 0.2s ease;
}

.kl-conv-archive__item:hover {
	transform: translateY(-1px);
	border-color: rgba(194, 138, 67, 0.5);
}

.kl-conv-archive__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.kl-conv-archive__title {
	font-weight: 600;
}

.kl-conv-archive__date {
	font-size: 12px;
	color: var(--kl-conv-muted);
}

.kl-conv-archive__status {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(194, 138, 67, 0.3);
	background: rgba(255, 255, 255, 0.08);
}

.kl-conv-archive__status--open {
	background: rgba(194, 138, 67, 0.2);
}

.kl-conv-archive__status--answered {
	background: rgba(92, 130, 98, 0.35);
}

.kl-conv-archive__status--closed {
	background: rgba(131, 74, 74, 0.35);
}

@media (max-width: 768px) {
	.kl-conv {
		padding: 32px 12px 48px;
	}

	.kl-conv__bar {
		position: static;
	}

	.kl-conv__bar-actions {
		flex-wrap: nowrap;
		gap: 8px;
	}

	.kl-conv-status {
		font-size: 10px;
		padding: 5px 10px;
		white-space: nowrap;
		letter-spacing: 0.12em;
	}

	.kl-conv-link--right {
		font-size: 10px;
		padding: 5px 10px;
		white-space: nowrap;
		letter-spacing: 0.14em;
	}

	.kl-conv-panel {
		padding: 20px;
	}

	.kl-conv-body {
		max-height: 48vh;
	}

	.kl-conv-message {
		max-width: 92%;
	}

	.kl-conv-footer {
		position: static;
	}

	.kl-conv-guest-notice {
		flex-direction: column;
		align-items: flex-start;
	}
}