/* יו ספרות שנוגעת: צ'אט המלצות
 * עיצוב: יניב, 13.10.2026. מחליף את plugin/usafrut-chat/assets/chat.css.
 * מובייל ראשון. בסיס = מסך מלא בטלפון. מעל 640px רוחב ו-520px גובה = חלון צף.
 * כל כפתור בספציפיות .dsa-root button.dsa-x כי התבנית דורסת עיצוב כפתורים.
 * המפרט המלא: docs/design/chat/design-spec.md
 */

/* ============ טוקנים ============ */
.dsa-root {
	--dsa-red: var(--dsa-accent, #a4141c);              /* צבע המותג מההגדרות (look.accent) */
	--dsa-red-deep: var(--dsa-accent-deep, #4d0000);    /* סוף הגרדיאנט של ההדר, נגזר */
	--dsa-red-press: var(--dsa-accent-press, #8c1118);
	--dsa-red-wash: var(--dsa-accent-wash, #fbe7e8);
	--dsa-black: #000000;        /* השחור של האתר (בלוק ההמבורגר, כפתורי "לרשימה המלאה") */
	--dsa-ink: #1f1f1f;          /* גוף טקסט, 16.5:1 על לבן */
	--dsa-muted: #5f5858;        /* טקסט משני, 6.9:1 על לבן */
	--dsa-faint: #6a6262;        /* שורת הגילוי, 5.9:1 על לבן */
	--dsa-surface: #ffffff;
	--dsa-tint: #f4f2f2;         /* שדה הקלדה, אינדיקטור, תגית חום */
	--dsa-ring: rgba(0, 0, 0, .13);
	--dsa-error-bg: #fbeced;
	--dsa-error-ink: #7d0f15;    /* 9.4:1 על הרקע שלו */
	--dsa-ease: cubic-bezier(.22, 1, .36, 1);
	--dsa-safe-t: env(safe-area-inset-top, 0px);
	--dsa-safe-b: env(safe-area-inset-bottom, 0px);
	/* אייקון הצ'אט: בועת דיבור עם ספר פתוח. לבן, ללאונצ'ר */
	--dsa-ico-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10a4 4 0 0 1 4 4v5a4 4 0 0 1-4 4h-6.5L6 20.5V17a3 3 0 0 1-3-3V8a4 4 0 0 1 4-4z'/%3E%3Cpath d='M12 8.4c-1.2-.8-2.6-1.1-4-1.1v5.5c1.4 0 2.8.3 4 1.1 1.2-.8 2.6-1.1 4-1.1V7.3c-1.4 0-2.8.3-4 1.1zm0 0v5.5'/%3E%3C/svg%3E");
	/* אותו אייקון באדום, לאווטאר בכותרת החלון */
	--dsa-ico-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a4141c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10a4 4 0 0 1 4 4v5a4 4 0 0 1-4 4h-6.5L6 20.5V17a3 3 0 0 1-3-3V8a4 4 0 0 1 4-4z'/%3E%3Cpath d='M12 8.4c-1.2-.8-2.6-1.1-4-1.1v5.5c1.4 0 2.8.3 4 1.1 1.2-.8 2.6-1.1 4-1.1V7.3c-1.4 0-2.8.3-4 1.1zm0 0v5.5'/%3E%3C/svg%3E");

	position: static;
	direction: rtl;
	font-family: "Assistant", "Heebo", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--dsa-ink);
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}
.dsa-root *,
.dsa-root *::before,
.dsa-root *::after { box-sizing: border-box; }
.dsa-root [hidden] { display: none !important; }
.dsa-root svg { width: 22px; height: 22px; fill: currentColor; flex: none; display: block; }

/* טקסט לקוראי מסך בלבד */
.dsa-root .dsa-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

/* איפוס משותף לכל כפתורי הווידג'ט מול התבנית.
 * גם :hover ו-:focus מקבלים ערכי בסיס במפורש (למטה, ליד כל כפתור), כי ה-Kit של אלמנטור
 * צובע button:hover ו-button:focus, ובמגע ה-hover נתקע. מצבי ה-hover האמיתיים בבלוק (hover: hover) בסוף. */
.dsa-root button.dsa-launcher,
.dsa-root button.dsa-new,
.dsa-root button.dsa-close,
.dsa-root button.dsa-chip,
.dsa-root button.dsa-send {
	margin: 0;
	min-height: 0;
	min-width: 0;
	border: 0;
	font-family: inherit;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
	-webkit-appearance: none;
	appearance: none;
}

/* ============ הכפתור הצף (סגור) ============ */
.dsa-root button.dsa-launcher {
	position: fixed;
	z-index: var(--dsa-z, 9990);
	left: var(--dsa-x, 16px);
	right: auto;
	bottom: calc(var(--dsa-y, 20px) + var(--dsa-safe-b));
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: auto;
	height: 52px;
	padding-block: 0;
	padding-inline-start: 6px;   /* RTL: הצד הימני, איפה שהעיגול האדום */
	padding-inline-end: 18px;
	border-radius: 999px;
	background: var(--dsa-surface);
	color: var(--dsa-black);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	/* טבעת שיער + צל חזק: נראה על אדום, שחור, לבן ותמונה */
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, .14),
		0 2px 6px rgba(0, 0, 0, .14),
		0 14px 34px -10px rgba(40, 0, 0, .6);
	transition: transform 220ms var(--dsa-ease), box-shadow 220ms var(--dsa-ease);
	animation: dsa-launch-in 420ms var(--dsa-ease) 400ms backwards;
}
.dsa-root button.dsa-launcher:hover,
.dsa-root button.dsa-launcher:focus { background: var(--dsa-surface); color: var(--dsa-black); }
.dsa-root button.dsa-launcher::before {
	content: "";
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--dsa-ico-white) center / 26px 26px no-repeat, var(--dsa-red);
	transition: background-color 220ms var(--dsa-ease);
}
.dsa-root button.dsa-launcher > svg { display: none; }  /* האייקון הישן מוחלף ב-::before */
.dsa-root .dsa-launcher-text { display: block; }
.dsa-root button.dsa-launcher:active { transform: scale(.97); transition-duration: 100ms; }
.dsa-root button.dsa-launcher:focus-visible {
	outline: none;
	/* טבעת כפולה שחור-לבן: נראית על כל רקע */
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--dsa-black), 0 14px 34px -10px rgba(40, 0, 0, .6);
}
.dsa-root.dsa-open button.dsa-launcher { display: none; }

/* ============ החלון: מובייל, מסך מלא ============ */
.dsa-root .dsa-panel {
	display: none;
	position: fixed;
	z-index: 2147483000;  /* מעל סרגל הניהול (99999), בועת הסל (9999999) וההדר. דיאלוג מסך מלא */
	left: 0;
	right: 0;
	top: var(--dsa-vvt, 0px);
	width: 100%;
	height: 100vh;
	height: 100dvh;
	height: var(--dsa-vvh, 100dvh);   /* JS מזין את גובה ה-visualViewport כשהמקלדת פתוחה */
	flex-direction: column;
	margin: 0;
	background: var(--dsa-surface);
	overflow: hidden;
	overscroll-behavior: contain;
}
.dsa-root.dsa-open .dsa-panel {
	display: flex;
	animation: dsa-sheet-in 300ms var(--dsa-ease) backwards;
}

