/* Chatbot AI — demo rozmowy w stylu komunikatora oraz układy 3-elementowe tej podstrony.
   #ld-chatbody i .ld-msg czyta analytics-events.js, więc nazwy zostają bez zmian. */

/* Demo: opis po lewej, okno rozmowy po prawej */
.ldp-chatdemo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: clamp(40px, 7vw, 112px);
	align-items: center;
}
.ldp-chatdemo .ldp-head { margin: 0 0 22px; }
.ldp-chatdemo .ldp-checklist { margin-top: 32px; }
@media (max-width: 900px) {
	.ldp-chatdemo { grid-template-columns: minmax(0, 1fr); }
}

.ldp-chat-wrap { width: 100%; max-width: 420px; margin-inline: auto; }
.ldp-chat {
	display: flex;
	flex-direction: column;
	border-radius: var(--r-xl);
	background: #fff;
	box-shadow: var(--sh-float);
	overflow: hidden;
}
.ldp-chat__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 18px 20px 12px;
	background: rgba(245, 245, 247, .92);
	border-bottom: 1px solid var(--c-line-2);
	text-align: center;
}
.ldp-chat__avatar {
	width: 46px;
	height: 46px;
	margin-bottom: 4px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--grad);
	color: #fff;
}
.ldp-chat__avatar .ldp-icon { width: 22px; height: 22px; }
.ldp-chat__name { font-size: .8125rem; font-weight: 600; color: var(--c-text); }
.ldp-chat__status { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--c-text-2); }
.ldp-chat__dot { width: 7px; height: 7px; border-radius: 50%; background: #34c759; }

.ldp-chat__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 520px;
	padding: 18px 18px 20px;
	overflow: hidden auto;
	overscroll-behavior: contain;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	background: #fff;
}
/* Rozpórka: przy kilku wiadomościach trzymają się dołu okna, jak w komunikatorze. */
.ldp-chat__body::before { content: ""; flex: 1 1 auto; }
.ldp-chat__body > * { flex: none; }
.ldp-chat__body:focus-visible { outline-offset: -3px; border-radius: 0; }

.ld-msg,
.ld-typing {
	position: relative;
	max-width: 80%;
	border-radius: 18px;
	font-size: .9375rem;
	line-height: 1.36;
	letter-spacing: -.01em;
	overflow-wrap: break-word;
}
.ld-msg { padding: 8px 14px; }
.ld-msg--bot, .ld-typing { align-self: flex-start; margin-left: 6px; background: #e9e9eb; color: #000; }
.ld-msg--user { align-self: flex-end; margin-right: 6px; background: #0071e3; color: #fff; }

/* Ogonki dymków */
.ld-msg::before, .ld-msg::after, .ld-typing::before, .ld-typing::after {
	content: "";
	position: absolute;
	bottom: 0;
	height: 17px;
}
.ld-msg--user::before { right: -7px; width: 20px; background: #0071e3; border-bottom-left-radius: 16px 14px; }
.ld-msg--user::after { right: -26px; width: 26px; background: #fff; border-bottom-left-radius: 10px; }
.ld-msg--bot::before, .ld-typing::before { left: -7px; width: 20px; background: #e9e9eb; border-bottom-right-radius: 16px 14px; }
.ld-msg--bot::after, .ld-typing::after { left: -26px; width: 26px; background: #fff; border-bottom-right-radius: 10px; }

/* Wskaźnik pisania */
.ld-typing { display: flex; gap: 5px; padding: 13px 15px; }
.ld-typing span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #8e8e93;
	animation: ldp-typing 1.2s ease-in-out infinite;
}
.ld-typing span:nth-child(2) { animation-delay: .15s; }
.ld-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ldp-typing {
	0%, 60%, 100% { opacity: .35; transform: none; }
	30% { opacity: 1; transform: translateY(-2px); }
}

/* Wejście wiadomości (tylko gdy skrypt odtwarza rozmowę) */
.is-animated .ld-msg, .is-animated .ld-typing { animation: ldp-msg-in .38s var(--ease-out) both; }
.is-animated .ld-msg--bot, .is-animated .ld-typing { transform-origin: 0 100%; }
.is-animated .ld-msg--user { transform-origin: 100% 100%; }
@keyframes ldp-msg-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }

.ldp-chat__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px 12px 16px;
	border-top: 1px solid var(--c-line-2);
	background: #fff;
}
.ldp-chat__input {
	flex: 1;
	min-width: 0;
	min-height: 34px;
	display: flex;
	align-items: center;
	padding: 6px 14px;
	border: 1px solid var(--c-line);
	border-radius: 18px;
	font-size: .9375rem;
	color: var(--c-text-2);
}
.ldp-chat__send {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--c-blue);
	color: #fff;
}
.ldp-chat__send .ldp-icon { width: 16px; height: 16px; stroke-width: 2.6; transform: rotate(-90deg); }

.ldp-chat__after { min-height: 24px; margin-top: 18px; text-align: center; }
.ldp-chat__replay { gap: 6px; font-size: .9375rem; }
.ldp-chat__replay .ldp-icon { width: 16px; height: 16px; stroke-width: 2; }

@media (max-width: 734px) {
	.ldp-chat__body { height: 460px; padding-inline: 14px; }
	.ldp-chat { border-radius: var(--r-lg); }
}

/* Trzy kafle bento: na tablecie ostatni na całą szerokość */
@media (min-width: 735px) and (max-width: 1068px) {
	.ldp-bento--3 > :last-child { grid-column: 1 / -1; min-height: 0; }
}

/* Kafel „Automatyzacje AI”: na telefonie wyższy, żeby przyciski nie wchodziły na dłoń ze zdjęcia */
@media (max-width: 734px) {
	.ldp-tile--related { min-height: 640px; }
}