/**
 * Smart AI Chatbot — front-end widget.
 *
 * Every selector is prefixed and every value is set explicitly so themes with
 * aggressive global styles cannot leak in.
 */

.sac-root,
.sac-inline {
	--sac-accent: #2f6fed;
	--sac-button: var(--sac-accent);
	--sac-launcher-radius: 999px;
	--sac-surface: #ffffff;
	--sac-text: #1c1e21;
	--sac-muted: #6b7280;
	--sac-border: #e4e7ec;
	--sac-bubble-bot: #f3f4f6;
	--sac-radius: 16px;
	--sac-shadow: 0 12px 40px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.08);

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--sac-text);
}

@media (prefers-color-scheme: dark) {
	.sac-root,
	.sac-inline {
		--sac-surface: #1b1d21;
		--sac-text: #f3f4f6;
		--sac-muted: #9ca3af;
		--sac-border: #33363d;
		--sac-bubble-bot: #26292f;
	}
}

/* ---------------------------------------------------------------- launcher */

/* Shape is applied to the root so the launcher and its logo stay in sync. */
.sac-shape-circle   { --sac-launcher-radius: 999px; }
.sac-shape-pill     { --sac-launcher-radius: 999px; }
.sac-shape-rounded  { --sac-launcher-radius: 14px; }
.sac-shape-squircle { --sac-launcher-radius: 26px; }
.sac-shape-square   { --sac-launcher-radius: 0; }

.sac-launcher {
	position: fixed;
	bottom: 20px;
	z-index: 99998;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px 12px 16px;
	border: 0;
	border-radius: var(--sac-launcher-radius);
	background: var(--sac-button);
	color: #fff;
	font: inherit;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--sac-shadow);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Icon-only: a fixed square so every shape reads as intended. */
.sac-launcher-bare {
	width: 60px;
	height: 60px;
	padding: 0;
	justify-content: center;
	gap: 0;
}

.sac-pos-right .sac-launcher { right: 20px; }
.sac-pos-left .sac-launcher { left: 20px; }

.sac-launcher:hover { transform: translateY(-2px); }
.sac-launcher:focus-visible { outline: 3px solid var(--sac-button); outline-offset: 3px; }
.sac-root[data-state="open"] .sac-launcher { display: none; }

.sac-launcher-mark {
	display: block;
	flex: none;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.sac-launcher-bare .sac-launcher-mark { width: 28px; height: 28px; }
.sac-launcher-mark svg { width: 100%; height: 100%; display: block; }

/* A logo image gets a little more room and follows the chosen shape. */
img.sac-launcher-mark {
	width: 30px;
	height: 30px;
	border-radius: calc(var(--sac-launcher-radius) / 2);
}

.sac-launcher-bare img.sac-launcher-mark { width: 36px; height: 36px; }
.sac-launcher-label { white-space: nowrap; }

/* ------------------------------------------------------------------- panel */

.sac-panel {
	position: fixed;
	bottom: 20px;
	z-index: 99999;
	display: none;
	flex-direction: column;
	width: 380px;
	max-width: calc(100vw - 32px);
	height: 600px;
	max-height: calc(100vh - 40px);
	overflow: hidden;
	background: var(--sac-surface);
	border: 1px solid var(--sac-border);
	border-radius: var(--sac-radius);
	box-shadow: var(--sac-shadow);
}

.sac-pos-right .sac-panel { right: 20px; }
.sac-pos-left .sac-panel { left: 20px; }
.sac-root[data-state="open"] .sac-panel { display: flex; }

.sac-inline .sac-panel {
	position: static;
	display: flex;
	width: 100%;
	max-width: 100%;
	height: 100%;
	margin: 0;
}

@media (max-width: 480px) {
	.sac-panel {
		right: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		border: 0;
		border-radius: 0;
	}
}

/* ------------------------------------------------------------------ header */

.sac-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: var(--sac-accent);
	color: #fff;
}

.sac-header-title { flex: 1; font-weight: 600; min-width: 0; }
.sac-header-sub { display: block; font-size: 12px; font-weight: 400; opacity: 0.85; }

.sac-header-logo {
	display: block;
	flex: none;
	width: 32px;
	height: 32px;
	object-fit: contain;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.16);
	padding: 4px;
}

.sac-header-logo svg { width: 100%; height: 100%; display: block; }

.sac-icon-btn {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	cursor: pointer;
}

.sac-icon-btn:hover { background: rgba(255, 255, 255, 0.28); }
.sac-icon-btn svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- messages */

.sac-log {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sac-msg { display: flex; }
.sac-msg-user { justify-content: flex-end; }

.sac-bubble {
	max-width: 85%;
	padding: 10px 14px;
	border-radius: 14px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.sac-msg-bot .sac-bubble {
	background: var(--sac-bubble-bot);
	border-bottom-left-radius: 4px;
}

.sac-msg-user .sac-bubble {
	background: var(--sac-accent);
	color: #fff;
	border-bottom-right-radius: 4px;
}

.sac-bubble a { color: inherit; text-decoration: underline; }
.sac-msg-bot .sac-bubble a { color: var(--sac-accent); }
.sac-bubble p { margin: 0 0 8px; }
.sac-bubble p:last-child { margin-bottom: 0; }
.sac-bubble ul { margin: 0 0 8px; padding-left: 20px; }
.sac-bubble li { margin-bottom: 4px; }
.sac-bubble strong { font-weight: 600; }

.sac-notice {
	align-self: center;
	max-width: 90%;
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--sac-bubble-bot);
	color: var(--sac-muted);
	font-size: 13px;
	text-align: center;
}

.sac-notice-error { background: #fee4e2; color: #912018; }

/* Typing indicator */
.sac-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }

.sac-typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sac-muted);
	animation: sac-bounce 1.2s infinite ease-in-out;
}

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

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

