/**
 * סוכן הצ'אט המלווה - מופיע בכל עמודי האתר.
 *
 * פלטת הסמל: חום עמוק כמבנה, זהב כנקודת אור אחת. פינות נדיבות,
 * צללים רכים בשתי שכבות, ותנועה על עקומת cubic-bezier רכה.
 */

.ov-concierge {
	--c-ink: #131c26;
	--c-brown: var(--ov-navy, #002347);
	--c-brown-soft: var(--ov-navy-soft, #1c3a5e);
	--c-brown-deep: var(--ov-ink-deep, #001b38);
	--c-gold: var(--ov-gold, #d59b2a);
	--c-gold-bright: var(--ov-gold-bright, #f0b641);
	--c-gold-deep: var(--ov-gold-deep, #9a6c17);
	--c-surface: var(--ov-surface-alt, #f6f3ec);
	--c-paper: #ffffff;
	--c-muted: #6c7883;
	--c-line: #e9e3d5;

	--c-shadow-sm: 0 1px 2px rgba(0, 35, 71, 0.05), 0 4px 10px -4px rgba(0, 35, 71, 0.1);
	--c-shadow-md: 0 2px 4px rgba(0, 35, 71, 0.05), 0 18px 40px -16px rgba(0, 35, 71, 0.2);
	--c-shadow-lg: 0 8px 16px rgba(0, 35, 71, 0.08), 0 32px 64px -20px rgba(0, 35, 71, 0.3);
	--c-ease: cubic-bezier(0.22, 1, 0.36, 1);

	position: fixed;
	inset-block-end: 24px;
	inset-inline-start: 24px;
	z-index: 9000;
	font-family: 'Assistant', system-ui, sans-serif;
}

/* ---------- כפתור הפתיחה ---------- */

.ov-c__launcher {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px 26px;
	font-family: inherit;
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--c-brown-deep);
	background: linear-gradient(135deg, var(--c-gold-bright) 0%, var(--c-gold) 100%);
	border: 0;
	border-radius: 100px;
	cursor: pointer;
	box-shadow: 0 12px 30px -8px rgba(154, 108, 23, 0.55);
	transition: transform 0.35s var(--c-ease), box-shadow 0.35s ease;
}

.ov-c__launcher:hover,
.ov-c__launcher:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 16px 38px -6px rgba(154, 108, 23, 0.65);
}

.ov-c__launcher svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: currentColor;
}

/* כשהפאנל פתוח הכפתור מתכווץ לעיגול סגירה - כך יש תמיד שתי דרכים לסגור */
.ov-concierge.is-open .ov-c__launcher {
	padding: 15px;
	background: var(--c-brown);
	color: #fff;
	box-shadow: var(--c-shadow-lg);
}

.ov-concierge.is-open .ov-c__launcher-text {
	display: none;
}

.ov-c__launcher-close {
	display: none;
}

.ov-concierge.is-open .ov-c__launcher-close {
	display: block;
}

.ov-concierge.is-open .ov-c__launcher-open {
	display: none;
}

/* ---------- פאנל השיחה ---------- */

.ov-c__panel {
	position: absolute;
	inset-block-end: 76px;
	inset-inline-start: 0;
	width: min(400px, 90vw);
	height: min(580px, 74vh);
	display: flex;
	flex-direction: column;
	background: var(--c-paper);
	border-radius: 24px;
	box-shadow: var(--c-shadow-lg);
	overflow: hidden;
	transform-origin: bottom left;
	animation: ov-c-in 0.35s var(--c-ease);
}

/* קריטי: בלי זה מאפיין hidden לא עובד, כי display:flex גובר על ברירת המחדל של הדפדפן */
.ov-c__panel[hidden] {
	display: none;
}

@keyframes ov-c-in {
	from { opacity: 0; transform: translateY(12px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ov-c__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	background: linear-gradient(135deg, var(--c-brown) 0%, var(--c-brown-deep) 100%);
	color: #fff;
	border-block-end: 3px solid var(--c-gold);
}

.ov-c__head-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ov-c__head-title {
	margin: 0;
	font-family: 'Frank Ruhl Libre', Georgia, serif;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.ov-c__head-sub {
	font-size: 0.85rem;
	color: var(--c-gold-bright);
}

.ov-c__close {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.25s ease;
}

.ov-c__close:hover,
.ov-c__close:focus-visible {
	background: rgba(255, 255, 255, 0.28);
}

.ov-c__close svg {
	width: 15px;
	height: 15px;
}

/* ---------- יומן השיחה ---------- */

.ov-c__log {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
	background: var(--c-surface);
}

.ov-c__log::-webkit-scrollbar {
	width: 6px;
}

.ov-c__log::-webkit-scrollbar-thumb {
	background: rgba(0, 35, 71, 0.2);
	border-radius: 100px;
}

.ov-c__bubble {
	max-width: 88%;
	padding: 14px 18px;
	font-size: 1.02rem;
	line-height: 1.7;
	animation: ov-c-bubble-in 0.3s var(--c-ease);
}

@keyframes ov-c-bubble-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.ov-c__bubble--assistant {
	align-self: flex-start;
	background: var(--c-paper);
	color: var(--c-ink);
	border-radius: 20px 20px 20px 6px;
	box-shadow: var(--c-shadow-sm);
}

.ov-c__bubble--user {
	align-self: flex-end;
	background: var(--c-brown);
	color: #fff;
	border-radius: 20px 20px 6px 20px;
}

.ov-c__text {
	margin: 0 0 8px;
}

.ov-c__text:last-child {
	margin-bottom: 0;
}

/* נקודות המתנה */
.ov-c__bubble--typing {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 17px;
}

.ov-c__bubble--typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-gold-deep);
	opacity: 0.4;
	animation: ov-c-bounce 1.2s infinite ease-in-out;
}

.ov-c__bubble--typing span:nth-child(2) { animation-delay: 0.15s; }
.ov-c__bubble--typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes ov-c-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
	30% { transform: translateY(-5px); opacity: 1; }
}

/* ---------- שבבי הצעה ראשוניים ---------- */

.ov-c__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-self: flex-start;
	max-width: 94%;
}

.ov-c__chip {
	padding: 9px 16px;
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--c-brown);
	background: var(--c-paper);
	border: 1.5px solid var(--c-line);
	border-radius: 100px;
	cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s var(--c-ease);
}

.ov-c__chip:hover,
.ov-c__chip:focus-visible {
	border-color: var(--c-gold);
	color: var(--c-gold-deep);
	transform: translateY(-2px);
}

/* ---------- כרטיס שיעור מומלץ ---------- */

.ov-c__card {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
	padding: 11px;
	background: var(--c-surface);
	border-radius: 16px;
	border-inline-start: 3px solid var(--c-gold);
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s var(--c-ease), box-shadow 0.3s ease;
}

.ov-c__card:hover,
.ov-c__card:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--c-shadow-md);
	color: inherit;
}