/* ---- כותרת ---- */
.dsa-root .dsa-head {
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	min-height: calc(64px + var(--dsa-safe-t));
	padding-top: calc(10px + var(--dsa-safe-t));
	padding-bottom: 10px;
	padding-inline-start: 16px;
	padding-inline-end: 6px;
	background: linear-gradient(160deg, var(--dsa-red) 0%, var(--dsa-red-deep) 100%);
	color: #fff;
	position: relative;
	box-shadow: none;
}
/* אווטאר: עיגול לבן עם האייקון באדום. בלי שינוי DOM */
.dsa-root .dsa-head::before {
	content: "";
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff var(--dsa-ico-red) center / 22px 22px no-repeat;
}
.dsa-root .dsa-titles {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.dsa-root .dsa-title {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dsa-root .dsa-sub {
	display: block;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: rgba(255, 255, 255, .82);   /* 5.6:1 על #a4141c */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dsa-root .dsa-head-actions {
	flex: none;
	display: flex;
	align-items: center;
	gap: 2px;
}
.dsa-root button.dsa-new {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	box-shadow: none;
	transition: background-color 160ms var(--dsa-ease);
}
.dsa-root button.dsa-new:hover,
.dsa-root button.dsa-new:focus { background: rgba(255, 255, 255, .14); color: #fff; }
.dsa-root button.dsa-close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	box-shadow: none;
	transition: background-color 160ms var(--dsa-ease);
}
.dsa-root button.dsa-close:hover,
.dsa-root button.dsa-close:focus { background: transparent; color: #fff; }
.dsa-root button.dsa-new:active,
.dsa-root button.dsa-close:active { background: rgba(255, 255, 255, .24); }
.dsa-root button.dsa-new:focus-visible,
.dsa-root button.dsa-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- יומן השיחה ---- */
.dsa-root .dsa-log {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 20px 16px 12px;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--dsa-surface);
}
/* ילדים של יומן גולל לא מתכווצים (אחרת שורת הכרטיסים נחתכת בגובה הכריכה) */
.dsa-root .dsa-log > * { flex-shrink: 0; }
/* מעט הודעות = מעוגנות למטה, ליד השדה. לא נשאר חור לבן באמצע המסך */
.dsa-root .dsa-log > :first-child { margin-top: auto; }

.dsa-root .dsa-msg {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	white-space: pre-line;
	overflow-wrap: anywhere;
	animation: dsa-msg-in 240ms var(--dsa-ease) backwards;
}
/* היועצת: טקסט נקי ברוחב מלא, בלי בועה. זה מה שמונע את "הבועות הקטנות" */
.dsa-root .dsa-assistant {
	align-self: stretch;
	max-width: 100%;
	color: var(--dsa-ink);
}
/* הקוראת: בועה שחורה משמאל, הפינה החדה בצד של הקוראת */
.dsa-root .dsa-user {
	align-self: flex-end;
	max-width: 84%;
	padding: 10px 16px;
	border-radius: 20px;
	border-end-end-radius: 6px;
	background: var(--dsa-black);
	color: #fff;
}
/* הודעת הפתיחה (המחלקה dsa-welcome מוסיף ה-JS, ראה ספק) */
.dsa-root .dsa-welcome,
.dsa-root .dsa-log > .dsa-assistant:first-child {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--dsa-black);
	text-wrap: pretty;
}
/* שגיאה / אין חיבור (המחלקה dsa-error מוסיף ה-JS) */
.dsa-root .dsa-error {
	padding: 12px 16px;
	border-radius: 14px;
	background: var(--dsa-error-bg);
	color: var(--dsa-error-ink);
	font-size: 15px;
	line-height: 1.5;
}

/* ---- מקלידה ---- */
.dsa-root .dsa-typing {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	width: auto;
	padding: 13px 16px;
	border-radius: 999px;
	background: var(--dsa-tint);
	line-height: 0;
}
.dsa-root .dsa-typing .dsa-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--dsa-muted);
	animation: dsa-dot 1.2s infinite ease-in-out;
}
.dsa-root .dsa-typing .dsa-dot:nth-child(2) { animation-delay: .15s; }
.dsa-root .dsa-typing .dsa-dot:nth-child(3) { animation-delay: .3s; }

/* ---- הצעות פתיחה: שורות מלאות, לא צ'יפים קטנים ---- */
.dsa-root .dsa-suggest {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	animation: dsa-msg-in 240ms var(--dsa-ease) 60ms backwards;
}
.dsa-root button.dsa-chip {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	min-height: 48px;
	padding: 11px 16px;
	border-radius: 14px;
	background: var(--dsa-surface);
	color: var(--dsa-black);
	box-shadow: inset 0 0 0 1px var(--dsa-ring);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-align: start;
	white-space: normal;
	transition: box-shadow 160ms var(--dsa-ease), color 160ms var(--dsa-ease), background-color 160ms var(--dsa-ease), transform 100ms var(--dsa-ease);
}
.dsa-root button.dsa-chip:hover,
.dsa-root button.dsa-chip:focus { background: var(--dsa-surface); color: var(--dsa-black); }
.dsa-root button.dsa-chip:active {
	transform: scale(.985);
	background: var(--dsa-tint);
}
.dsa-root button.dsa-chip:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--dsa-red);
	color: var(--dsa-red);
}
/* "תמליצי לי לפי מה שקניתי": ההצעה האישית, מלאה בשחור (מחלקה dsa-chip-me, אופציונלי) */
.dsa-root button.dsa-chip.dsa-chip-me,
.dsa-root button.dsa-chip.dsa-chip-me:hover,
.dsa-root button.dsa-chip.dsa-chip-me:focus {
	background: var(--dsa-black);
	color: #fff;
	box-shadow: none;
}
.dsa-root button.dsa-chip.dsa-chip-me:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--dsa-red); color: #fff; }