@media (prefers-reduced-motion: reduce) {
	.sac-typing span { animation: none; }
	.sac-launcher { transition: none; }
}

/* ----------------------------------------------------------- contact form */

.sac-contact {
	align-self: stretch;
	margin: 4px 0;
}

.sac-contact-form {
	padding: 16px;
	border: 1px solid var(--sac-border);
	border-radius: 14px;
	background: var(--sac-bubble-bot);
}

.sac-contact-intro {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--sac-muted);
}

.sac-contact-row { margin-bottom: 12px; }

.sac-contact-label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
}

.sac-contact-optional { font-weight: 400; color: var(--sac-muted); }

.sac-contact-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 9px 11px;
	border: 1px solid var(--sac-border);
	border-radius: 10px;
	background: var(--sac-surface);
	color: var(--sac-text);
	font: inherit;
	font-size: 14px;
}

textarea.sac-contact-input { resize: vertical; min-height: 76px; }
.sac-contact-input:focus { outline: 2px solid var(--sac-accent); outline-offset: -1px; }

.sac-contact-error:empty { display: none; }

.sac-contact-error {
	margin-bottom: 10px;
	padding: 8px 11px;
	border-radius: 8px;
	background: #fee4e2;
	color: #912018;
	font-size: 13px;
}

.sac-contact-actions { display: flex; align-items: center; gap: 10px; }

.sac-contact-submit {
	padding: 10px 18px;
	border: 0;
	border-radius: 10px;
	background: var(--sac-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.sac-contact-submit[disabled] { opacity: 0.55; cursor: not-allowed; }

.sac-contact-cancel {
	padding: 10px 4px;
	border: 0;
	background: none;
	color: var(--sac-muted);
	font: inherit;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

/* ------------------------------------------------------------- suggestions */

.sac-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 16px 12px;
}

.sac-chip {
	padding: 7px 12px;
	border: 1px solid var(--sac-border);
	border-radius: 999px;
	background: transparent;
	color: var(--sac-text);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.sac-chip:hover { border-color: var(--sac-accent); color: var(--sac-accent); }

/* -------------------------------------------------------------------- form */

.sac-form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid var(--sac-border);
}

.sac-input {
	flex: 1;
	min-height: 42px;
	max-height: 120px;
	padding: 10px 12px;
	border: 1px solid var(--sac-border);
	border-radius: 12px;
	background: var(--sac-surface);
	color: var(--sac-text);
	font: inherit;
	resize: none;
}

.sac-input:focus { outline: 2px solid var(--sac-accent); outline-offset: -1px; }

.sac-send {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	border: 0;
	border-radius: 12px;
	background: var(--sac-accent);
	color: #fff;
	cursor: pointer;
}

.sac-send[disabled] { opacity: 0.45; cursor: not-allowed; }
.sac-send svg { width: 18px; height: 18px; }

.sac-footnote {
	padding: 0 16px 10px;
	color: var(--sac-muted);
	font-size: 11px;
	text-align: center;
}

.sac-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ================================================================== RTL ===
 *
 * Two layers are at work here:
 *
 * 1. The panel carries dir="rtl" when the site (or the pinned chat language)
 *    is right-to-left. Flexbox and grid mirror themselves from that alone —
 *    only the physical properties below need explicit flipping.
 *
 * 2. Every message, list item and input additionally carries dir="auto", so a
 *    Hebrew visitor on an English shop still sees their own text right-
 *    aligned, and an English product name inside a Hebrew sentence stays
 *    readable. That layer works regardless of the panel's direction.
 */

/* The bubble "tail" corner has to move to the other side. */
[dir="rtl"] .sac-msg-bot .sac-bubble {
	border-bottom-left-radius: 14px;
	border-bottom-right-radius: 4px;
}

[dir="rtl"] .sac-msg-user .sac-bubble {
	border-bottom-right-radius: 14px;
	border-bottom-left-radius: 4px;
}

[dir="rtl"] .sac-bubble ul {
	padding-left: 0;
	padding-right: 20px;
}

/* The send icon is an arrow — mirror it, or it points backwards. */
[dir="rtl"] .sac-send svg,
[dir="rtl"] .sac-launcher-mark svg {
	transform: scaleX(-1);
}

[dir="rtl"] .sac-launcher { padding: 12px 16px 12px 20px; }
[dir="rtl"] .sac-launcher-bare { padding: 0; }

/* Values that are never RTL, whatever the surrounding text: an email address
 * or an order number rendered right-to-left is unreadable. */
.sac-force-ltr {
	direction: ltr;
	text-align: left;
}

[dir="rtl"] .sac-contact-optional { direction: rtl; }