/**
 * Villaro AI chat widget — floating bubble + panel. RTL, light/dark aware,
 * self-contained (no external fonts/CDN).
 */

#vlr-ai-widget * { box-sizing: border-box; }

.vlr-ai-fab {
	position: fixed;
	inset-inline-start: 20px;
	inset-block-end: 20px;
	z-index: 99998;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	background: linear-gradient(135deg, #45A17C, #3B8167);
	color: #fff;
	box-shadow: 0 8px 24px rgba(59, 129, 103, .38);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .18s ease, box-shadow .18s ease;
	font-family: Vazirmatn, IRANSans, Tahoma, sans-serif;
}
.vlr-ai-fab:hover { transform: translateY(-2px) scale(1.04); }
.vlr-ai-fab svg { width: 28px; height: 28px; }
.vlr-ai-fab .vlr-ai-badge {
	position: absolute;
	top: -3px;
	inset-inline-end: -3px;
	background: #ef4444;
	color: #fff;
	border-radius: 999px;
	min-width: 18px;
	height: 18px;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	padding: 0 4px;
	display: none;
}

/* Teaser popup — short invite shown above the chat bubble. */
.vlr-ai-teaser {
	position: fixed;
	inset-inline-start: 20px;
	inset-block-end: 88px;
	z-index: 99997;
	max-width: 230px;
	background: #fff;
	color: #1f2937;
	font-family: Vazirmatn, IRANSans, Tahoma, sans-serif;
	font-size: 13.5px;
	line-height: 1.7;
	padding: 11px 14px 11px 28px;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(16, 40, 32, .2);
	border: 1px solid #e6efe9;
	opacity: 0;
	transform: translateY(8px) scale(.96);
	transform-origin: bottom left;
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
	direction: rtl;
	text-align: right;
}
.vlr-ai-teaser.is-show { opacity: 1; transform: none; pointer-events: auto; animation: vlr-ai-teaser-bob 3s ease-in-out .4s infinite; }
@keyframes vlr-ai-teaser-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.vlr-ai-teaser::after { content: ''; position: absolute; inset-inline-start: 22px; bottom: -7px; width: 14px; height: 14px; background: #fff; border-inline-start: 1px solid #e6efe9; border-bottom: 1px solid #e6efe9; transform: rotate(-45deg); }
.vlr-ai-teaser__txt { cursor: pointer; display: block; font-weight: 600; }
.vlr-ai-teaser__x { position: absolute; top: 4px; inset-inline-end: 6px; background: transparent; border: 0; color: #9ca3af; font-size: 17px; line-height: 1; cursor: pointer; padding: 2px; }
.vlr-ai-teaser__x:hover { color: #4b5563; }
@media (max-width: 480px) { .vlr-ai-teaser { max-width: 200px; font-size: 13px; } }
@media (prefers-color-scheme: dark) {
	.vlr-ai-teaser { background: #1f2937; color: #e5e7eb; border-color: #374151; }
	.vlr-ai-teaser::after { background: #1f2937; border-color: #374151; }
}

/* When the mobile booking bar is present (single accommodation), lift the chat
   bubble + teaser above it so they don't overlap the «درخواست رزرو» bar. */
@media (max-width: 640px) {
	body.vlr-has-book-bar .vlr-ai-fab { inset-block-end: 92px; }
	body.vlr-has-book-bar .vlr-ai-teaser { inset-block-end: 160px; }
}

.vlr-ai-panel {
	position: fixed;
	inset-inline-start: 20px;
	inset-block-end: 92px;
	z-index: 99999;
	width: 360px;
	max-width: calc(100vw - 32px);
	height: 520px;
	max-height: calc(100vh - 120px);
	background: #fff;
	color: #1f2937;
	border-radius: 18px;
	box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
	display: none;
	flex-direction: column;
	overflow: hidden;
	font-family: Vazirmatn, IRANSans, Tahoma, sans-serif;
	font-size: 14px;
	transform-origin: bottom left;
	animation: vlr-ai-in .18s ease;
}
.vlr-ai-panel.is-open { display: flex; }
@keyframes vlr-ai-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.vlr-ai-head {
	background: linear-gradient(135deg, #45A17C, #3B8167);
	color: #fff;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.vlr-ai-head .vlr-ai-dot { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .3); }
.vlr-ai-head b { font-size: 15px; font-weight: 700; }
.vlr-ai-head small { opacity: .85; font-size: 11px; display: block; margin-top: 1px; }
.vlr-ai-head .vlr-ai-close { margin-inline-start: auto; background: transparent; border: 0; color: #fff; cursor: pointer; font-size: 22px; line-height: 1; opacity: .9; }
.vlr-ai-head .vlr-ai-close:hover { opacity: 1; }

.vlr-ai-log { flex: 1; overflow-y: auto; padding: 14px; background: #f6f8fa; display: flex; flex-direction: column; gap: 8px; }
.vlr-ai-msg { max-width: 84%; padding: 9px 12px; border-radius: 14px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.vlr-ai-msg.bot, .vlr-ai-msg.agent { align-self: flex-start; background: #fff; border: 1px solid #e5e7eb; border-bottom-inline-start-radius: 4px; }
.vlr-ai-msg.user { align-self: flex-end; background: linear-gradient(135deg, #45A17C, #3B8167); color: #fff; border-bottom-inline-end-radius: 4px; }
.vlr-ai-msg .vlr-ai-who { font-size: 10px; opacity: .7; margin-bottom: 2px; }
.vlr-ai-msg.agent { border-color: #bfe3d8; background: #ecfdf5; }

.vlr-ai-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; }
.vlr-ai-typing span { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: vlr-ai-bounce 1.2s infinite; }
.vlr-ai-typing span:nth-child(2) { animation-delay: .2s; }
.vlr-ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes vlr-ai-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

.vlr-ai-foot { border-top: 1px solid #e5e7eb; background: #fff; padding: 10px; }
.vlr-ai-human {
	display: block;
	width: 100%;
	margin-bottom: 8px;
	padding: 8px;
	border: 1px dashed #3B8167;
	border-radius: 10px;
	background: #f0fdfa;
	color: #3B8167;
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
}
.vlr-ai-human:hover { background: #ccfbf1; }
.vlr-ai-human[hidden] { display: none; }
.vlr-ai-inputrow { display: flex; gap: 8px; align-items: flex-end; }
.vlr-ai-inputrow textarea {
	flex: 1;
	resize: none;
	max-height: 96px;
	padding: 9px 12px;
	border: 1px solid #d1d5db;
	border-radius: 12px;
	font: inherit;
	font-size: 14px;
	line-height: 1.6;
	outline: none;
	color: #1f2937;
	background: #fff;
}
.vlr-ai-inputrow textarea:focus { border-color: #3B8167; }
.vlr-ai-send {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(135deg, #45A17C, #3B8167);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vlr-ai-send:disabled { opacity: .5; cursor: default; }
.vlr-ai-send svg { width: 20px; height: 20px; transform: scaleX(-1); }
.vlr-ai-note { text-align: center; font-size: 10.5px; color: #9ca3af; margin-top: 6px; }

/* Listing result cards */
.vlr-ai-cards { align-self: stretch; display: flex; flex-direction: column; gap: 8px; margin: 2px 0 4px; }
.vlr-ai-card {
	display: flex;
	gap: 10px;
	padding: 8px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.vlr-ai-card:hover { border-color: #3B8167; box-shadow: 0 6px 18px rgba(59, 129, 103, .16); transform: translateY(-1px); }
.vlr-ai-card__img {
	flex: 0 0 74px;
	width: 74px;
	height: 74px;
	border-radius: 10px;
	background-size: cover;
	background-position: center;
	background-color: #eef2f1;
}
.vlr-ai-card__img--none { position: relative; }
.vlr-ai-card__img--none::after { content: '🏡'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; opacity: .5; }
.vlr-ai-card__body { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.vlr-ai-card__title { font-weight: 700; font-size: 13.5px; color: #111827; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vlr-ai-card__meta { font-size: 11.5px; color: #6b7280; }
.vlr-ai-card__price { font-size: 12.5px; font-weight: 700; color: #3B8167; }
.vlr-ai-card__badge { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: middle; }
.vlr-ai-card__badge.is-ok { background: #dcfce7; color: #15803d; }
.vlr-ai-card__badge.is-full { background: #fee2e2; color: #b91c1c; }

@media (prefers-color-scheme: dark) {
	.vlr-ai-card { background: #1e293b; border-color: #334155; }
	.vlr-ai-card:hover { border-color: #3B8167; }
	.vlr-ai-card__img { background-color: #0b1220; }
	.vlr-ai-card__title { color: #f1f5f9; }
	.vlr-ai-card__meta { color: #94a3b8; }
	.vlr-ai-card__price { color: #8fd3b6; }
	.vlr-ai-card__badge.is-ok { background: #14342b; color: #6ee7b7; }
	.vlr-ai-card__badge.is-full { background: #3f1d1d; color: #fca5a5; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	.vlr-ai-panel { background: #0f172a; color: #e5e7eb; }
	.vlr-ai-log { background: #0b1220; }
	.vlr-ai-msg.bot, .vlr-ai-msg.agent { background: #1e293b; border-color: #334155; color: #e5e7eb; }
	.vlr-ai-msg.agent { background: #14342b; border-color: #1f5147; }
	.vlr-ai-typing { background: #1e293b; border-color: #334155; }
	.vlr-ai-foot { background: #0f172a; border-color: #1e293b; }
	.vlr-ai-inputrow textarea { background: #1e293b; border-color: #334155; color: #e5e7eb; }
	.vlr-ai-human { background: #0b2b26; border-color: #3B8167; color: #8fd3b6; }
	.vlr-ai-human:hover { background: #123a33; }
}