/* ---- כרטיסי ספרים: מדף של כריכות ---- */
.dsa-root .dsa-cards {
	align-self: stretch;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 24px) / 3);   /* שלוש כריכות ברוחב; רביעית ומעלה נגללת */
	gap: 12px;
	margin: 2px 0 4px;
	padding: 2px 0 6px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	animation: dsa-msg-in 280ms var(--dsa-ease) 80ms backwards;
}
.dsa-root .dsa-cards::-webkit-scrollbar { display: none; }
.dsa-root .dsa-card {
	scroll-snap-align: start;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: inherit;
	text-decoration: none;
	border-radius: 10px;
	-webkit-touch-callout: none;
}
.dsa-root .dsa-card-cover,
.dsa-root .dsa-card > img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	border-radius: 8px;
	overflow: hidden;
	background: var(--dsa-tint);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 10px 20px -12px rgba(60, 0, 0, .55);
	transition: transform 240ms var(--dsa-ease), box-shadow 240ms var(--dsa-ease);
}
.dsa-root .dsa-card > img,
.dsa-root .dsa-card-cover img {
	height: auto;
	object-fit: cover;
	margin: 0;
	max-width: 100%;
}
.dsa-root .dsa-card-cover img { display: block; width: 100%; height: 100%; }
.dsa-root .dsa-card-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.dsa-root .dsa-card-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--dsa-black);
	transition: color 160ms var(--dsa-ease);
}
.dsa-root .dsa-card-author {
	display: block;
	font-size: 13px;
	line-height: 1.35;
	color: var(--dsa-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dsa-root .dsa-card-meta {
	display: flex;
	flex-direction: column;   /* מחיר, ומתחתיו תגית החום: אותו קצב בכל הכרטיסים */
	align-items: flex-start;
	gap: 4px;
	margin-top: 4px;
}
.dsa-root .dsa-card:only-child .dsa-card-meta { flex-direction: row; align-items: center; gap: 8px; }
.dsa-root .dsa-card-price {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--dsa-red);
	white-space: nowrap;
}
.dsa-root .dsa-card-heat {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--dsa-tint);
	color: #4a4444;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}
/* חום 4-5 מקבל גוון אדום (data-heat מוסיף ה-JS, אופציונלי) */
.dsa-root .dsa-card-heat[data-heat="4"],
.dsa-root .dsa-card-heat[data-heat="5"] { background: var(--dsa-red-wash); color: var(--dsa-red-press); }
.dsa-root .dsa-card:active .dsa-card-cover,
.dsa-root .dsa-card:active > img { transform: scale(.98); }
.dsa-root .dsa-card:focus-visible { outline: 2px solid var(--dsa-red); outline-offset: 3px; }

/* ספר בודד: כרטיס אופקי ברוחב מלא */
.dsa-root .dsa-card:only-child {
	grid-column: span 3;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding: 10px;
	padding-inline-end: 14px;
	border-radius: 16px;
	box-shadow: inset 0 0 0 1px var(--dsa-ring);
}
.dsa-root .dsa-card:only-child .dsa-card-cover,
.dsa-root .dsa-card:only-child > img { width: 84px; flex: none; }
.dsa-root .dsa-card:only-child .dsa-card-title { font-size: 16px; }

/* ---- שדה הקלדה ---- */
.dsa-root .dsa-form {
	flex: none;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	margin: 0;
	padding: 10px 12px 6px;
	background: var(--dsa-surface);
	box-shadow: 0 -1px 0 rgba(0, 0, 0, .08);
}
.dsa-root .dsa-form:last-child { padding-bottom: calc(10px + var(--dsa-safe-b)); }
.dsa-root textarea.dsa-input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 48px;
	min-height: 48px;
	max-height: 120px;
	margin: 0;
	padding: 12px 18px;
	border: 0;
	border-radius: 24px;
	background: var(--dsa-tint);
	color: var(--dsa-black);
	box-shadow: inset 0 0 0 1px transparent;
	font-family: inherit;
	font-size: 16px;   /* לא פחות: מתחת ל-16 iOS עושה זום */
	font-weight: 400;
	line-height: 1.5;
	resize: none;
	overflow-y: auto;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: box-shadow 160ms var(--dsa-ease), background-color 160ms var(--dsa-ease);
}
.dsa-root textarea.dsa-input::placeholder { color: #6f6868; opacity: 1; }   /* 4.9:1 על השדה */
.dsa-root textarea.dsa-input:focus {
	background: var(--dsa-surface);
	border: 0;
	box-shadow: inset 0 0 0 2px var(--dsa-red);
	outline: none;
}
.dsa-root button.dsa-send {
	flex: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 50%;
	background: var(--dsa-red);
	color: #fff;
	box-shadow: none;
	transition: background-color 160ms var(--dsa-ease), transform 100ms var(--dsa-ease);
}
.dsa-root button.dsa-send:hover,
.dsa-root button.dsa-send:focus { background: var(--dsa-red); color: #fff; }
.dsa-root button.dsa-send svg { width: 20px; height: 20px; transform: scaleX(-1); }   /* RTL: החץ פונה שמאלה */
.dsa-root button.dsa-send:active { transform: scale(.94); background: var(--dsa-red-press); }
.dsa-root button.dsa-send:focus-visible { outline: 2px solid var(--dsa-red); outline-offset: 3px; }
.dsa-root button.dsa-send:disabled,
.dsa-root button.dsa-send:disabled:hover {
	background: #e6dfdf;
	color: #8a8181;
	cursor: default;
	transform: none;
}

/* ---- שורת הגילוי ---- */
.dsa-root .dsa-disclaimer {
	flex: none;
	margin: 0;
	padding: 0 16px calc(10px + var(--dsa-safe-b));
	background: var(--dsa-surface);
	color: var(--dsa-faint);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
	text-wrap: balance;
}
/* מקלדת פתוחה (dsa-kb מוסיף ה-JS): מפנים מקום, הגילוי יורד ונשאר רק השדה */
.dsa-root.dsa-kb .dsa-disclaimer { display: none; }
.dsa-root.dsa-kb .dsa-form { padding-bottom: 8px; }

/* בטלפון נמוך: ארבע הצעות במקום חמש (ללקוחה מחוברת: האישית + שלוש) */
@media (max-height: 700px) {
	.dsa-root button.dsa-chip:nth-child(n+5) { display: none; }
}
/* טלפון צר מאוד: מוותרים על האווטאר כדי שהכותרת, "שיחה חדשה" והסגירה ייכנסו בשורה אחת */
@media (max-width: 359.98px) {
	.dsa-root .dsa-head::before { display: none; }
	.dsa-root .dsa-head { padding-inline-start: 12px; }
	.dsa-root button.dsa-new { padding: 0 10px; font-size: 13px; }
}

/* ---- נעילת גלילה ובועת הסל, רק במצב מסך מלא ---- */
@media (max-width: 639.98px), (max-height: 519.98px) {
	html.dsa-chat-open,
	html.dsa-chat-open body { overflow: hidden !important; }
	html.dsa-chat-open .xoo-wsc-basket { display: none !important; }
}

/* ============ טאבלט ודסקטופ: חלון צף בשמאל למטה ============ */
@media (min-width: 640px) and (min-height: 520px) {
	.dsa-root button.dsa-launcher {
		left: var(--dsa-x, 24px);
		bottom: calc(var(--dsa-y, 24px) + var(--dsa-safe-b));
		height: 56px;
		gap: 12px;
		padding-inline-start: 7px;
		padding-inline-end: 22px;
		font-size: 17px;
	}
	.dsa-root button.dsa-launcher::before {
		width: 42px;
		height: 42px;
		background-size: 28px 28px, auto;
	}

	.dsa-root .dsa-panel {
		left: var(--dsa-x, 24px);
		right: auto;
		top: auto;
		bottom: var(--dsa-y, 24px);
		width: 400px;
		/* נשאר מתחת להדר קבוע (--dsa-top-reserved מ-placement.js) ומעל הכפתורים שבפינה (--dsa-y) */
		height: clamp(420px, calc(100vh - var(--dsa-y, 24px) - var(--dsa-top-reserved, 0px) - 40px), 680px);
		height: clamp(420px, calc(100dvh - var(--dsa-y, 24px) - var(--dsa-top-reserved, 0px) - 40px), 680px);
		z-index: var(--dsa-z, 9990);
		border-radius: 20px;
		box-shadow:
			0 0 0 1px rgba(0, 0, 0, .06),
			0 8px 24px -8px rgba(0, 0, 0, .25),
			0 32px 70px -20px rgba(40, 0, 0, .55);
		transform-origin: 0% 100%;
	}
	.dsa-root.dsa-open .dsa-panel { animation: dsa-pop-in 260ms var(--dsa-ease) backwards; }

	.dsa-root .dsa-head {
		min-height: 68px;
		padding-top: 14px;
		padding-bottom: 14px;
		padding-inline-start: 18px;
		padding-inline-end: 10px;
	}
	.dsa-root .dsa-log { padding: 20px 20px 12px; }
	.dsa-root .dsa-welcome,
	.dsa-root .dsa-log > .dsa-assistant:first-child { font-size: 19px; }
	.dsa-root .dsa-form { padding: 12px 14px 6px; }
	.dsa-root .dsa-form:last-child { padding-bottom: 12px; }
	.dsa-root .dsa-disclaimer { padding: 0 20px 10px; }

	/* במצב צף אין נעילה, ובועת הסל נשארת (היא בימין, החלון בשמאל) */
}
@media (min-width: 1280px) and (min-height: 520px) {
	.dsa-root .dsa-panel { width: 420px; }
}

/* ============ hover: רק למכשירים עם עכבר ============ */
@media (hover: hover) and (pointer: fine) {
	.dsa-root button.dsa-launcher:hover {
		background: var(--dsa-surface);
		color: var(--dsa-black);
		transform: translateY(-2px);
		box-shadow:
			0 0 0 1px rgba(0, 0, 0, .14),
			0 4px 10px rgba(0, 0, 0, .16),
			0 20px 40px -12px rgba(40, 0, 0, .65);
	}
	.dsa-root button.dsa-launcher:hover::before { background-color: var(--dsa-red-press); }
	.dsa-root button.dsa-new:hover { background: rgba(255, 255, 255, .24); color: #fff; }
	.dsa-root button.dsa-close:hover { background: rgba(255, 255, 255, .16); color: #fff; }
	.dsa-root button.dsa-chip:hover {
		background: #fff8f8;
		color: var(--dsa-red);
		box-shadow: inset 0 0 0 1.5px var(--dsa-red);
	}
	.dsa-root button.dsa-chip.dsa-chip-me:hover { background: #262626; color: #fff; box-shadow: none; }
	.dsa-root .dsa-card:hover .dsa-card-cover,
	.dsa-root .dsa-card:hover > img {
		transform: translateY(-3px);
		box-shadow: 0 2px 4px rgba(0, 0, 0, .14), 0 16px 26px -12px rgba(60, 0, 0, .6);
	}
	.dsa-root .dsa-card:hover .dsa-card-title { color: var(--dsa-red); }
	.dsa-root .dsa-card:only-child:hover { box-shadow: inset 0 0 0 1.5px var(--dsa-red); }
	.dsa-root .dsa-card:only-child:hover .dsa-card-cover,
	.dsa-root .dsa-card:only-child:hover > img { transform: none; }
	.dsa-root button.dsa-send:hover { background: var(--dsa-red-press); color: #fff; }
	.dsa-root .dsa-cards { scrollbar-width: thin; scrollbar-color: #d8d0d0 transparent; }
}

/* ============ תנועה ============ */
@keyframes dsa-launch-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dsa-sheet-in  { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes dsa-pop-in    { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes dsa-msg-in    { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dsa-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
	.dsa-root *,
	.dsa-root *::before,
	.dsa-root *::after {
		animation: none !important;
		transition: none !important;
	}
	.dsa-root .dsa-typing .dsa-dot { opacity: .6; }
}

/* ============ ניגודיות גבוהה (Windows) ============ */
@media (forced-colors: active) {
	.dsa-root button.dsa-launcher,
	.dsa-root .dsa-panel,
	.dsa-root button.dsa-chip,
	.dsa-root .dsa-user,
	.dsa-root textarea.dsa-input { border: 1px solid CanvasText; }
	.dsa-root button.dsa-launcher::before { forced-color-adjust: none; }
}


/* ---- אישור התאמה לפי רכישות (איתן: הסכמה מפורשת, לשיחה הנוכחית בלבד) ---- */
.dsa-root .dsa-consent {
	align-self: stretch;
	border: 1px solid var(--dsa-ring);
	border-radius: 14px;
	padding: 14px 16px;
	background: var(--dsa-surface);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.dsa-root .dsa-consent-text { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--dsa-ink); }
.dsa-root .dsa-consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dsa-root button.dsa-consent-yes,
.dsa-root button.dsa-consent-no {
	font: inherit; font-size: 14px; font-weight: 700; line-height: 1;
	border-radius: 999px; padding: 11px 16px; min-height: 40px; cursor: pointer;
	text-transform: none; letter-spacing: 0; box-shadow: none;
}
.dsa-root button.dsa-consent-yes { background: var(--dsa-red); color: #fff; border: 1px solid var(--dsa-red); }
.dsa-root button.dsa-consent-yes:hover { background: var(--dsa-red-press); border-color: var(--dsa-red-press); color: #fff; }
.dsa-root button.dsa-consent-no { background: var(--dsa-surface); color: var(--dsa-ink); border: 1px solid var(--dsa-ring); }
.dsa-root button.dsa-consent-no:hover { background: var(--dsa-tint); color: var(--dsa-ink); }
.dsa-root .dsa-consent-more { font-size: 13px; color: var(--dsa-muted); text-decoration: underline; margin-inline-start: auto; }
.dsa-root .dsa-disclaimer a { color: inherit; text-decoration: underline; }


/* יו ספרות שנוגעת: צ'אט המלצות, תוספות
 * עיצוב: יניב, 13.10.2026. גרסה סופית. נטען אחרי chat.css (או מודבק בסופו).
 * קופי: docs/design/weekly/copy.md (דלית), חלקים 2 ו-3. מוקאפ: mockup.html, צילום: mockup.png
 *
 * חשוב: ב-plugin/usafrut-chat/assets/chat.css כבר מודבקת טיוטה מוקדמת של הקובץ הזה
 * (מדף של 2.25 בשורה, סף 135px, מצב שגיאה בתוך הכפתור). להחליף את כל הבלוק בקובץ הזה.
 *
 * אותן שיטות של chat.css: הכול תחת .dsa-root, כפתורים בספציפיות .dsa-root button.dsa-x
 * (התבנית ו-Kit של אלמנטור דורסים button, :hover ו-:focus), hover רק ב-(hover: hover),
 * אנימציה רק של transform ו-opacity, והכול מתבטל ב-prefers-reduced-motion.
 *
 * =====================================================================
 * א. כפתורי הוספה לסל בכרטיס הספר
 * =====================================================================
 *
 * למה ה-DOM משתנה: היום כל הכרטיס הוא <a class="dsa-card">. כפתור בתוך קישור הוא HTML
 * לא חוקי (קורא מסך ומקלדת נשברים). לכן הכרטיס הופך ל-div, והקישור עובר לשם הספר
 * כ"קישור נמתח": ה-::after שלו מכסה את כל הכרטיס, כך שלחיצה על הכריכה עדיין פותחת
 * את עמוד הספר. הכפתורים יושבים מעליו (z-index 1).
 *
 * המדף נשאר שלושה בשורה, כמו שאושר. כרטיס = 112px ב-390 וב-400.
 * נמדד ב-Assistant 13px: "דיגיטלי" 35.2, "מודפס" 32.9, "59 ₪" 27.1, "128 ₪" 33.3,
 * "מוסיפים..." 50.0, "בסל" 20.8, "לצפייה" 35.2. ריפוד 9+9, אייקון 14, רווחים 5+5: 104 עד 111. נכנס.
 * מתחת ל-106 (טלפון 320, כרטיס 88): בלי אייקון סל. מתחת ל-96: ריפוד 6.
 * המחיר עובר מהמטא אל הכפתורים (copy.md 2.1), אז הכרטיס גדל ב-84px בלבד (88 במגע).
 *
 *   div.dsa-cards.dsa-cards--buy                     כשלפחות לכרטיס אחד בשורה יש כפתורים
 *   +- div.dsa-card.dsa-card--buy
 *       +- span.dsa-card-cover > img[alt=""][loading=lazy]
 *       +- div.dsa-card-info
 *       |   +- a.dsa-card-title.dsa-card-link[href]  שם הספר. הקישור היחיד לעמוד הספר. onclick: setRef([], true)
 *       |   +- span.dsa-card-author
 *       |   +- span.dsa-card-meta > span.dsa-card-heat[data-heat]
 *       |        (span.dsa-card-price רק בכרטיס בלי כפתורים)
 *       +- div.dsa-buy[role=group][aria-label="אפשרויות קנייה: {title}"]
 *       |   +- button.dsa-buy-btn[type=button][data-variation=60607][aria-label=...]   x1 או x2. מודפס ראשון (מימין)
 *       |   |   +- span.dsa-buy-ico[aria-hidden=true]    אייקון ב-mask, מקבל currentColor
 *       |   |   +- span.dsa-buy-label "מודפס"            מ-pa_book_format, מקוצר ("ספר מודפס" -> "מודפס")
 *       |   |   +- span.dsa-buy-price "59 ₪"             מחיר נוכחי (במבצע: מחיר המבצע)
 *       |   |   +- del.dsa-buy-was "69 ₪"                רק במבצע. מוצג רק כשיש מקום (ספר בודד, כפתור אחד)
 *       |   +- p.dsa-buy-msg                             רק בשגיאה או ב"אזל ממש עכשיו". ראה מצבים
 *       +- או, כששני הפורמטים אזלו: p.dsa-buy-out "אזל כרגע. " + a[href] "לעמוד הספר"
 *
 *   aria-label לכל כפתור: copy.md 2.4 ("הוספה לסל: {title}, ספר מודפס, 59 שקלים").
 *   ובתוך .dsa-panel, פעם אחת: div.dsa-sr.dsa-announce[role=status][aria-live=polite]
 *   שם ה-JS כותב את הודעת ההצלחה לקורא מסך ("{title}, ספר מודפס, נוסף לסל").
 *
 * המצבים (טקסטים: copy.md 2.3):
 *
 *   רגיל          button.dsa-buy-btn                 אייקון סל עם פלוס. "מודפס" ... "59 ₪"
 *   מוסיפים       .is-loading + aria-busy=true       label "מוסיפים...", המחיר מוסתר, האייקון טבעת מסתובבת.
 *                 + על div.dsa-buy: .is-busy          הכפתור השני מקבל disabled עד הסוף.
 *                                                    משך מינימלי 400ms גם כשהשרת מהיר (פחות מזה נראה כמו הבהוב).
 *   בסל           הכפתור מוחלף ב-                    <a class="dsa-buy-btn is-added" href="{cart}" aria-label="מעבר לסל הקניות">
 *                                                      span.dsa-buy-ico + span.dsa-buy-label "בסל" + span.dsa-buy-go "לצפייה"
 *                 אותו גודל בדיוק, כך שהמדף לא קופץ. ה-JS מעביר אליו את הפוקוס (a.focus()),
 *                 כי האלמנט שהיה בפוקוס נעלם. הכפתור השני חוזר להיות פעיל.
 *                 (סטייה מ-copy.md, שם ההודעה "נוסף לסל. לצפייה בסל" יושבת מתחת לכפתורים:
 *                 בכרטיס של 112 היא נשברת לשלוש שורות ומזיזה את כל השורה. נשלח לאישור דלית.)
 *   אזל מראש      button[disabled][aria-disabled=true].is-soldout   "מודפס" ... "אזל". בלי אייקון.
 *   אזל עכשיו     כמו אזל מראש + p.dsa-buy-msg "המודפס אזל ממש עכשיו. הדיגיטלי עדיין זמין."
 *   שגיאה         הכפתור חוזר לרגיל + p.dsa-buy-msg.is-error[role=alert]
 *                 "משהו השתבש, והספר לא נוסף לסל. נסי שוב, או הוסיפי אותו " + a "מעמוד הספר" + "."
 *                 הודעה של ווקומרס (כמות מקסימלית וכו'): אותו p, הטקסט שלה בלי HTML.
 *                 ההודעה נעלמת בלחיצה הבאה על כפתור בכרטיס. שגיאה נדירה, ולכן כאן מותר לה להזיז את השורה.
 *   דורש בחירה    a.dsa-buy-btn.dsa-buy-pick[href=עמוד המוצר]  "לבחירת מידה" / "לבחירה בעמוד המוצר".
 *                 בלי אייקון סל ובלי מחיר. ("לבחירת הספרים במארז" ארוך מדי ל-112: מוצע "לבחירת ספרים".)
 *
 * הערות למפתח (JS):
 *   1. הוספה: POST ל-/?wc-ajax=add_to_cart (product_id = data-variation, quantity 1), או Store API
 *      /wp-json/wc/store/v1/cart/add-item עם nonce. אחרי הצלחה:
 *      jQuery(document.body).trigger('wc_fragment_refresh'), כדי שמונה הסל ועגלת הצד יתעדכנו.
 *   2. אם עגלת הצד (xoo-wsc) מוגדרת להיפתח אחרי הוספה: לא לפתוח אותה מתוך הצ'אט.
 *   3. המצב "בסל" נשמר ב-state (sessionStorage) לפי variation, כדי שאחרי רענון או חזרה מהסל
 *      הכרטיס עדיין יראה "בסל" ולא יזמין הוספה כפולה.
 *   4. השרת מחזיר לכל ספר: formats: [{ variation, label, price, regular_price, in_stock }].
 *      מוצר simple: איבר אחד, label "הוספה". מוצר שדורש בחירה: pick: "לבחירת מידה".
 *
 * =====================================================================
 * ב. בועה יזומה בעמוד מוצר
 * =====================================================================
 *
 *   div.dsa-root
 *   +- section.dsa-panel ...
 *   +- button.dsa-launcher
 *   +- aside.dsa-nudge[aria-label="הצעה מהצ'אט"]        אחרי הכפתור הצף ב-DOM: בסדר הטאב היא אחריו (copy.md 3.4)
 *   |   +- button.dsa-nudge-open[type=button][aria-controls=dsa-panel]
 *   |   |   +- span.dsa-nudge-name "החברה שקראה הכל"   מי מדברת. מחבר לכותרת החלון שייפתח
 *   |   |   +- span.dsa-nudge-text "מתלבטת? אספר לך עליו, בלי ספוילרים."
 *   |   +- button.dsa-nudge-close[type=button][aria-label="סגירת ההצעה"] > svg (I_CLOSE)
 *   +- div.dsa-sr.dsa-live[aria-live=polite]               ה-JS כותב בו את טקסט הבועה פעם אחת כשהיא מופיעה
 *
 *   מצבים (על aside.dsa-nudge):
 *     בלי מחלקה   מוסתרת (visibility hidden: לא מקבלת פוקוס ולא לחיצה)
 *     .is-in       גלויה, עם כניסה
 *     .is-yield    מוסתרת זמנית בלי לאבד את המצב: כשהיא חופפת לטופס "הוספה לסל" של העמוד
 *   ועל .dsa-root: .dsa-compact  הכפתור הצף מתכווץ לעיגול באותו זמן (במובייל)
 *
 * הערות למפתח (JS):
 *   1. רק בעמוד מוצר (body.single-product), ורק אם הצ'אט לא נפתח בסשן הזה.
 *   2. מופיעה אחרי 20 שניות בעמוד (copy.md 3.1), לא בזמן הקלדה ולא כשפוקוס בתוך טופס.
 *   3. פעם אחת בביקור. X או Escape = לא להציג שוב 7 ימים (localStorage, עטוף ב-try/catch, ועובר
 *      קודם מול איתן לפי הלקח ב-brief). בלי תגובה 14 שניות: יורדת לבד ולא חוזרת בביקור.
 *   4. לחיצה על הבועה: setOpen(true) ושליחת ההודעה מ-copy.md 3.3 עם product_id בהקשר. בלי צ'יפים.
 *   5. לא לכסות את כפתור הסל של העמוד. נמדד בעמוד חי (ילד טוב, ילד רע 1):
 *        מובייל 390: form.cart ב-x 61 עד 329, הכפתור הצף ב-x 16 עד 199. חפיפה ודאית.
 *        דסקטופ 1280: קופסת הסל ב-x 191 עד 578, y 401 עד 662 בטעינה. הבועה (x 24 עד 316) חופפת גם שם.
 *      לכן בכל המידות: IntersectionObserver על form.cart (threshold [0, .25, .5, .75, 1]), ובכל קריאה
 *      ובכל resize בודקים חפיפה בין getBoundingClientRect של הבועה ושל form.cart, עם 12px מרווח.
 *      יש חפיפה: .is-yield על הבועה. במובייל (FULL) גם .dsa-compact על .dsa-root, כי גם הכפתור הצף
 *      עצמו עולה על כפתור הסל. אם רגע ההופעה הגיע בזמן חפיפה: ממתינים ומציגים כשהיא נגמרת.
 *      בפועל בדסקטופ הבועה מופיעה רק אחרי גלילה אל התקציר, וזה הרגע הנכון: היא קוראת ומתלבטת.
 *   6. הזנב מכוון לעיגול האדום של הכפתור הצף:
 *      nudge.style.setProperty('--dsa-nudge-tail',
 *        (launcher.getBoundingClientRect().right - (FULL.matches ? 26 : 28) - nudge.getBoundingClientRect().left) + 'px');
 */


/* =====================================================================
   טוקנים נוספים
   ===================================================================== */
.dsa-root {
	/* שקית עם פלוס */
	--dsa-i-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8.5h13l-1 11.5h-11z'/%3E%3Cpath d='M9 8.5V7a3 3 0 0 1 6 0v1.5'/%3E%3Cpath d='M12 11.6v5M9.5 14.1h5'/%3E%3C/svg%3E");
	--dsa-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}


/* =====================================================================
   א. הכרטיס כ-div עם קישור נמתח
   ===================================================================== */
.dsa-root div.dsa-card { position: relative; }

.dsa-root a.dsa-card-link {
	color: var(--dsa-black);
	text-decoration: none;
	box-shadow: none;
	outline: none;
}
.dsa-root a.dsa-card-link:hover,
.dsa-root a.dsa-card-link:focus { color: var(--dsa-black); text-decoration: none; }
/* כל שטח הכרטיס לוחץ לעמוד הספר */
.dsa-root a.dsa-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 10px;
}
.dsa-root .dsa-card:only-child a.dsa-card-link::after { border-radius: 16px; }
.dsa-root a.dsa-card-link:focus-visible::after { outline: 2px solid var(--dsa-red); outline-offset: 3px; }
.dsa-root .dsa-card:has(.dsa-buy:active) .dsa-card-cover { transform: none; }   /* לחיצה על כפתור לא מכווצת את הכריכה */
.dsa-root .dsa-card--buy .dsa-card-meta { margin-top: 2px; }

/* ---- קבוצת הכפתורים ---- */
.dsa-root .dsa-buy {
	position: relative;
	z-index: 1;            /* מעל הקישור הנמתח */
	container: ucbuy / inline-size;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 6px;
	margin-top: auto;      /* הכפתורים מתיישרים לתחתית בכל הכרטיסים בשורה */
	padding-top: 2px;
}

/* כפתור, וגם הקישורים ("בסל", "לבחירת מידה") שבאים במקומו. אותו גודל בדיוק */
.dsa-root button.dsa-buy-btn,
.dsa-root a.dsa-buy-btn {
	display: flex;
	align-items: center;
	gap: 5px;
	width: 100%;
	min-width: 0;
	height: 36px;
	margin: 0;
	padding: 0 9px;
	border: 0;
	border-radius: 999px;
	background: var(--dsa-surface);
	color: var(--dsa-black);
	box-shadow: inset 0 0 0 1px var(--dsa-ring);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-align: start;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	white-space: nowrap;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 180ms var(--dsa-ease), color 180ms var(--dsa-ease), box-shadow 180ms var(--dsa-ease), transform 100ms var(--dsa-ease);
}
/* מגע: 40px גובה. 36 רק לעכבר */
@media (pointer: coarse) {
	.dsa-root button.dsa-buy-btn,
	.dsa-root a.dsa-buy-btn { height: 40px; }
	.dsa-root .dsa-buy { gap: 8px; }
}
.dsa-root button.dsa-buy-btn:hover,
.dsa-root button.dsa-buy-btn:focus,
.dsa-root a.dsa-buy-btn:visited { background: var(--dsa-surface); color: var(--dsa-black); }

.dsa-root .dsa-buy-ico {
	flex: none;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--dsa-i-bag) center / contain no-repeat;
	mask: var(--dsa-i-bag) center / contain no-repeat;
}
.dsa-root .dsa-buy-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dsa-root .dsa-buy-price,
.dsa-root .dsa-buy-go {
	flex: none;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.dsa-root .dsa-buy-price { color: var(--dsa-red); }
.dsa-root .dsa-buy-was {
	display: none;
	flex: none;
	color: var(--dsa-faint);
	font-size: 12px;
	font-weight: 500;
	text-decoration: line-through;
}

.dsa-root button.dsa-buy-btn:active { transform: scale(.97); background: var(--dsa-tint); }
.dsa-root button.dsa-buy-btn:focus-visible,
.dsa-root a.dsa-buy-btn:focus-visible { outline: 2px solid var(--dsa-red); outline-offset: 2px; }

/* ---- מוסיפים ---- */
.dsa-root button.dsa-buy-btn.is-loading,
.dsa-root button.dsa-buy-btn.is-loading:hover {
	cursor: progress;
	background: var(--dsa-tint);
	color: var(--dsa-black);
	box-shadow: inset 0 0 0 1px transparent;
	transform: none;
}
.dsa-root .dsa-buy-btn.is-loading .dsa-buy-price,
.dsa-root .dsa-buy-btn.is-loading .dsa-buy-was { display: none; }
.dsa-root .dsa-buy-btn.is-loading .dsa-buy-ico {
	-webkit-mask: none;
	mask: none;
	background: none;
	border: 2px solid currentColor;
	border-inline-end-color: transparent;
	border-radius: 50%;
	animation: dsa-spin 700ms linear infinite;
}
/* הכפתור השני בזמן הוספה */
.dsa-root .dsa-buy.is-busy button.dsa-buy-btn:disabled:not(.is-loading):not(.is-soldout) { opacity: .45; cursor: default; }

/* ---- בסל: קישור שחור לסל ---- */
.dsa-root a.dsa-buy-btn.is-added,
.dsa-root a.dsa-buy-btn.is-added:hover,
.dsa-root a.dsa-buy-btn.is-added:focus,
.dsa-root a.dsa-buy-btn.is-added:visited {
	background: var(--dsa-black);
	color: #fff;
	box-shadow: none;
}
.dsa-root .dsa-buy-btn.is-added .dsa-buy-ico {
	-webkit-mask-image: var(--dsa-i-check);
	mask-image: var(--dsa-i-check);
	animation: dsa-check-in 260ms var(--dsa-ease) backwards;
}
.dsa-root .dsa-buy-btn.is-added .dsa-buy-go {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.dsa-root a.dsa-buy-btn.is-added { animation: dsa-added 260ms var(--dsa-ease) backwards; }

/* ---- אזל ---- */
.dsa-root button.dsa-buy-btn.is-soldout,
.dsa-root button.dsa-buy-btn.is-soldout:hover,
.dsa-root button.dsa-buy-btn.is-soldout:focus {
	background: var(--dsa-tint);
	color: var(--dsa-faint);              /* 5.3:1 על #f4f2f2 */
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
	opacity: 1;
}
.dsa-root .dsa-buy-btn.is-soldout .dsa-buy-ico,
.dsa-root .dsa-buy-btn.is-soldout .dsa-buy-was { display: none; }
.dsa-root .dsa-buy-btn.is-soldout .dsa-buy-price { color: inherit; font-weight: 600; }

/* ---- דורש בחירה (מידה, מארז): קישור לעמוד המוצר ---- */
.dsa-root a.dsa-buy-btn.dsa-buy-pick { justify-content: center; }
.dsa-root a.dsa-buy-btn.dsa-buy-pick .dsa-buy-label { flex: 0 1 auto; }

/* ---- הודעה מתחת לכפתורים: שגיאה, או "אזל ממש עכשיו" ---- */
.dsa-root .dsa-buy-msg,
.dsa-root .dsa-buy-out {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--dsa-muted);
	white-space: normal;
	overflow-wrap: anywhere;
	animation: dsa-msg-in 200ms var(--dsa-ease) backwards;
}
.dsa-root .dsa-buy-msg.is-error { color: var(--dsa-error-ink); }   /* 9.9:1 על לבן */
.dsa-root .dsa-buy-msg a,
.dsa-root .dsa-buy-out a {
	position: relative;
	z-index: 1;
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.dsa-root .dsa-buy-out { margin-top: auto; position: relative; z-index: 1; }

/* ---- כרטיס צר (טלפון 320, כרטיס 88) ---- */
@container ucbuy (max-width: 105px) {
	.dsa-root .dsa-buy-ico { display: none; }
	/* בהוספה ובהצלחה הסימן הוא המידע עצמו: הטבעת והווי נשארים */
	.dsa-root .dsa-buy-btn.is-loading .dsa-buy-ico,
	.dsa-root .dsa-buy-btn.is-added .dsa-buy-ico { display: block; width: 12px; height: 12px; }
}
@container ucbuy (max-width: 95px) {
	.dsa-root button.dsa-buy-btn,
	.dsa-root a.dsa-buy-btn { padding: 0 6px; gap: 4px; }
}

/* ---- ספר בודד: כרטיס אופקי, הכפתורים זה לצד זה מתחת לטקסט ---- */
.dsa-root .dsa-card--buy:only-child {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	grid-template-areas: "cover info" "cover buy";
	grid-template-rows: auto 1fr;
	column-gap: 14px;
	row-gap: 10px;
	align-items: start;
}
.dsa-root .dsa-card--buy:only-child .dsa-card-cover { grid-area: cover; width: 84px; }
.dsa-root .dsa-card--buy:only-child .dsa-card-info { grid-area: info; }
.dsa-root .dsa-card--buy:only-child .dsa-buy,
.dsa-root .dsa-card--buy:only-child .dsa-buy-out {
	grid-area: buy;
	align-self: end;
	margin-top: 0;
}
.dsa-root .dsa-card--buy:only-child .dsa-buy { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.dsa-root .dsa-card--buy:only-child .dsa-buy-msg { grid-column: 1 / -1; }
/* כפתור יחיד ברוחב מלא: יש מקום למחיר המחוק של מבצע */
.dsa-root .dsa-card--buy:only-child .dsa-buy-btn:only-of-type .dsa-buy-was { display: inline; }
@container ucbuy (max-width: 215px) {
	.dsa-root .dsa-card:only-child .dsa-buy-ico { display: none; }
	.dsa-root .dsa-card:only-child .dsa-buy-btn.is-loading .dsa-buy-ico,
	.dsa-root .dsa-card:only-child .dsa-buy-btn.is-added .dsa-buy-ico { display: block; width: 12px; height: 12px; }
}


/* =====================================================================
   ב. הבועה היזומה
   ===================================================================== */
.dsa-root .dsa-nudge {
	--dsa-nudge-tail: 157px;   /* JS מעדכן, הערה 6. ברירת מחדל למובייל 390 */
	position: fixed;
	z-index: calc(var(--dsa-z, 9990) - 1);   /* מתחת לכפתור הצף, מעל תוכן העמוד */
	left: var(--dsa-x, 16px);
	right: auto;
	bottom: calc(var(--dsa-y, 20px) + 52px + 12px + var(--dsa-safe-b));
	width: min(264px, calc(100vw - 32px));
	margin: 0;
	display: flex;
	align-items: flex-start;
	border-radius: 18px;
	background: var(--dsa-surface);
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, .10),
		0 2px 6px rgba(0, 0, 0, .10),
		0 18px 40px -14px rgba(40, 0, 0, .55);
	transform-origin: var(--dsa-nudge-tail) calc(100% + 8px);
	/* מצב יציאה (ברירת המחדל): מהיר, מאיץ החוצה */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(6px) scale(.97);
	transition:
		opacity 160ms cubic-bezier(.4, 0, 1, 1),
		transform 160ms cubic-bezier(.4, 0, 1, 1),
		visibility 0s linear 160ms;
}
/* הזנב: ריבוע מסובב, מצביע על העיגול האדום של הכפתור הצף */
.dsa-root .dsa-nudge::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: calc(var(--dsa-nudge-tail) - 7px);
	width: 14px;
	height: 14px;
	border-radius: 0 0 4px 0;
	background: var(--dsa-surface);
	box-shadow: 1px 1px 0 0 rgba(0, 0, 0, .10);
	transform: rotate(45deg);
}
/* כניסה: 220ms opacity, 360ms transform, ease-out חזק (--dsa-ease). יוצאת מהזנב */
.dsa-root .dsa-nudge.is-in {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition:
		opacity 220ms var(--dsa-ease),
		transform 360ms var(--dsa-ease),
		visibility 0s;
}
.dsa-root .dsa-nudge.is-in.is-yield {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(6px) scale(.97);
	transition:
		opacity 160ms cubic-bezier(.4, 0, 1, 1),
		transform 160ms cubic-bezier(.4, 0, 1, 1),
		visibility 0s linear 160ms;
}
.dsa-root.dsa-open .dsa-nudge { display: none; }

.dsa-root button.dsa-nudge-open,
.dsa-root button.dsa-nudge-close {
	margin: 0;
	min-height: 0;
	min-width: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-family: inherit;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-appearance: none;
	appearance: none;
}
.dsa-root button.dsa-nudge-open {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 16px 14px;
	padding-inline-end: 4px;
	border-radius: 18px;
	color: var(--dsa-ink);
	text-align: start;
	white-space: normal;
}
.dsa-root button.dsa-nudge-open:hover,
.dsa-root button.dsa-nudge-open:focus { background: transparent; color: var(--dsa-ink); }
.dsa-root .dsa-nudge-name {
	display: block;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--dsa-red);      /* 7.8:1 על לבן */
}
.dsa-root .dsa-nudge-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--dsa-black);
	text-wrap: balance;
}
.dsa-root button.dsa-nudge-open:focus-visible { outline: 2px solid var(--dsa-red); outline-offset: -2px; }

/* X: 32px נראה, 44px אזור לחיצה (ה-::before מרחיב) */
.dsa-root button.dsa-nudge-close {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: 6px;
	margin-inline-start: 0;
	padding: 0;
	border-radius: 50%;
	color: var(--dsa-muted);
	transition: background-color 160ms var(--dsa-ease), color 160ms var(--dsa-ease);
}
.dsa-root button.dsa-nudge-close::before { content: ""; position: absolute; inset: -6px; }
.dsa-root button.dsa-nudge-close:hover,
.dsa-root button.dsa-nudge-close:focus { background: transparent; color: var(--dsa-muted); }
.dsa-root button.dsa-nudge-close:active { background: var(--dsa-tint); }
.dsa-root button.dsa-nudge-close:focus-visible { outline: 2px solid var(--dsa-red); outline-offset: 0; }
.dsa-root button.dsa-nudge-close svg { width: 18px; height: 18px; }

/* הכפתור הצף מתכווץ לעיגול כשטופס הסל של העמוד במסך (.dsa-compact על .dsa-root) */
.dsa-root.dsa-compact button.dsa-launcher {
	padding-inline-end: 6px;
	gap: 0;
}
.dsa-root.dsa-compact .dsa-launcher-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* טאבלט ודסקטופ: הכפתור הצף 56px ב-24 מהקצה */
@media (min-width: 640px) and (min-height: 520px) {
	.dsa-root .dsa-nudge {
		--dsa-nudge-tail: 190px;
		left: var(--dsa-x, 24px);
		bottom: calc(var(--dsa-y, 24px) + 56px + 14px + var(--dsa-safe-b));
		width: 280px;
	}
	.dsa-root button.dsa-nudge-open { padding: 14px 18px 16px; padding-inline-end: 4px; }
	.dsa-root.dsa-compact button.dsa-launcher { padding-inline-end: 7px; }
}

@media (hover: hover) and (pointer: fine) {
	.dsa-root button.dsa-buy-btn:not(:disabled):not(.is-loading):hover,
	.dsa-root a.dsa-buy-btn.dsa-buy-pick:hover {
		background: #fff8f8;
		color: var(--dsa-red);
		box-shadow: inset 0 0 0 1.5px var(--dsa-red);
	}
	.dsa-root a.dsa-buy-btn.is-added:hover { background: #262626; color: #fff; }
	.dsa-root .dsa-card--buy:has(.dsa-buy:hover) .dsa-card-cover { transform: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 10px 20px -12px rgba(60, 0, 0, .55); }
	.dsa-root .dsa-card--buy:has(.dsa-buy:hover) .dsa-card-title { color: var(--dsa-black); }
	.dsa-root .dsa-card--buy:only-child:has(.dsa-buy:hover) { box-shadow: inset 0 0 0 1px var(--dsa-ring); }
	.dsa-root button.dsa-nudge-open:hover .dsa-nudge-text { color: var(--dsa-red); }
	.dsa-root button.dsa-nudge-close:hover { background: var(--dsa-tint); color: var(--dsa-ink); }
}

@keyframes dsa-spin     { to { transform: rotate(360deg); } }
@keyframes dsa-check-in { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dsa-added    { from { transform: scale(.96); } to { transform: none; } }

/* chat.css מבטל כל אנימציה ומעבר ב-reduced-motion. הבועה עדיין דוהה (בלי תזוזה), כדי שלא
 * תקפוץ לתוך המסך, והטבעת של "מוסיפים" הופכת לסימן סטטי מנוקד, כי סיבוב הוא תנועה. */
@media (prefers-reduced-motion: reduce) {
	.dsa-root .dsa-nudge,
	.dsa-root .dsa-nudge.is-in.is-yield {
		transform: none !important;
		transition: opacity 150ms linear, visibility 0s linear 150ms !important;
	}
	.dsa-root .dsa-nudge.is-in { transform: none !important; transition: opacity 150ms linear, visibility 0s !important; }
	.dsa-root .dsa-buy-btn.is-loading .dsa-buy-ico { border-style: dotted; border-inline-end-color: currentColor; }
}

@media (forced-colors: active) {
	.dsa-root button.dsa-buy-btn,
	.dsa-root a.dsa-buy-btn,
	.dsa-root .dsa-nudge { border: 1px solid CanvasText; }
	.dsa-root .dsa-nudge::after { display: none; }
}


/* =====================================================================
   מיקום לפי הגדרה (placement.js כותב --dsa-x/--dsa-y ו-data-side על .dsa-root)
   ===================================================================== */
.dsa-root[data-side="right"] button.dsa-launcher,
.dsa-root[data-side="right"] .dsa-nudge {
	left: auto;
	right: var(--dsa-x, 16px);
}
.dsa-root[data-side="right"] button.dsa-launcher { flex-direction: row-reverse; }
.dsa-root[data-side="right"] .dsa-nudge { flex-direction: row-reverse; }
.dsa-root[data-vert="top"] button.dsa-launcher { bottom: auto; top: calc(var(--dsa-y, 16px) + var(--dsa-safe-t)); }
.dsa-root[data-vert="top"] .dsa-nudge { bottom: auto; top: calc(var(--dsa-y, 16px) + 52px + 12px + var(--dsa-safe-t)); }
@media (min-width: 640px) and (min-height: 520px) {
	.dsa-root[data-side="right"] .dsa-panel {
		left: auto;
		right: var(--dsa-x, 24px);
		transform-origin: 100% 100%;
	}
	.dsa-root[data-vert="top"] .dsa-panel {
		bottom: auto;
		top: calc(var(--dsa-y, 24px) + 56px + 14px);
		transform-origin: 0% 0%;
	}
	.dsa-root[data-vert="top"] .dsa-nudge { top: calc(var(--dsa-y, 24px) + 56px + 14px); }
}
/* לשונית בצד: במקום כפתור צף */
.dsa-root.dsa-mode-tab button.dsa-launcher {
	left: auto;
	right: 0;
	bottom: auto;
	top: var(--dsa-tab-top, 60%);
	transform: rotate(-90deg) translate(50%, 0);
	transform-origin: 100% 100%;
	border-radius: 14px 14px 0 0;
	box-shadow: 0 -4px 20px -6px rgba(0, 0, 0, .3);
}
.dsa-root.dsa-mode-tab[data-side="left"] button.dsa-launcher {
	right: auto;
	left: 0;
	transform: rotate(90deg) translate(-50%, 0);
	transform-origin: 0 100%;
}
.dsa-root.dsa-mode-tab .dsa-nudge { display: none; }
.dsa-root.dsa-mode-manual button.dsa-launcher,
.dsa-root.dsa-mode-manual .dsa-nudge { display: none; }

/* =====================================================================
   מראה לפי הגדרות (look.*): סגנון הכפתור, אייקון וגופן. chat.js כותב data-style / data-icon / data-font על .dsa-root
   ===================================================================== */
.dsa-root[data-style="circle"] button.dsa-launcher {
	width: 52px;
	padding-inline: 6px;
	justify-content: center;
}
.dsa-root[data-style="circle"] .dsa-launcher-text { display: none; }
.dsa-root[data-icon="bag"] {
	--dsa-ico-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8.5h13l-1 11.5h-11z'/%3E%3Cpath d='M9 8.5V7a3 3 0 0 1 6 0v1.5'/%3E%3C/svg%3E");
}
.dsa-root[data-icon="sparkle"] {
	--dsa-ico-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3Cpath d='M19 16l.8 2.2L22 19l-2.2.8L19 22l-.8-2.2L16 19l2.2-.8z'/%3E%3C/svg%3E");
}
.dsa-root[data-font="assistant"] { --dsa-font: "Assistant", Arial, sans-serif; }
.dsa-root[data-font="heebo"] { --dsa-font: "Heebo", Arial, sans-serif; }
.dsa-root[data-font="rubik"] { --dsa-font: "Rubik", Arial, sans-serif; }
.dsa-root[data-font="inherit"] { --dsa-font: inherit; }
.dsa-root[data-font] button.dsa-launcher,
.dsa-root[data-font] .dsa-panel,
.dsa-root[data-font] .dsa-nudge { font-family: var(--dsa-font, inherit); }
/* "לדבר עם הסוכן" במיקום ידני: השורטקוד, הווידג׳ט לאלמנטור, או כל אלמנט עם data-dsa-open */
.dsa-open-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	border: 0;
	border-radius: var(--dsa-radius, 20px);
	background: var(--dsa-accent, #1f1f1f);
	color: var(--dsa-accent-text, #fff);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.dsa-open-btn:hover { filter: brightness(.92); }
/* בוחר הפנייה במצב "לשאול את הגולש" */
.dsa-root .dsa-form-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; font-size: 14px; color: var(--dsa-muted); }
.dsa-root .dsa-form-pick button {
	border: 1px solid var(--dsa-ring);
	background: var(--dsa-surface);
	color: var(--dsa-ink);
	border-radius: 999px;
	padding: 6px 14px;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}
.dsa-root .dsa-form-pick button[aria-pressed="true"] { background: var(--dsa-red); color: var(--dsa-accent-text, #fff); border-color: var(--dsa-red); }

/* ---- לדבר עם בן אדם: כפתור מעל שדה ההקלדה ופאנל ערוצי הקשר של החנות ---- */
.dsa-root .dsa-human-bar {
	flex: none;
	display: flex;
	justify-content: flex-start;
	padding: 6px 12px 0;
	background: var(--dsa-surface);
}
.dsa-root .dsa-human-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	margin: 0;
	padding: 4px 12px;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 999px;
	background: var(--dsa-surface);
	color: var(--dsa-muted);
	font: inherit;
	font-size: 13px;
	line-height: 1.2;
	cursor: pointer;
}
.dsa-root .dsa-human-btn svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.dsa-root .dsa-human-btn:hover,
.dsa-root .dsa-human-btn[aria-expanded="true"] { border-color: var(--dsa-red); color: var(--dsa-red); }
.dsa-root .dsa-human-btn:focus-visible { outline: 2px solid var(--dsa-red); outline-offset: 2px; }
.dsa-root .dsa-human {
	flex: none;
	margin: 0 12px;
	padding: 10px 12px 12px;
	border-radius: 12px;
	background: var(--dsa-tint);
}
.dsa-root .dsa-human[hidden] { display: none; }
.dsa-root .dsa-human-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dsa-root .dsa-human-intro { margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: #2b2626; }
.dsa-root .dsa-human-close {
	flex: none;
	width: 28px;
	height: 28px;
	margin: -4px -6px 0 0;
	padding: 4px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--dsa-muted);
	cursor: pointer;
}
.dsa-root .dsa-human-close svg { width: 18px; height: 18px; fill: currentColor; }
.dsa-root .dsa-human-links { display: flex; flex-wrap: wrap; gap: 8px; }
.dsa-root a.dsa-human-link {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--dsa-red);
	color: var(--dsa-accent-text, #fff);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.dsa-root a.dsa-human-link:hover { background: var(--dsa-red-press); color: var(--dsa-accent-text, #fff); }
.dsa-root a.dsa-human-link:focus-visible { outline: 2px solid var(--dsa-red); outline-offset: 2px; }
.dsa-root.dsa-kb .dsa-human-bar { display: none; }

/* פינה ימנית: הכפתור הפוך (האייקון בצד שמאל), ולכן גם הריפוד מתהפך. בלי זה הטקסט נצמד לימין והאייקון מרוחק משמאל */
.dsa-root[data-side="right"] button.dsa-launcher {
	padding-inline-start: 18px;
	padding-inline-end: 6px;
}
@media (min-width: 640px) and (min-height: 520px) {
	.dsa-root[data-side="right"] button.dsa-launcher {
		padding-inline-start: 22px;
		padding-inline-end: 7px;
	}
}
.dsa-root[data-side="right"].dsa-compact button.dsa-launcher { padding-inline-start: 7px; }
.dsa-root[data-side="right"][data-style="circle"] button.dsa-launcher { padding-inline: 6px; }