.ov-c__card-thumb {
	width: 72px;
	height: 45px;
	object-fit: cover;
	border-radius: 9px;
	flex-shrink: 0;
	background: #e4ded1;
}

.ov-c__card-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ov-c__card-title {
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.45;
	color: var(--c-brown);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ov-c__card-rabbi {
	font-size: 0.84rem;
	color: var(--c-gold-deep);
}

/* ---------- טופס השליחה ---------- */

.ov-c__form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px;
	background: var(--c-paper);
	border-top: 1px solid var(--c-line);
}

/* מעטפת הקלט: השדה והכפתור יושבים בתוך אותה גלולה, כמו רכיב אחד */
.ov-c__composer {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	padding: 5px 6px 5px 5px;
	background: var(--c-surface);
	border: 1.5px solid transparent;
	border-radius: 100px;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.ov-c__composer:focus-within {
	border-color: var(--c-gold);
	box-shadow: 0 0 0 4px rgba(213, 155, 42, 0.16);
}

.ov-c__input {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--c-ink);
	background: transparent;
	border: 0;
}

.ov-c__input:focus {
	outline: none;
}

.ov-c__input::placeholder {
	color: var(--c-muted);
}

/* כפתור השליחה: grid עם place-items ממרכז את ה-SVG מדויק בעיגול */
.ov-c__send {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	padding: 0;
	color: var(--c-brown-deep);
	background: linear-gradient(135deg, var(--c-gold-bright) 0%, var(--c-gold) 100%);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 8px 20px -6px rgba(154, 108, 23, 0.5);
	transition: transform 0.3s var(--c-ease), opacity 0.25s ease;
}

.ov-c__send:hover,
.ov-c__send:focus-visible {
	transform: scale(1.06);
}

.ov-c__send svg {
	width: 19px;
	height: 19px;
	display: block;
	/* החץ מצביע שמאלה ב-RTL. המרכוז נעשה על ידי place-items בלבד. */
	transform: scaleX(-1);
	margin-inline-end: 1px;
}

.ov-c__send[disabled] {
	opacity: 0.45;
	cursor: default;
	box-shadow: none;
	transform: none;
}

/* ---------- נגישות ורספונסיביות ---------- */

.ov-concierge button:focus-visible,
.ov-concierge a:focus-visible {
	outline: 3px solid var(--c-gold);
	outline-offset: 3px;
}

@media (max-width: 480px) {
	.ov-concierge {
		inset-block-end: 16px;
		inset-inline-start: 16px;
		inset-inline-end: 16px;
	}

	.ov-c__panel {
		width: 100%;
		height: min(560px, 72vh);
	}

	.ov-c__launcher-text {
		display: none;
	}

	.ov-c__launcher {
		padding: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ov-c__launcher,
	.ov-c__card,
	.ov-c__send,
	.ov-c__chip,
	.ov-c__close {
		transition: none;
	}

	.ov-c__panel,
	.ov-c__bubble {
		animation: none;
	}

	.ov-c__bubble--typing span {
		animation: none;
	}

	.ov-c__launcher:hover,
	.ov-c__send:hover,
	.ov-c__chip:hover,
	.ov-c__card:hover {
		transform: none;
	}
}