/**
 * FEF Chatbot — front-end styles (Phase 1).
 *
 * Fully namespaced under .fef-cbt so it can never collide with the legacy
 * .fef-chat widget (spec §93). Theme is 100% CSS-variable driven — the
 * Elementor Style tab only sets a handful of custom properties (spec §49,
 * §90 multi-brand). All motion is GPU-accelerated (transform/opacity only),
 * every animation is disabled under prefers-reduced-motion (spec §69), and the
 * layout is verified from 320px up with device safe-area insets (spec §52,§70).
 *
 * Default tokens intentionally match the FEF core palette (assets/css/
 * fef-style.css): primary #667eea → #764ba2, success #388e3c, error #d32f2f,
 * border #e0e0e0, text #333/#666 — so the chatbot feels native to the plugin
 * out of the box, while every value stays overridable.
 */

.fef-cbt {
	/* ── Layout / position ─────────────────────────────── */
	--cbt-z:              99991;                 /* one above legacy chat */
	--cbt-offset-x:       24px;
	--cbt-offset-y:       24px;
	--cbt-gap:            16px;                  /* launcher ↔ window */

	/* ── Brand (drive the whole theme from these two) ──── */
	--cbt-primary:        #667eea;   /* main brand color   */
	--cbt-primary-2:      #764ba2;   /* gradient end color */

	/* ── Launcher ──────────────────────────────────────── */
	--cbt-launcher-size:  60px;
	--cbt-launcher-bg:    linear-gradient(135deg, var(--cbt-primary), var(--cbt-primary-2));
	--cbt-launcher-icon:  #ffffff;

	/* ── Window ────────────────────────────────────────── */
	--cbt-window-w:       384px;
	--cbt-window-h:       560px;
	--cbt-window-bg:      #ffffff;
	--cbt-window-radius:  18px;
	--cbt-window-shadow:  0 20px 60px rgba(0, 0, 0, 0.22);

	/* ── Header ────────────────────────────────────────── */
	--cbt-header-bg:      linear-gradient(135deg, var(--cbt-primary), var(--cbt-primary-2));
	--cbt-header-color:   #ffffff;

	/* ── Palette ───────────────────────────────────────── */
	--cbt-accent:         var(--cbt-primary);
	--cbt-text:           #1f2430;
	--cbt-text-soft:      #6b7280;
	--cbt-border:         #e5e7eb;
	--cbt-surface-soft:   #f8fafc;
	--cbt-success:        #388e3c;
	--cbt-error:          #d32f2f;

	/* ── Bubbles ───────────────────────────────────────── */
	--cbt-bot-bubble-bg:     #f1f5f9;
	--cbt-bot-bubble-color:  #1f2430;
	--cbt-user-bubble-bg:    var(--cbt-accent);
	--cbt-user-bubble-color: #ffffff;
	--cbt-bubble-radius:     16px;

	/* ── Quick replies ─────────────────────────────────── */
	--cbt-qr-bg:          #ffffff;
	--cbt-qr-color:       #4338ca;
	--cbt-qr-border:      #d9dcff;
	--cbt-qr-radius:      12px;

	/* ── Motion ────────────────────────────────────────── */
	--cbt-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
	--cbt-ease-panel:     cubic-bezier(0.34, 1.4, 0.5, 1);
	--cbt-dur:            0.28s;

	position: fixed;
	z-index: var(--cbt-z);
	font-family: inherit;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	color: var(--cbt-text);
}
.fef-cbt *,
.fef-cbt *::before,
.fef-cbt *::after { box-sizing: border-box; }

/* ── Positions + safe-area (device notch) ──────────────────────────── */
.fef-cbt--pos-bottom-right { right: var(--cbt-offset-x); bottom: var(--cbt-offset-y); }
.fef-cbt--pos-bottom-left  { left:  var(--cbt-offset-x); bottom: var(--cbt-offset-y); }
.fef-cbt--pos-top-right    { right: var(--cbt-offset-x); top:    var(--cbt-offset-y); }
.fef-cbt--pos-top-left     { left:  var(--cbt-offset-x); top:    var(--cbt-offset-y); }

.fef-cbt--pos-bottom-right,
.fef-cbt--pos-bottom-left { bottom: calc(var(--cbt-offset-y) + env(safe-area-inset-bottom, 0px)); }
.fef-cbt--pos-bottom-right { right: calc(var(--cbt-offset-x) + env(safe-area-inset-right, 0px)); }
.fef-cbt--pos-bottom-left  { left:  calc(var(--cbt-offset-x) + env(safe-area-inset-left, 0px)); }

/* ════════════════════════════════════════════════════════════════════
 * LAUNCHER
 * ══════════════════════════════════════════════════════════════════ */
