/* Chat bubble (shop assistant, order form, messages to the owner). Logical properties, so it mirrors in RTL. */
.safa-chat {
	position: fixed;
	inset-block-end: 16px;
	z-index: 96;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	line-height: var(--line-height-normal);
	color: var(--color-text);
}
.safa-chat--end { inset-inline-end: 16px; }
.safa-chat--start { inset-inline-start: 16px; }

.safa-chat__fab {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 0;
	background: var(--color-primary);
	color: var(--color-text-on-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(22, 35, 63, 0.3);
	transition: transform var(--transition-fast), background var(--transition-fast);
}
.safa-chat__fab:hover { background: var(--color-primary-strong); transform: scale(1.05); }
.safa-chat__fab:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

.safa-chat__panel {
	position: absolute;
	inset-block-end: 68px;
	inset-inline-end: 0;
	width: min(370px, calc(100vw - 24px));
	height: min(560px, calc(100vh - 110px));
	display: flex;
	flex-direction: column;
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md), 0 12px 40px rgba(22, 35, 63, 0.18);
	overflow: hidden;
}
.safa-chat--start .safa-chat__panel { inset-inline-end: auto; inset-inline-start: 0; }
.safa-chat__panel[hidden] { display: none; }

.safa-chat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3) var(--space-4);
	background: var(--color-primary);
	color: var(--color-text-on-primary);
}
.safa-chat__close {
	background: transparent;
	border: 0;
	color: inherit;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}

.safa-chat__log {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	background: var(--color-surface);
}
.safa-chat__msg {
	max-width: 86%;
	padding: 8px 12px;
	border-radius: var(--radius-md);
	white-space: pre-wrap;
	word-break: break-word;
}
.safa-chat__msg--bot { align-self: flex-start; background: var(--color-card); border: 1px solid var(--color-border); border-end-start-radius: 2px; }
.safa-chat__msg--user { align-self: flex-end; background: var(--color-primary); color: var(--color-text-on-primary); border-end-end-radius: 2px; }
.safa-chat__typing { color: var(--color-text-muted); font-style: italic; }

.safa-chat__widget { align-self: stretch; }
.safa-chat__choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.safa-chat__products { display: flex; flex-direction: column; gap: var(--space-2); }
.safa-chat__product {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	width: 100%;
	text-align: start;
	padding: 6px 10px;
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	cursor: pointer;
	font: inherit;
}
.safa-chat__product:hover:not(:disabled) { border-color: var(--color-accent); }
.safa-chat__product img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-sm); flex: none; }
.safa-chat__product-name { flex: 1; font-weight: var(--font-weight-medium); }
.safa-chat__product-price { color: var(--color-accent-strong); font-weight: var(--font-weight-bold); white-space: nowrap; }

.safa-chat__select {
	width: 100%;
	min-height: 40px;
	padding: 6px 10px;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-card);
	font: inherit;
}

.safa-chat__summary {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.safa-chat__row { display: flex; justify-content: space-between; gap: var(--space-3); }
.safa-chat__row--total { font-weight: var(--font-weight-bold); border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-2); }
.safa-chat__small { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }

.safa-chat__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-block-start: 1px solid var(--color-border);
	background: var(--color-card);
}
.safa-chat__actions:empty { display: none; }
.safa-chat__chip {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 4px 12px;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	background: var(--color-card);
	color: var(--color-primary);
	font: inherit;
	font-size: var(--text-xs);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	cursor: pointer;
}
.safa-chat__chip:hover:not(:disabled) { border-color: var(--color-accent); background: var(--color-accent-tint); }
.safa-chat__chip:disabled { opacity: 0.5; cursor: default; }
.safa-chat__chip--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary); align-self: flex-start; }
.safa-chat__chip--primary:hover:not(:disabled) { background: var(--color-primary-strong); }
.safa-chat__chip--wa { background: #25d366; border-color: #25d366; color: #fff; }

.safa-chat__form {
	display: flex;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-block-start: 1px solid var(--color-border);
	background: var(--color-card);
}
.safa-chat__input {
	flex: 1;
	min-width: 0;
	min-height: 40px;
	padding: 6px 12px;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	font: inherit;
	font-size: 16px; /* no zoom on phones */
}
.safa-chat__input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.safa-chat__send {
	border: 0;
	border-radius: var(--radius-pill);
	padding: 0 16px;
	background: var(--color-accent);
	color: var(--color-text-on-accent);
	font: inherit;
	font-weight: var(--font-weight-bold);
	cursor: pointer;
}
.safa-chat__send:disabled, .safa-chat__input:disabled { opacity: 0.5; cursor: default; }
.safa-chat__notice { margin: 0; padding: 4px var(--space-3) var(--space-2); font-size: 11px; color: var(--color-text-muted); background: var(--color-card); }

/* The floating WhatsApp button moves up when the chat bubble takes the same corner. */
body.has-safa-chat .safa-wa { inset-block-end: 84px; }
@media (max-width: 768px) {
	body.has-safa-chat.has-safa-sticky .safa-wa { inset-block-end: 152px; }
	body.has-safa-sticky .safa-chat { inset-block-end: 84px; }
	.safa-chat__panel { position: fixed; inset: auto 8px 8px 8px; width: auto; height: min(78vh, 560px); }
	.safa-chat:not(.is-open) .safa-chat__panel { display: none; }
	.safa-chat.is-open .safa-chat__fab { display: none; }
}