/* =========================================================
   Rentify AI Asistent - lebdeći widget
   (boje su fiksne/samostalne, ne zavise od aktivne teme)
   ========================================================= */

.rentify-ai-widget {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.rentify-ai-bubble {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fc1951;
	color: #fff;
	border: none;
	border-radius: 999px;
	/* 13px + 22px icon = 48px total — kept in sync with the floating cart
	   button (.rc-floating-cart, rental-cart-system.php/cart.css), which is
	   deliberately sized to match this bubble exactly. */
	padding: 13px;
	cursor: pointer;
	box-shadow: none;
	transition: transform .15s ease;
}
.rentify-ai-bubble:hover {
	transform: translateY(-2px);
}
.rentify-ai-bubble-label {
	display: none;
}
.rentify-ai-bubble-icon svg {
	display: block;
}

.rentify-ai-panel {
	position: absolute;
	left: 0;
	/* bottom:0 (isto sidro kao dugme .rentify-ai-bubble, umjesto ranijeg
	   70px razmaka) + height uvećan za tih istih 70px (620->690), tako da
	   gornja ivica panela ostane na istom mjestu kao prije, ali panel sada
	   seže sve do dna widgeta — geometrijski prekriva pink dugme umjesto
	   da ga ostavlja vidljivim ispod otvorenog panela. Dugme je RANIJI
	   sibling u markupu (vidi widget.php), pa se panel po defaultu već
	   crta iznad njega u istom stacking kontekstu — nije trebalo dodavati
	   poseban z-index. */
	bottom: 0;
	/* 340->370px: na desktopu širi panel da sva 4 "brza odgovora" chipa
	   (Rentify Care / Dostava / Otkazivanje / Povrat) stanu u jedan red
	   umjesto da se "Povrat" prelama u drugi (vidi i malo stegnut
	   .rentify-ai-chip padding ispod). Mobilni breakpoint (≤480px) i dalje
	   ide na 100% širine preko zasebnog @media pravila, nije pogođen. */
	width: 370px;
	max-width: calc(100vw - 32px);
	height: 690px;
	max-height: calc(100vh - 50px);
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .15s ease, transform .15s ease;
	pointer-events: none;
}
.rentify-ai-panel[hidden] {
	display: none !important;
}
.rentify-ai-panel.is-open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.rentify-ai-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #17171a;
	color: #fff;
	padding: 9px 16px;
	font-weight: 600;
	font-size: 0.85rem;
	flex-shrink: 0;
}
.rentify-ai-close {
	/* BUGFIX (22.09.2026): "padding: 0" + küçük font-size demek tıklanabilir
	   alan sadece "×" karakterinin kendisi kadardı (birkaç piksel) — kullanıcı
	   isteğiyle hem karakter büyütüldü hem de gerçek bir tıklama alanı
	   (padding + min-width/height) eklendi. Negatif margin, büyüyen
	   padding'in header'ı görsel olarak itmesini engelliyor (buton hep aynı
	   yerde görünüyor, sadece tıklama alanı büyüdü). */
	background: none;
	border: none;
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	padding: 8px;
	margin: -8px -8px -8px 0;
	min-width: 36px;
	min-height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rentify-ai-messages {
	flex: 1;
	/* min-height:0 is required here — without it, a flex child in a
	   flex-direction:column parent defaults to min-height:auto, which means
	   it can never shrink below its own content height. That's harmless on
	   desktop (the panel has a fixed height with room to spare), but on
	   mobile the panel becomes height:100% fullscreen, and without this the
	   messages list just keeps growing instead of clipping+scrolling, which
	   is exactly why scrolling didn't work there. */
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #fff;
}

.rentify-ai-msg {
	max-width: 85%;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 0.9rem;
	line-height: 1.5;
	white-space: pre-wrap;
}
.rentify-ai-msg-bot {
	/* Avatar ikonica (::before ispod) je apsolutno pozicionirana LIJEVO od
	   balončića preko negativnog left-a — margin-left:32px ovdje pravi
	   prostor za nju UNUTAR sadržajnog okvira roditelja (#rentify-ai-messages),
	   umjesto da se oslanja na roditeljev padding, pa je overflow-y:auto
	   scroll kontejner nikad ne siječe. Primjenjuje se i na
	   .rentify-ai-typing (tri tačkice), jer ta poruka ima istu klasu. */
	position: relative;
	margin-left: 32px;
	align-self: flex-start;
	background: #fff;
	border: 1px solid #e3e6ee;
	color: #1c2333;
	border-bottom-left-radius: 4px;
}
.rentify-ai-msg-bot::before {
	content: '';
	position: absolute;
	left: -32px;
	top: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff url('https://rentify.ba/wp-content/uploads/2026/08/cropped-favicon-rentify.png') center/70% no-repeat;
	border: 1px solid #e3e6ee;
	flex-shrink: 0;
}
.rentify-ai-msg-user {
	align-self: flex-end;
	background: #fc1951;
	color: #fff;
	border-bottom-right-radius: 4px;
}

.rentify-ai-sources {
	align-self: flex-start;
	max-width: 85%;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.8rem;
	padding: 0 4px;
}
.rentify-ai-sources-label {
	font-weight: 700;
	color: #5b6478;
}
.rentify-ai-sources a {
	color: #fc1951;
}

/* 👍/👎 ispod bot poruke */
.rentify-ai-feedback {
	align-self: flex-start;
	display: flex;
	gap: 6px;
	padding: 0 4px;
	margin-top: -4px;
}
.rentify-ai-feedback-btn {
	background: none;
	border: none;
	font-size: 0.9rem;
	line-height: 1;
	cursor: pointer;
	padding: 3px 5px;
	border-radius: 6px;
	opacity: 0.55;
	transition: opacity .12s ease, background .12s ease;
}
.rentify-ai-feedback-btn:hover:not(:disabled) {
	opacity: 0.9;
	background: #eceef5;
}
.rentify-ai-feedback-btn.is-selected {
	opacity: 1;
	background: #eceef5;
}
.rentify-ai-feedback-btn:disabled {
	cursor: default;
}

/* "Pošalji podršci" - dugme + inline mini-formular kad AI nije siguran */
.rentify-ai-escalate {
	align-self: flex-start;
	max-width: 85%;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0 4px;
}
.rentify-ai-escalate-trigger {
	background: #fff;
	border: 1px solid #fc1951;
	color: #fc1951;
	font-size: 0.78rem;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 999px;
	cursor: pointer;
	align-self: flex-start;
	transition: background .12s ease, color .12s ease;
}
.rentify-ai-escalate-trigger:hover {
	background: #fc1951;
	color: #fff;
}
.rentify-ai-escalate-email {
	border: 1px solid #e3e6ee;
	border-radius: 10px;
	padding: 8px 12px;
	font-size: 0.85rem;
	font-family: inherit;
	outline: none;
	width: 220px;
	max-width: 100%;
}
.rentify-ai-escalate-email:focus {
	border-color: #fc1951;
}
.rentify-ai-escalate-actions {
	display: flex;
	gap: 8px;
}
.rentify-ai-escalate-send {
	background: #fc1951;
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 0.8rem;
	font-weight: 700;
	cursor: pointer;
}
.rentify-ai-escalate-send:hover:not(:disabled) {
	background: #c4133f;
}
.rentify-ai-escalate-send:disabled,
.rentify-ai-escalate-cancel:disabled {
	opacity: 0.6;
	cursor: default;
}
.rentify-ai-escalate-cancel {
	background: none;
	border: none;
	color: #5b6478;
	font-size: 0.8rem;
	cursor: pointer;
}
.rentify-ai-escalate-done {
	font-size: 0.82rem;
	color: #1a8a4a;
	font-weight: 600;
	padding: 4px 0;
}

.rentify-ai-typing {
	display: flex;
	align-items: center;
	gap: 6px;
}
/* Kratki status tekst ("Razmišljam" / "Tražim odgovor" / "Pripremam
   odgovor") koji se ciklično mijenja u chatbot.js dok se čeka odgovor. */
.rentify-ai-typing-text {
	font-size: 0.82rem;
	color: #757575;
	font-style: italic;
}
.rentify-ai-typing-dots {
	display: inline-flex;
	align-items: center;
}
.rentify-ai-typing-dots span {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #999;
	margin-right: 3px;
	animation: rentify-ai-blink 1.2s infinite;
}
.rentify-ai-typing-dots span:nth-child(2) { animation-delay: .2s; }
.rentify-ai-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes rentify-ai-blink {
	0%, 80%, 100% { opacity: .3; }
	40% { opacity: 1; }
}

.rentify-ai-chips {
	/* BUGFIX (22.09.2026): chip'ler daha compact yapıldı (kullanıcı isteği) —
	   container gap/padding küçültüldü. */
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	padding: 8px 10px;
	border-top: 1px solid #e3e6ee;
	background: #fff;
	flex-shrink: 0;
}
.rentify-ai-chip {
	background: #f5f6fb;
	border: 1px solid #e3e6ee;
	color: #1c2333;
	font-size: 0.71rem;
	font-weight: 600;
	padding: 5px 9px;
	white-space: nowrap;
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	transition: background .12s ease, border-color .12s ease;
}
.rentify-ai-chip:hover {
	background: #fce8ee;
	border-color: #fc1951;
	color: #fc1951;
}
.rentify-ai-chip:disabled {
	opacity: 0.5;
	cursor: default;
}

.rentify-ai-form {
	display: flex;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid #e3e6ee;
	background: #fff;
	flex-shrink: 0;
}
.rentify-ai-form input {
	flex: 1;
	border: 1px solid #e3e6ee;
	border-radius: 999px;
	padding: 10px 16px;
	font-size: 0.9rem;
	font-family: inherit;
	outline: none;
}
.rentify-ai-form input:focus {
	border-color: #fc1951;
}
.rentify-ai-form button {
	background: #fc1951;
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}
.rentify-ai-form button:hover {
	background: #c4133f;
}

/* NEW (12.09.2026): "AI may make mistakes"-style disclaimer, right under the
   input form — deliberately smaller/paler than .rentify-ai-panel-footer
   below it (contact info), so it reads as fine print rather than competing
   with the actual contact link for attention. */
.rentify-ai-disclaimer {
	flex-shrink: 0;
	padding: 2px 12px 0;
	text-align: center;
	font-size: 0.68rem;
	line-height: 1.3;
	color: #1a1a1a;
	background: #fff;
}

.rentify-ai-panel-footer {
	flex-shrink: 0;
	padding: 1px 12px 6px;
	text-align: center;
	font-size: 0.75rem;
	line-height: 1.3;
	color: #8a92a6;
	background: #fff;
}
.rentify-ai-panel-footer a {
	color: #8a92a6;
	text-decoration: underline;
}
.rentify-ai-panel-footer a:hover {
	color: #fc1951;
}

@media (max-width: 480px) {
	.rentify-ai-widget {
		left: 12px;
		bottom: 12px;
	}
	.rentify-ai-panel {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: none;
		border-radius: 0;
	}
	.rentify-ai-bubble-label {
		display: none;
	}
	.rentify-ai-bubble {
		padding: 10px;
	}
	.rentify-ai-bubble-icon svg {
		width: 18px;
		height: 18px;
	}
	.rentify-ai-chips {
		gap: 4px;
		padding: 6px 8px;
	}
	.rentify-ai-chip {
		font-size: 0.68rem;
		padding: 4px 8px;
	}
}