.fef-cbt__launcher {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: var(--cbt-launcher-size);
	height: var(--cbt-launcher-size);
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--cbt-launcher-bg);
	color: var(--cbt-launcher-icon);
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	transition: transform var(--cbt-dur) var(--cbt-ease-spring),
	            box-shadow var(--cbt-dur) ease,
	            opacity 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.fef-cbt__launcher:hover  { transform: scale(1.06); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24); }
.fef-cbt__launcher:active { transform: scale(0.97); }
.fef-cbt__launcher:focus-visible { outline: 3px solid rgba(102, 126, 234, 0.55); outline-offset: 3px; }

/* Pill launcher when a label is present. */
.fef-cbt__launcher:has(.fef-cbt__launcher-label) {
	width: auto;
	border-radius: 40px;
	padding: 0 22px 0 18px;
}
.fef-cbt__launcher-label { font-size: 15px; font-weight: 600; white-space: nowrap; }
.fef-cbt__launcher-icon  { display: inline-flex; font-size: calc(var(--cbt-launcher-size) * 0.44); line-height: 1; }
.fef-cbt__launcher-icon svg { width: 1em; height: 1em; fill: currentColor; }
.fef-cbt__launcher-icon img { width: 1em; height: 1em; }

/* Notification badge. */
.fef-cbt__launcher-badge {
	position: absolute;
	top: -4px; right: -4px;
	min-width: 20px; height: 20px;
	padding: 0 5px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 700; line-height: 1;
	color: #fff; background: #ff3b30;
	border-radius: 999px;
	box-shadow: 0 0 0 2px #fff;
}

/* Hide the launcher while the window is open (docked layouts). */
.fef-cbt.is-open .fef-cbt__launcher { opacity: 0; transform: scale(0.6); pointer-events: none; }

/* ── Proactive teaser bubble (spec §41, §42) ────────────────────────── */
.fef-cbt__teaser {
	position: absolute;
	bottom: calc(var(--cbt-launcher-size) + var(--cbt-gap));
	max-width: 260px;
	padding: 14px 16px 14px 16px;
	background: var(--cbt-window-bg, #fff);
	color: var(--cbt-text);
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	animation: fefCbtTeaserIn 0.35s var(--cbt-ease-spring) both;
	z-index: 1;
}
.fef-cbt--pos-bottom-right .fef-cbt__teaser,
.fef-cbt--pos-top-right .fef-cbt__teaser { right: 0; }
.fef-cbt--pos-bottom-left .fef-cbt__teaser,
.fef-cbt--pos-top-left .fef-cbt__teaser { left: 0; }
.fef-cbt--pos-top-right .fef-cbt__teaser,
.fef-cbt--pos-top-left .fef-cbt__teaser { top: calc(var(--cbt-launcher-size) + var(--cbt-gap)); bottom: auto; }
.fef-cbt__teaser-body { font-size: 14px; line-height: 1.4; }
.fef-cbt__teaser-close {
	position: absolute; top: 4px; right: 6px;
	width: 22px; height: 22px; border: none; background: transparent;
	color: var(--cbt-text-soft); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 50%;
}
.fef-cbt__teaser-close:hover { background: var(--cbt-surface-soft); }
.fef-cbt__teaser-cta {
	display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600;
	color: var(--cbt-accent); text-decoration: none;
}
@keyframes fefCbtTeaserIn { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }

/* ════════════════════════════════════════════════════════════════════
 * WINDOW
 * ══════════════════════════════════════════════════════════════════ */
.fef-cbt__window {
	position: absolute;
	display: flex;
	flex-direction: column;
	width: var(--cbt-window-w);
	height: var(--cbt-window-h);
	max-height: calc(100vh - 2 * var(--cbt-offset-y) - var(--cbt-launcher-size) - var(--cbt-gap));
	max-width: calc(100vw - 2 * var(--cbt-offset-x));
	background: var(--cbt-window-bg);
	border-radius: var(--cbt-window-radius);
	box-shadow: var(--cbt-window-shadow);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px) scale(0.98);
	transform-origin: bottom right;
	pointer-events: none;
	transition: opacity var(--cbt-dur) ease,
	            transform var(--cbt-dur) var(--cbt-ease-panel),
	            visibility 0s linear var(--cbt-dur);
}
.fef-cbt.is-open .fef-cbt__window {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition: opacity var(--cbt-dur) ease,
	            transform var(--cbt-dur) var(--cbt-ease-panel),
	            visibility 0s;
}

/* Anchor the window to the launcher corner per position. */
.fef-cbt--pos-bottom-right .fef-cbt__window { bottom: calc(var(--cbt-launcher-size) + var(--cbt-gap)); right: 0; transform-origin: bottom right; }
.fef-cbt--pos-bottom-left  .fef-cbt__window { bottom: calc(var(--cbt-launcher-size) + var(--cbt-gap)); left: 0;  transform-origin: bottom left; }
.fef-cbt--pos-top-right    .fef-cbt__window { top:    calc(var(--cbt-launcher-size) + var(--cbt-gap)); right: 0; transform-origin: top right; }
.fef-cbt--pos-top-left     .fef-cbt__window { top:    calc(var(--cbt-launcher-size) + var(--cbt-gap)); left: 0;  transform-origin: top left; }

/* ── Header ─────────────────────────────────────────────────────────── */
.fef-cbt__header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 14px 14px 16px;
	background: var(--cbt-header-bg);
	color: var(--cbt-header-color);
	flex-shrink: 0;
}
.fef-cbt__avatar {
	flex-shrink: 0;
	width: 42px; height: 42px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: #ffffff;
	color: var(--cbt-accent);
	font-size: 22px; overflow: hidden;
}
.fef-cbt__avatar img,
.fef-cbt__avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.fef-cbt__avatar svg { width: 24px; height: 24px; fill: currentColor; }
.fef-cbt__avatar-initials { font-size: 16px; font-weight: 700; }

.fef-cbt__heading { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fef-cbt__name { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fef-cbt__status {
	font-size: 12.5px; opacity: 0.92;
	display: inline-flex; align-items: center; gap: 6px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fef-cbt__status::before {
	content: ""; width: 8px; height: 8px; border-radius: 50%;
	background: #9ca3af; flex-shrink: 0;
}
.fef-cbt__status--online::before  { background: #34d399; box-shadow: 0 0 0 2px rgba(52,211,153,0.35); }
.fef-cbt__status--away::before    { background: #fbbf24; }
.fef-cbt__status--busy::before    { background: #f87171; }
.fef-cbt__status--offline::before { background: #9ca3af; }

.fef-cbt__min,
.fef-cbt__close {
	flex-shrink: 0;
	width: 32px; height: 32px;
	border: none; border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: inherit; cursor: pointer;
	font-size: 20px; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background 0.2s ease;
}
.fef-cbt__min:hover,
.fef-cbt__close:hover { background: rgba(255, 255, 255, 0.3); }
.fef-cbt__min:focus-visible,
.fef-cbt__close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* ── Conversation log ───────────────────────────────────────────────── */
.fef-cbt__log {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 16px 14px 8px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--cbt-window-bg);
	scroll-behavior: smooth;
	overscroll-behavior: contain;
}
.fef-cbt__log:focus-visible { outline: none; }

/* ── Messages ───────────────────────────────────────────────────────── */
.fef-cbt__msg { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; animation: fefCbtIn 0.28s ease both; }
.fef-cbt__msg--user { flex-direction: row-reverse; }

.fef-cbt__msg-avatar {
	flex-shrink: 0;
	width: 28px; height: 28px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--cbt-surface-soft);
	color: var(--cbt-accent);
	font-size: 15px; overflow: hidden;
}
.fef-cbt__msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fef-cbt__msg-avatar svg { width: 16px; height: 16px; }

.fef-cbt__bubble {
	max-width: 78%;
	padding: 10px 13px;
	font-size: 14px;
	border-radius: var(--cbt-bubble-radius);
	word-wrap: break-word;
	overflow-wrap: anywhere;
}
.fef-cbt__msg--bot .fef-cbt__bubble {
	background: var(--cbt-bot-bubble-bg);
	color: var(--cbt-bot-bubble-color);
	border-radius: 4px var(--cbt-bubble-radius) var(--cbt-bubble-radius) var(--cbt-bubble-radius);
}
.fef-cbt__msg--user .fef-cbt__bubble {
	background: var(--cbt-user-bubble-bg);
	color: var(--cbt-user-bubble-color);
	border-radius: var(--cbt-bubble-radius) 4px var(--cbt-bubble-radius) var(--cbt-bubble-radius);
}
.fef-cbt__bubble a { color: inherit; text-decoration: underline; }
.fef-cbt__bubble--title { font-weight: 700; background: transparent; padding-bottom: 2px; }

/* Message-group accents (spec §7: warning / success / error nodes). */
.fef-cbt__msg--bot .fef-cbt__bubble--warning { background: #fff7ed; color: #9a3412; box-shadow: inset 3px 0 0 #f57c00; }
.fef-cbt__msg--bot .fef-cbt__bubble--success { background: #f0fdf4; color: #166534; box-shadow: inset 3px 0 0 var(--cbt-success); }
.fef-cbt__msg--bot .fef-cbt__bubble--error   { background: #fef2f2; color: #991b1b; box-shadow: inset 3px 0 0 var(--cbt-error); }

/* Media attachments (image / video / file nodes). */
.fef-cbt__media { margin: 2px 0 2px 36px; max-width: 82%; }
.fef-cbt__media-img,
.fef-cbt__media-video { display: block; width: 100%; height: auto; border-radius: 12px; }
.fef-cbt__media-file {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 14px; font-size: 13px; font-weight: 600;
	color: var(--cbt-accent); text-decoration: none;
	background: var(--cbt-surface-soft); border: 1px solid var(--cbt-border); border-radius: 12px;
}
.fef-cbt__media-file::before { content: "📎"; }
[dir="rtl"] .fef-cbt__media { margin: 2px 36px 2px 0; }

/* ════════════════════════════════════════════════════════════════════
 * PHASE 2b — RICH NODE COMPONENTS (cards, pickers, ratings)  §7, §8
 * ══════════════════════════════════════════════════════════════════ */

/* Interactive picker zone (reuses the replies rail). */
.fef-cbt__picker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fef-cbt__picker.is-invalid { animation: fefCbtShake 0.3s ease; }
.fef-cbt__confirm { width: 100%; justify-content: center; margin-top: 2px; }
@keyframes fefCbtShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ── Cards (product / promo / team) ─────────────────────────────────── */
.fef-cbt__card {
	background: #fff;
	border: 1px solid var(--cbt-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
	margin: 2px 0 2px 36px;
	max-width: 82%;
}
[dir="rtl"] .fef-cbt__card { margin: 2px 36px 2px 0; }
.fef-cbt__card-img { width: 100%; height: 148px; object-fit: cover; display: block; }
.fef-cbt__card-body { padding: 12px 14px; }
.fef-cbt__card-title { font-weight: 700; font-size: 14px; }
.fef-cbt__card-text { font-size: 13px; color: var(--cbt-text-soft); margin-top: 3px; }
.fef-cbt__card-price { font-size: 15px; font-weight: 700; color: var(--cbt-accent); margin-top: 4px; }
.fef-cbt__card-rating { color: #f59e0b; font-size: 13px; letter-spacing: 1px; margin-top: 2px; }
.fef-cbt__card-actions { display: flex; gap: 8px; margin-top: 10px; }
.fef-cbt__card-btn { width: auto; flex: 1; justify-content: center; padding: 8px 12px; font-size: 13px; text-decoration: none; }

/* Team card. */
.fef-cbt__card--team .fef-cbt__team-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 0; }
.fef-cbt__team-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }

/* ── Carousel ───────────────────────────────────────────────────────── */
.fef-cbt__carousel {
	display: flex; gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 4px 14px 8px 36px;
	margin: 0 -14px 0 0;
	-webkit-overflow-scrolling: touch;
}
.fef-cbt__carousel .fef-cbt__card { flex: 0 0 220px; margin: 0; scroll-snap-align: start; }
.fef-cbt__carousel::-webkit-scrollbar { height: 6px; }
.fef-cbt__carousel::-webkit-scrollbar-thumb { background: var(--cbt-border); border-radius: 3px; }

/* ── Multi-select chips ─────────────────────────────────────────────── */
.fef-cbt__chip {
	padding: 8px 14px; font-size: 13px; font-weight: 600;
	color: var(--cbt-qr-color); background: var(--cbt-qr-bg);
	border: 1.5px solid var(--cbt-qr-border); border-radius: 999px; cursor: pointer;
	transition: all 0.15s ease;
}
.fef-cbt__chip.is-on { background: var(--cbt-accent); color: #fff; border-color: var(--cbt-accent); }
.fef-cbt__chip:focus-visible { outline: 2px solid rgba(102,126,234,0.4); outline-offset: 1px; }

/* ── Dropdown / searchable ──────────────────────────────────────────── */
.fef-cbt__select,
.fef-cbt__select-search {
	width: 100%; padding: 10px 12px; font-size: 14px;
	border: 1.5px solid var(--cbt-border); border-radius: 10px;
	background: #fff; color: var(--cbt-text);
}
.fef-cbt__select:focus,
.fef-cbt__select-search:focus { outline: none; border-color: var(--cbt-accent); box-shadow: 0 0 0 3px rgba(102,126,234,0.15); }

/* ── Stars ──────────────────────────────────────────────────────────── */
.fef-cbt__picker--stars { gap: 4px; }
.fef-cbt__star {
	background: none; border: none; cursor: pointer;
	font-size: 30px; line-height: 1; color: #d1d5db; padding: 2px;
	transition: transform 0.1s ease, color 0.1s ease;
}
.fef-cbt__picker--stars:hover .fef-cbt__star { color: #f59e0b; }
.fef-cbt__star:hover ~ .fef-cbt__star { color: #d1d5db; }
.fef-cbt__star:hover { transform: scale(1.15); }
.fef-cbt__star:focus-visible { outline: 2px solid rgba(102,126,234,0.4); border-radius: 6px; }

/* ── Emoji ──────────────────────────────────────────────────────────── */
.fef-cbt__emoji {
	background: none; border: none; cursor: pointer; font-size: 28px; padding: 4px;
	border-radius: 10px; transition: transform 0.12s ease, background 0.12s ease;
}
.fef-cbt__emoji:hover { transform: scale(1.2); background: var(--cbt-surface-soft); }

/* ── NPS / scale ────────────────────────────────────────────────────── */
.fef-cbt__picker--nps { display: grid; grid-template-columns: repeat(6, 1fr); }
.fef-cbt__nps,
.fef-cbt__scale {
	min-width: 38px; padding: 8px 0; text-align: center; justify-content: center;
	font-size: 14px; font-weight: 600; color: var(--cbt-qr-color);
	background: var(--cbt-qr-bg); border: 1.5px solid var(--cbt-qr-border);
	border-radius: 10px; cursor: pointer; transition: all 0.12s ease;
}
.fef-cbt__nps:hover,
.fef-cbt__scale:hover { background: var(--cbt-accent); color: #fff; border-color: var(--cbt-accent); }

/* ── Slider ─────────────────────────────────────────────────────────── */
.fef-cbt__picker--slider { flex-direction: column; align-items: stretch; }
.fef-cbt__slider-val { font-weight: 700; font-size: 16px; color: var(--cbt-accent); text-align: center; }
.fef-cbt__slider { width: 100%; accent-color: var(--cbt-accent); }

/* ── Date / time ────────────────────────────────────────────────────── */
.fef-cbt__datetime {
	flex: 1; min-width: 0; padding: 10px 12px; font-size: 14px;
	border: 1.5px solid var(--cbt-border); border-radius: 10px; background: #fff; color: var(--cbt-text);
}
.fef-cbt__datetime:focus { outline: none; border-color: var(--cbt-accent); box-shadow: 0 0 0 3px rgba(102,126,234,0.15); }

/* ── OTP ────────────────────────────────────────────────────────────── */
.fef-cbt__picker--otp { gap: 6px; justify-content: center; }
.fef-cbt__otp-box {
	width: 42px; height: 50px; text-align: center; font-size: 22px; font-weight: 700;
	border: 1.5px solid var(--cbt-border); border-radius: 10px; background: #fff; color: var(--cbt-text);
}
.fef-cbt__otp-box:focus { outline: none; border-color: var(--cbt-accent); box-shadow: 0 0 0 3px rgba(102,126,234,0.15); }

/* ── Upload ─────────────────────────────────────────────────────────── */
.fef-cbt__upload-label { width: auto; cursor: pointer; position: relative; }
.fef-cbt__file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.fef-cbt__file-name { width: 100%; font-size: 12px; color: var(--cbt-text-soft); margin-top: 4px; }

/* ── Progress bar (spec §79) ────────────────────────────────────────── */
.fef-cbt__progress {
	height: 3px;
	background: var(--cbt-surface-soft);
	flex-shrink: 0;
	overflow: hidden;
}
.fef-cbt__progress-fill {
	height: 100%;
	width: 0;
	background: var(--cbt-accent);
	transition: width 0.35s var(--cbt-ease-panel);
}

/* ── Async loading indicator (product finder / order lookup) ────────── */
.fef-cbt__loading {
	align-self: flex-start; margin-left: 36px;
	padding: 8px 14px; font-size: 13px; color: var(--cbt-text-soft);
	background: var(--cbt-surface-soft); border-radius: 12px;
	position: relative;
}
.fef-cbt__loading::after {
	content: ""; display: inline-block; width: 12px; height: 12px;
	margin-left: 8px; vertical-align: -2px;
	border: 2px solid var(--cbt-border); border-top-color: var(--cbt-accent);
	border-radius: 50%; animation: fefCbtSpin 0.7s linear infinite;
}
@keyframes fefCbtSpin { to { transform: rotate(360deg); } }
[dir="rtl"] .fef-cbt__loading { margin: 0 36px 0 0; }

/* ── End-screen reference chip (spec §83) ───────────────────────────── */
.fef-cbt__reference {
	align-self: flex-start; margin-left: 36px;
	padding: 6px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
	color: var(--cbt-accent); background: var(--cbt-surface-soft);
	border: 1px dashed var(--cbt-accent); border-radius: 8px;
}
[dir="rtl"] .fef-cbt__reference { margin: 0 36px 0 0; }

/* ── Typing indicator ───────────────────────────────────────────────── */
.fef-cbt__typing { display: flex; align-items: flex-end; gap: 8px; }
.fef-cbt__typing-dots {
	display: inline-flex; gap: 4px;
	padding: 12px 14px;
	background: var(--cbt-bot-bubble-bg);
	border-radius: 4px 16px 16px 16px;
}
.fef-cbt__dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--cbt-text-soft);
	animation: fefCbtBlink 1.2s infinite ease-in-out;
}
.fef-cbt__dot:nth-child(2) { animation-delay: 0.2s; }
.fef-cbt__dot:nth-child(3) { animation-delay: 0.4s; }

/* ── Quick replies ──────────────────────────────────────────────────── */
.fef-cbt__replies { display: flex; flex-direction: column; gap: 8px; padding: 4px 14px 12px; }
.fef-cbt[data-qr-layout="horizontal"] .fef-cbt__replies { flex-direction: row; flex-wrap: wrap; }
.fef-cbt[data-qr-layout="grid"] .fef-cbt__replies { display: grid; grid-template-columns: 1fr 1fr; }
.fef-cbt__replies:empty { display: none; }

.fef-cbt__qr {
	display: inline-flex; align-items: center; gap: 8px;
	width: 100%;
	padding: 10px 14px;
	font-size: 14px; font-weight: 600; text-align: left;
	color: var(--cbt-qr-color);
	background: var(--cbt-qr-bg);
	border: 1.5px solid var(--cbt-qr-border);
	border-radius: var(--cbt-qr-radius);
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.fef-cbt[data-qr-layout="horizontal"] .fef-cbt__qr { width: auto; }
.fef-cbt__qr:hover {
	border-color: var(--cbt-accent);
	background: color-mix(in srgb, var(--cbt-accent) 8%, #fff);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.18);
}
.fef-cbt__qr:active { transform: translateY(0); }
.fef-cbt__qr:focus-visible { outline: 3px solid rgba(102, 126, 234, 0.4); outline-offset: 1px; }
.fef-cbt__qr--primary { color: #fff; background: var(--cbt-accent); border-color: var(--cbt-accent); }
.fef-cbt__qr--primary:hover { background: var(--cbt-accent); filter: brightness(1.06); }
.fef-cbt__qr-icon { display: inline-flex; font-size: 16px; }
.fef-cbt__qr-icon svg { width: 1em; height: 1em; }
.fef-cbt__qr-label { flex: 1; }

/* ── Composer ───────────────────────────────────────────────────────── */
.fef-cbt__composer {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid var(--cbt-border);
	background: var(--cbt-window-bg);
	flex-shrink: 0;
}
.fef-cbt__input {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	font-size: 14px;
	color: var(--cbt-text);
	border: 1.5px solid var(--cbt-border);
	border-radius: 999px;
	background: var(--cbt-surface-soft);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fef-cbt__input:focus {
	outline: none;
	border-color: var(--cbt-accent);
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
	background: #fff;
}
.fef-cbt__send {
	flex-shrink: 0;
	width: 42px; height: 42px;
	border: none; border-radius: 50%;
	background: var(--cbt-accent); color: #fff;
	font-size: 18px; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: transform 0.15s ease, filter 0.15s ease;
}
.fef-cbt__send:hover { filter: brightness(1.08); transform: scale(1.05); }
.fef-cbt__send:active { transform: scale(0.95); }
.fef-cbt__send:focus-visible { outline: 3px solid rgba(102, 126, 234, 0.4); outline-offset: 2px; }

/* ── Consent notice ─────────────────────────────────────────────────── */
.fef-cbt__consent {
	margin: 6px 4px;
	padding: 12px 14px;
	font-size: 13px;
	color: var(--cbt-text-soft);
	background: var(--cbt-surface-soft);
	border: 1px solid var(--cbt-border);
	border-radius: 12px;
}
.fef-cbt__consent-actions { margin-top: 10px; }

/* ── Footer nav ─────────────────────────────────────────────────────── */
.fef-cbt__footer {
	display: flex; align-items: center; gap: 6px;
	padding: 8px 12px;
	border-top: 1px solid var(--cbt-border);
	flex-shrink: 0;
}
.fef-cbt__footer:empty { display: none; }
.fef-cbt__navbtn {
	padding: 5px 10px;
	font-size: 12px; font-weight: 600;
	color: var(--cbt-text-soft);
	background: transparent; border: none; border-radius: 8px;
	cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.fef-cbt__navbtn:hover { background: var(--cbt-surface-soft); color: var(--cbt-accent); }
.fef-cbt__navbtn:focus-visible { outline: 2px solid rgba(102, 126, 234, 0.4); outline-offset: 1px; }

/* ════════════════════════════════════════════════════════════════════
 * LAYOUT VARIANTS (spec §50)
 * ══════════════════════════════════════════════════════════════════ */

/* Compact — narrower, shorter. */
.fef-cbt--layout-compact { --cbt-window-w: 320px; --cbt-window-h: 460px; }

/* Full height — docked side panel spanning the viewport. */
.fef-cbt--layout-full-height .fef-cbt__window {
	top: 0; bottom: 0; height: 100vh; max-height: 100vh;
	border-radius: 0;
}
.fef-cbt--layout-full-height.fef-cbt--pos-bottom-right .fef-cbt__window,
.fef-cbt--layout-full-height.fef-cbt--pos-top-right .fef-cbt__window { right: calc(-1 * var(--cbt-offset-x)); }
.fef-cbt--layout-full-height.fef-cbt--pos-bottom-left .fef-cbt__window,
.fef-cbt--layout-full-height.fef-cbt--pos-top-left .fef-cbt__window { left: calc(-1 * var(--cbt-offset-x)); }

/* Full screen — app-like takeover. */
.fef-cbt--layout-full-screen .fef-cbt__window {
	position: fixed; inset: 0;
	width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
	border-radius: 0;
}

/* Bottom sheet — mobile-first drawer. */
.fef-cbt--layout-bottom-sheet .fef-cbt__window {
	position: fixed; left: 0; right: 0; bottom: 0;
	width: 100vw; max-width: 100vw; height: 72vh;
	border-radius: 20px 20px 0 0;
	transform: translateY(100%);
	transform-origin: bottom center;
}
.fef-cbt--layout-bottom-sheet.is-open .fef-cbt__window { transform: none; }

/* Center modal — desktop dialog with backdrop. */
.fef-cbt--layout-center-modal .fef-cbt__window {
	position: fixed; top: 50%; left: 50%;
	transform: translate(-50%, -48%) scale(0.98);
}
.fef-cbt--layout-center-modal.is-open .fef-cbt__window { transform: translate(-50%, -50%); }

/* Backdrop for the two truly-modal layouts. */
.fef-cbt--layout-center-modal.is-open::before,
.fef-cbt--layout-full-screen.is-open::before {
	content: "";
	position: fixed; inset: 0;
	background: rgba(15, 23, 42, 0.45);
	z-index: -1;
	animation: fefCbtFade 0.25s ease both;
}

/* ── Editor hint (only inside Elementor) ────────────────────────────── */
.fef-cbt__editor-hint {
	position: absolute; bottom: calc(var(--cbt-launcher-size) + 10px); right: 0;
	width: 240px; margin: 0; padding: 10px 12px;
	font-size: 12px; color: #475569;
	background: #fff; border: 1px dashed #cbd5e1; border-radius: 10px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.fef-cbt:not(.fef-cbt--editor) .fef-cbt__editor-hint { display: none; }

/* ── Screen-reader utility fallback (themes usually provide this) ───── */
.fef-cbt .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ════════════════════════════════════════════════════════════════════
 * ANIMATIONS
 * ══════════════════════════════════════════════════════════════════ */
@keyframes fefCbtIn   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fefCbtBlink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes fefCbtFade { from { opacity: 0; } to { opacity: 1; } }

/* ════════════════════════════════════════════════════════════════════
 * RTL (spec §48)
 * ══════════════════════════════════════════════════════════════════ */
[dir="rtl"] .fef-cbt__qr,
.fef-cbt[dir="rtl"] .fef-cbt__qr { text-align: right; }
[dir="rtl"] .fef-cbt__header { padding: 14px 16px 14px 14px; }
[dir="rtl"] .fef-cbt--pos-bottom-right .fef-cbt__window { transform-origin: bottom left; }
[dir="rtl"] .fef-cbt__msg--bot .fef-cbt__bubble { border-radius: var(--cbt-bubble-radius) 4px var(--cbt-bubble-radius) var(--cbt-bubble-radius); }
[dir="rtl"] .fef-cbt__msg--user .fef-cbt__bubble { border-radius: 4px var(--cbt-bubble-radius) var(--cbt-bubble-radius) var(--cbt-bubble-radius); }

/* ════════════════════════════════════════════════════════════════════
 * RESPONSIVE — phones become full-screen; large touch targets (spec §52,§70)
 * ══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
	.fef-cbt--layout-standard .fef-cbt__window,
	.fef-cbt--layout-compact .fef-cbt__window,
	.fef-cbt--layout-center-modal .fef-cbt__window {
		position: fixed;
		inset: 0;
		width: 100vw; height: 100vh;
		max-width: 100vw; max-height: 100vh;
		border-radius: 0;
		transform: translateY(14px);
	}
	.fef-cbt.is-open .fef-cbt__window { transform: none; }
	.fef-cbt__min,
	.fef-cbt__close { width: 40px; height: 40px; }
	.fef-cbt__qr { padding: 12px 14px; }
	.fef-cbt__input { padding: 12px 16px; }
	/* Keyboard-aware height using the small-viewport unit where supported. */
	.fef-cbt.is-open .fef-cbt__window { height: 100svh; max-height: 100svh; }
}

@media (max-width: 360px) {
	.fef-cbt__bubble { max-width: 84%; }
}

/* ════════════════════════════════════════════════════════════════════
 * ACCESSIBILITY — reduced motion + high contrast (spec §53,§69)
 * ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.fef-cbt *,
	.fef-cbt *::before,
	.fef-cbt *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

@media (prefers-contrast: more) {
	.fef-cbt {
		--cbt-bot-bubble-bg: #e2e8f0;
		--cbt-qr-border: #4338ca;
		--cbt-border: #94a3b8;
	}
	.fef-cbt__bubble { outline: 1px solid rgba(0, 0, 0, 0.2); }
}

/* Graceful fallback if color-mix() is unsupported. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.fef-cbt__qr:hover { background: var(--cbt-surface-soft); }
}

/* ════════════════════════════════════════════════════════════════════
 * THEME HARDENING
 * Themes frequently style bare <button>/<input>/<a> (backgrounds, radius,
 * colours). These rules re-assert the chatbot's own look with the root
 * class for specificity + !important so the widget looks identical on any
 * theme. Scoped entirely under .fef-cbt — nothing outside is affected.
 * ══════════════════════════════════════════════════════════════════ */
.fef-cbt button,
.fef-cbt input,
.fef-cbt select,
.fef-cbt textarea,
.fef-cbt a { font-family: inherit; letter-spacing: normal; text-transform: none; }

.fef-cbt .fef-cbt__launcher {
	background: var(--cbt-launcher-bg) !important;
	color: var(--cbt-launcher-icon) !important;
	border: none !important;
	border-radius: 50% !important;
}
.fef-cbt .fef-cbt__launcher:has(.fef-cbt__launcher-label) { border-radius: 40px !important; }

.fef-cbt .fef-cbt__qr {
	background: var(--cbt-qr-bg) !important;
	color: var(--cbt-qr-color) !important;
	border: 1.5px solid var(--cbt-qr-border) !important;
	border-radius: var(--cbt-qr-radius) !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
.fef-cbt .fef-cbt__qr:hover { border-color: var(--cbt-accent) !important; color: var(--cbt-accent) !important; }
.fef-cbt .fef-cbt__qr--primary,
.fef-cbt .fef-cbt__qr--primary:hover {
	background: var(--cbt-accent) !important;
	color: #ffffff !important;
	border-color: var(--cbt-accent) !important;
}
.fef-cbt .fef-cbt__send {
	background: var(--cbt-accent) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 50% !important;
}
.fef-cbt .fef-cbt__chip {
	background: var(--cbt-qr-bg) !important;
	color: var(--cbt-qr-color) !important;
	border: 1.5px solid var(--cbt-qr-border) !important;
}
.fef-cbt .fef-cbt__chip.is-on {
	background: var(--cbt-accent) !important;
	color: #ffffff !important;
	border-color: var(--cbt-accent) !important;
}
.fef-cbt .fef-cbt__nps,
.fef-cbt .fef-cbt__scale {
	background: var(--cbt-qr-bg) !important;
	color: var(--cbt-qr-color) !important;
	border: 1.5px solid var(--cbt-qr-border) !important;
}
.fef-cbt .fef-cbt__nps:hover,
.fef-cbt .fef-cbt__scale:hover { background: var(--cbt-accent) !important; color: #ffffff !important; }
.fef-cbt .fef-cbt__navbtn { background: transparent !important; color: var(--cbt-text-soft) !important; border: none !important; }
.fef-cbt .fef-cbt__navbtn:hover { color: var(--cbt-accent) !important; }
.fef-cbt .fef-cbt__min,
.fef-cbt .fef-cbt__close {
	background: rgba(255, 255, 255, 0.16) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 50% !important;
}
.fef-cbt .fef-cbt__input {
	background: var(--cbt-surface-soft) !important;
	color: var(--cbt-text) !important;
	border: 1.5px solid var(--cbt-border) !important;
	border-radius: 999px !important;
}
.fef-cbt .fef-cbt__input:focus { border-color: var(--cbt-accent) !important; }
.fef-cbt .fef-cbt__card-btn { text-decoration: none !important; }
.fef-cbt .fef-cbt__avatar,
.fef-cbt .fef-cbt__msg-avatar { color: currentColor; }