/**
 * EFM Chat widget styles (public brand: navy -> teal, Calibri).
 * Scoped under #efmchat-root (an ID, not a class) - the plugin creates exactly
 * one instance per page, so every real selector below is prefixed with
 * #efmchat-root. ID specificity (1,0,0+) beats any host-theme rule written on
 * a bare element or class - e.g. a theme's `.theme-name button{...}` or
 * `.theme-name input,.theme-name textarea{...}` (specificity 0,1,1) - no
 * matter which stylesheet loads last. A bare `.efmchat-*` class selector, or
 * the old `.efmchat-root`-class scoping, loses to that kind of theme rule
 * outright; only the ID wins unconditionally (Stage 679 "fiery" theme bug).
 *
 * v2 (0.2.0): the reset below strips every theme/browser default from EVERY
 * button/input/textarea/select inside #efmchat-root FIRST (all: unset); every
 * widget control then re-declares its own look in full via a LONGER selector
 * (#efmchat-root .efmchat-xxx = 1 ID + 1 class), which always outranks the
 * shorter reset (#efmchat-root <type> = 1 ID + 0 classes), regardless of
 * source order - verified by tests/js/widget-css-specificity.test.mjs.
 */
#efmchat-root button,
#efmchat-root input,
#efmchat-root textarea,
#efmchat-root select {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font: inherit;
	-webkit-tap-highlight-color: transparent;
}

#efmchat-root {
	--efm-navy: #0F2340;
	--efm-dteal: #005C64;
	--efm-mteal: #268C70;
	--efm-green: #45B978;
	--efm-ink: #111111;
	--efm-mut: #7A7875;
	--efm-line: #E6E3DF;
	--efm-surface: #ffffff;
	--efm-bg: #F5F3F0;
	font-family: "Calibri", "Segoe UI", system-ui, -apple-system, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 2147483000;
}
#efmchat-root *,
#efmchat-root *::before,
#efmchat-root *::after {
	box-sizing: border-box;
}

/* F-W2: the ONE justified !important. Every element the widget toggles via
   the `hidden` property/attribute (the panel, the assistant badge, the
   hidden native file input, the MCP expander body) must actually disappear -
   without this, a component rule that also sets `display` on that same
   element (e.g. .efmchat-panel{display:flex}) has equal-or-higher
   specificity than the browser's own `[hidden]{display:none}` rule and wins
   by being an author rule, so `hidden` becomes a no-op and the element (an
   empty open chat panel, on every page load) stays visible. This single
   rule outranks everything below it, regardless of specificity or order. */
#efmchat-root [hidden] {
	display: none !important;
}

#efmchat-root .efmchat-bubble {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	display: grid;
	place-items: center;
	background: linear-gradient( 135deg, var(--efm-navy), var(--efm-dteal) );
	box-shadow: 0 8px 24px rgba( 15, 35, 64, 0.28 );
}
#efmchat-root .efmchat-bubble:focus-visible { outline: 3px solid var(--efm-mteal); outline-offset: 2px; }

#efmchat-root .efmchat-panel {
	position: absolute;
	right: 0;
	bottom: 68px;
	width: 384px;
	max-width: calc( 100vw - 32px );
	height: 640px;
	height: min( 760px, 90vh );
	height: min( 760px, 90dvh );
	/* Load-bearing (checked 0.5.1): keeps the panel top on screen above the 68px + 20px offset on windows under 880px tall. */
	max-height: calc( 100vh - 120px );
	display: flex;
	flex-direction: column;
	background: var(--efm-surface);
	border: 1px solid var(--efm-line);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 30px 70px rgba( 0, 0, 0, 0.28 );
}

/* Full-screen takeover under 480px (mobile), edge to edge, square corners. */
@media ( max-width: 480px ) {
	#efmchat-root .efmchat-panel {
		position: fixed;
		inset: 0;
		right: auto;
		bottom: auto;
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		border-radius: 0;
		border: 0;
		box-shadow: none;
	}
}

/* --- Header: avatar (+ small badge once a human has joined), title, status --- */
#efmchat-root .efmchat-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 12px 13px 16px;
	color: #fff;
	background: linear-gradient( 135deg, var(--efm-navy), var(--efm-dteal) );
	flex: none;
}
#efmchat-root .efmchat-avatarwrap { position: relative; width: 36px; height: 36px; flex: none; }
#efmchat-root .efmchat-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	display: grid;
	place-items: center;
}
#efmchat-root .efmchat-avatar svg, #efmchat-root .efmchat-badge svg { width: 100%; height: 100%; display: block; }
#efmchat-root .efmchat-avatarimg { width: 100%; height: 100%; object-fit: cover; display: block; }
#efmchat-root .efmchat-avatarinitials {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	background: var(--efm-navy);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
}
#efmchat-root .efmchat-badge {
	position: absolute;
	right: -3px;
	bottom: -3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--efm-dteal);
	overflow: hidden;
	background: #fff;
	display: grid;
	place-items: center;
}
#efmchat-root .efmchat-headtext { min-width: 0; flex: 1; }
#efmchat-root .efmchat-title { font-weight: 700; font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#efmchat-root .efmchat-status { font-size: 11.5px; opacity: .88; margin-top: 2px; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#efmchat-root .efmchat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--efm-green); flex: none; box-shadow: 0 0 0 2px rgba( 255, 255, 255, .25 ); }
/* AI disclosure pill (0.2.2): lime icon + white "AI" on a translucent pill,
   top right, immediately left of the close button. flex:none so it never
   shrinks; the title block (min-width:0 + ellipsis) gives way instead. */
#efmchat-root .efmchat-aipill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: none;
	padding: 3px 9px 3px 7px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .12 );
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .02em;
	cursor: default;
}
#efmchat-root .efmchat-aipill svg { width: 16px; height: 16px; display: block; flex: none; color: #ffffff; }
#efmchat-root .efmchat-close {
	margin-left: 0;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	color: #fff;
	opacity: .85;
	display: grid;
	place-items: center;
	flex: none;
}
#efmchat-root .efmchat-close:hover { background: rgba( 255, 255, 255, .16 ); opacity: 1; }
#efmchat-root .efmchat-close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* --- Header menu, ended-chat actions and "Your chats" (0.3.3) --- */
#efmchat-root .efmchat-menubtn {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	color: #fff;
	opacity: .85;
	display: grid;
	place-items: center;
	flex: none;
}
#efmchat-root .efmchat-menubtn:hover { background: rgba( 255, 255, 255, .16 ); opacity: 1; }
#efmchat-root .efmchat-menubtn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
#efmchat-root .efmchat-menu {
	position: absolute;
	top: 56px;
	right: 12px;
	z-index: 6;
	min-width: 170px;
	padding: 6px;
	background: var(--efm-surface);
	border: 1px solid var(--efm-line);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba( 0, 0, 0, .22 );
}
#efmchat-root .efmchat-menuitem {
	display: block;
	width: 100%;
	padding: 9px 12px;
	border-radius: 8px;
	text-align: left;
	font-size: 13.5px;
	color: var(--efm-ink);
	background: none;
}
#efmchat-root .efmchat-menuitem:hover { background: var(--efm-bg); }
#efmchat-root .efmchat-menuitem:focus-visible { outline: 2px solid var(--efm-mteal); outline-offset: -2px; }
#efmchat-root .efmchat-endactions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0 4px; }
#efmchat-root .efmchat-endbtn {
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	background: var(--efm-mteal);
	color: #fff;
	border: 1px solid var(--efm-mteal);
}
#efmchat-root .efmchat-endbtn:hover { background: var(--efm-dteal); border-color: var(--efm-dteal); }
#efmchat-root .efmchat-endbtn.efmchat-endbtn-alt { background: var(--efm-surface); color: var(--efm-dteal); border-color: var(--efm-line); }
#efmchat-root .efmchat-endbtn.efmchat-endbtn-alt:hover { border-color: var(--efm-mteal); }
#efmchat-root .efmchat-endbtn:focus-visible { outline: 2px solid var(--efm-mteal); outline-offset: 2px; }
#efmchat-root .efmchat-chats {
	position: absolute;
	top: 64px;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	background: var(--efm-bg);
}
#efmchat-root .efmchat-chatshead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--efm-line); background: var(--efm-surface); flex: none; }
#efmchat-root .efmchat-chatsback { color: var(--efm-dteal); text-decoration: underline; font-size: 12.5px; }
#efmchat-root .efmchat-chatsback:focus-visible { outline: 2px solid var(--efm-mteal); outline-offset: 2px; }
#efmchat-root .efmchat-chatstitle { font-size: 14px; font-weight: 700; color: var(--efm-ink); }
#efmchat-root .efmchat-chatlist { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
#efmchat-root .efmchat-chatempty { color: var(--efm-mut); font-size: 13px; text-align: center; margin: 20px 0; }
#efmchat-root .efmchat-chatsfoot { flex: none; padding: 4px 14px 10px; border-top: 1px solid var(--efm-line); background: var(--efm-surface); }
#efmchat-root .efmchat-chatsclear { min-height: 44px; color: var(--efm-dteal); text-decoration: underline; font-size: 12.5px; }
#efmchat-root .efmchat-chatsclear:focus-visible { outline: 2px solid var(--efm-mteal); outline-offset: 2px; }
#efmchat-root .efmchat-chatsconfirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0 0; }
#efmchat-root .efmchat-chatsask { flex: 1 0 100%; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--efm-ink); }
#efmchat-root .efmchat-chatitem {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	padding: 10px 12px;
	text-align: left;
	background: var(--efm-surface);
	border: 1px solid var(--efm-line);
	border-radius: 10px;
	color: var(--efm-ink);
}
#efmchat-root button.efmchat-chatitem:hover { border-color: var(--efm-mteal); }
#efmchat-root button.efmchat-chatitem:focus-visible { outline: 2px solid var(--efm-mteal); outline-offset: 2px; }
#efmchat-root .efmchat-chatitem-ended { cursor: default; opacity: .7; }
#efmchat-root .efmchat-chattitle { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
#efmchat-root .efmchat-chatmeta { font-size: 11px; color: var(--efm-mut); }
#efmchat-root .efmchat-chatstate { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--efm-dteal); }

/* --- Message log: 12px side padding, grouped bubbles, one avatar per group --- */
#efmchat-root .efmchat-log { flex: 1; min-height: 140px; overflow-y: auto; background: var(--efm-bg); padding: 16px 12px; }
#efmchat-root .efmchat-group { margin-bottom: 12px; }
#efmchat-root .efmchat-group:last-child { margin-bottom: 0; }
#efmchat-root .efmchat-row { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 4px; }
#efmchat-root .efmchat-row:last-child { margin-bottom: 0; }
#efmchat-root .efmchat-row.efmchat-out { flex-direction: row-reverse; }
#efmchat-root .efmchat-msgav { width: 28px; height: 28px; border-radius: 50%; flex: none; overflow: hidden; background: var(--efm-surface); border: 1px solid var(--efm-line); }
#efmchat-root .efmchat-msgav.efmchat-spacer { visibility: hidden; }
#efmchat-root .efmchat-namelabel { font-size: 10.5px; font-weight: 700; color: var(--efm-mut); margin: 0 0 3px 36px; }
#efmchat-root .efmchat-msgbubble { max-width: 80%; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
#efmchat-root .efmchat-msgbubble.efmchat-in { background: var(--efm-surface); border: 1px solid var(--efm-line); color: var(--efm-ink); border-bottom-left-radius: 4px; }
#efmchat-root .efmchat-msgbubble.efmchat-out { background: var(--efm-mteal); color: #fff; border-bottom-right-radius: 4px; }
#efmchat-root .efmchat-msgbubble ul { margin: 4px 0; padding-left: 20px; white-space: normal }
#efmchat-root .efmchat-msgbubble li { margin: 2px 0 }
#efmchat-root .efmchat-msgbubble a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; word-break: normal; }
#efmchat-root .efmchat-msgbubble.efmchat-in a { color: var(--efm-mteal); }
#efmchat-root .efmchat-time { font-size: 10.5px; color: var(--efm-mut); margin-top: 2px; }
#efmchat-root .efmchat-time.efmchat-in { margin-left: 36px; }
#efmchat-root .efmchat-time.efmchat-out { text-align: right; }
#efmchat-root .efmchat-sys { text-align: center; font-size: 11.5px; color: var(--efm-mut); margin: 4px auto 12px; max-width: 92%; }
/* 0.5.1: the "still working" tick line reads like a normal assistant reply (same look as .efmchat-msgbubble.efmchat-in),
   left aligned under the avatar column (28px avatar + 8px gap = 36px). Contrast ink on surface is far above 4.5:1. */
#efmchat-root .efmchat-sys.efmchat-interim { box-sizing: border-box; width: fit-content; max-width: 80%; margin: 4px 0 12px 36px; padding: 10px 12px; text-align: left; font-size: 14px; line-height: 1.45; color: var(--efm-ink); background: var(--efm-surface); border: 1px solid var(--efm-line); border-radius: 14px; border-bottom-left-radius: 4px; word-wrap: break-word; }
#efmchat-root .efmchat-source { font-size: 11px; color: var(--efm-dteal); margin: 6px 0 0 2px; }
#efmchat-root .efmchat-handoffbar { display: flex; justify-content: flex-start; margin: 4px 0 8px; }

/* Small inline text-link controls ("Talk to a human", "Change"). */
#efmchat-root .efmchat-linklike { color: var(--efm-dteal); text-decoration: underline; font-size: inherit; }

/* Pending-reply loader: three animated dots in an incoming bubble. */
#efmchat-root .efmchat-typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px; }
#efmchat-root .efmchat-typing span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.35; animation: efmchat-blink 1.2s infinite; }
#efmchat-root .efmchat-typing span:nth-child( 2 ) { animation-delay: 0.2s; }
#efmchat-root .efmchat-typing span:nth-child( 3 ) { animation-delay: 0.4s; }
@keyframes efmchat-blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
@media ( prefers-reduced-motion: reduce ) { #efmchat-root .efmchat-typing span { animation: none; opacity: 0.5; } }

/* --- Composer: auto-growing textarea (1-4 rows via max-height, then scrolls),
   circular attach/send icon buttons, a removable staged-file chip --- */
#efmchat-root .efmchat-composer { border-top: 1px solid var(--efm-line); background: var(--efm-surface); padding: 10px 12px 8px; flex: none; }
#efmchat-root .efmchat-chip { display: flex; align-items: center; gap: 6px; background: var(--efm-bg); border: 1px solid var(--efm-line); border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 11.5px; color: var(--efm-ink); margin-bottom: 8px; width: fit-content; }
#efmchat-root .efmchat-chip button { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; line-height: 1; color: var(--efm-mut); }
#efmchat-root .efmchat-chip button:hover { background: var(--efm-line); }
#efmchat-root .efmchat-inrow { display: flex; gap: 8px; align-items: flex-end; }
#efmchat-root .efmchat-textarea { border: 1px solid var(--efm-line); border-radius: 9px; padding: 9px 11px; font: inherit; font-size: 13.5px; background: var(--efm-bg); color: var(--efm-ink); resize: vertical; cursor: text; }
#efmchat-root .efmchat-composerinput { flex: 1; resize: none; border-radius: 16px; padding: 9px 13px; font-size: 14px; line-height: 1.4; max-height: 92px; overflow-y: auto; }
#efmchat-root .efmchat-textarea:focus-visible, #efmchat-root .efmchat-textarea:focus { outline: 2px solid var(--efm-mteal); outline-offset: 1px; border-color: var(--efm-mteal); }
#efmchat-root .efmchat-iconbtn, #efmchat-root .efmchat-sendbtn {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	flex: none;
}
#efmchat-root .efmchat-iconbtn { border: 1px solid var(--efm-line); background: var(--efm-surface); color: var(--efm-mut); }
#efmchat-root .efmchat-iconbtn:hover { border-color: var(--efm-mteal); color: var(--efm-mteal); }
#efmchat-root .efmchat-iconbtn:disabled { opacity: .5; cursor: wait; }
#efmchat-root .efmchat-iconbtn:focus-visible, #efmchat-root .efmchat-sendbtn:focus-visible { outline: 2px solid var(--efm-mteal); outline-offset: 2px; }
#efmchat-root .efmchat-sendbtn { background: var(--efm-mteal); color: #fff; }
#efmchat-root .efmchat-sendbtn:hover { background: var(--efm-dteal); }
#efmchat-root .efmchat-hint { font-size: 10.5px; color: var(--efm-mut); margin-top: 7px; text-align: center; }

#efmchat-root .efmchat-filechip { display: block; margin-top: 6px; padding: 5px 9px; border: 1px solid var(--efm-line); border-radius: 8px; background: var(--efm-surface); color: var(--efm-dteal); font: inherit; font-size: 12px; text-align: left; overflow-wrap: anywhere; word-break: normal; }
#efmchat-root .efmchat-filechip:hover { border-color: var(--efm-mteal); }

/* Small text-button forms (email capture/change, CSAT feedback, hand-over ticket). */
#efmchat-root .efmchat-emailbar, #efmchat-root .efmchat-feedback { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 0; }
#efmchat-root .efmchat-feedback { flex-direction: column; }
/* Pre-chat name + email form: a compact card under the contact-ask bubble (0.2.5, card 0.4.3). */
#efmchat-root .efmchat-gate { display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; margin: 4px 0 0 36px; max-width: calc( 100% - 36px ); padding: 14px; background: var(--efm-surface); border: 1px solid var(--efm-line); border-radius: 12px; box-shadow: 0 1px 2px rgba( 15, 35, 64, .06 ), 0 8px 24px rgba( 15, 35, 64, .08 ); }
#efmchat-root .efmchat-gatefield { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#efmchat-root .efmchat-gatefield .efmchat-gatelabel { margin: 0; font-size: 12px; font-weight: 700; color: var(--efm-navy); }
#efmchat-root .efmchat-gatefield .efmchat-input { flex: none; box-sizing: border-box; width: 100%; min-width: 0; height: 40px; padding: 0 12px; font-size: 14px; line-height: 1.2; background: var(--efm-surface); border: 1px solid var(--efm-line); border-radius: 9px; }
#efmchat-root .efmchat-gatefield .efmchat-input::placeholder { color: var(--efm-mut); opacity: 1; }
#efmchat-root .efmchat-gatefield .efmchat-input:hover { border-color: var(--efm-mteal); }
#efmchat-root .efmchat-gatefield .efmchat-input:focus, #efmchat-root .efmchat-gatefield .efmchat-input:focus-visible { outline: 3px solid rgba( 38, 140, 112, .35 ); outline-offset: 0; border-color: var(--efm-mteal); }
#efmchat-root .efmchat-gatefield .efmchat-input[aria-invalid="true"] { border-color: #b42318; background: #fff8f7; }
#efmchat-root .efmchat-gatefield .efmchat-input[aria-invalid="true"]:focus, #efmchat-root .efmchat-gatefield .efmchat-input[aria-invalid="true"]:focus-visible { outline-color: rgba( 180, 35, 24, .3 ); border-color: #b42318; }
#efmchat-root .efmchat-gateerr { margin: 0; font-size: 12px; line-height: 1.35; font-weight: 600; color: #b42318; }
#efmchat-root .efmchat-gateerr:empty { display: none; }
#efmchat-root .efmchat-send.efmchat-gatego { box-sizing: border-box; width: 100%; min-height: 42px; padding: 0 16px; border-radius: 9px; font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; }
#efmchat-root .efmchat-send.efmchat-gatego:focus-visible { outline: 3px solid rgba( 38, 140, 112, .35 ); outline-offset: 2px; }
#efmchat-root .efmchat-send.efmchat-gatego:disabled { opacity: .6; cursor: not-allowed; }
#efmchat-root .efmchat-textarea:disabled, #efmchat-root .efmchat-sendbtn:disabled, #efmchat-root .efmchat-linklike:disabled { opacity: .5; cursor: not-allowed; }
#efmchat-root .efmchat-fblabel { font-size: 11px; font-weight: 700; color: var(--efm-mut); margin-bottom: 4px; }
#efmchat-root .efmchat-input { flex: 1; padding: 9px 11px; border: 1px solid var(--efm-line); border-radius: 9px; font: inherit; font-size: 13.5px; background: var(--efm-surface); color: var(--efm-ink); cursor: text; }
#efmchat-root .efmchat-input:focus-visible, #efmchat-root .efmchat-input:focus { outline: 2px solid var(--efm-mteal); border-color: var(--efm-mteal); }
#efmchat-root .efmchat-send { padding: 7px 14px; border-radius: 8px; background: var(--efm-mteal); color: #fff; font: inherit; font-size: 12px; font-weight: 700; }
#efmchat-root .efmchat-send:hover { background: var(--efm-dteal); }

/* "Talk to a human" sits between the messages and the message box (0.5.0). */
#efmchat-root .efmchat-humanrow { text-align: center; font-size: 11.5px; padding: 6px 0; flex: none; background: var(--efm-surface); border-top: 1px solid var(--efm-line); }
#efmchat-root .efmchat-humanrow:not( [hidden] ) + .efmchat-composer { border-top: 0; }

#efmchat-root .efmchat-footer { text-align: center; font-size: 10.5px; color: var(--efm-mut); padding: 6px 0 12px; flex: none; }

/* --- CSAT: 1-5 stars (fill 1..N, never only the chosen star) + feedback box --- */
#efmchat-root .efmchat-csat { background: var(--efm-surface); border: 1px solid var(--efm-line); border-radius: 12px; padding: 12px; text-align: center; margin-top: 2px; }
#efmchat-root .efmchat-csat-q { font-size: 12.5px; margin-bottom: 8px; font-weight: 600; }
#efmchat-root .efmchat-stars { display: flex; gap: 5px; justify-content: center; }
#efmchat-root .efmchat-star { width: 26px; height: 26px; display: grid; place-items: center; color: #F5B301; font-size: 20px; line-height: 1; }
#efmchat-root .efmchat-star:focus-visible { outline: 2px solid var(--efm-mteal); border-radius: 4px; }

#efmchat-root .efmchat-mcp { padding: 2px 12px 2px; text-align: center; flex: none; }
#efmchat-root .efmchat-mcp-toggle { color: var(--efm-mut); font: inherit; font-size: 11px; text-decoration: underline; padding: 3px 0; }
#efmchat-root .efmchat-mcp-toggle:focus-visible { outline: 2px solid var(--efm-mteal); }
#efmchat-root .efmchat-mcp-body { margin-top: 6px; }
#efmchat-root .efmchat-mcp-note { font-size: 11.5px; color: var(--efm-mut); margin: 0 0 6px; }
#efmchat-root .efmchat-mcp-row { display: flex; gap: 6px; align-items: center; }
#efmchat-root .efmchat-mcp-url { flex: 1; font-size: 11px; background: var(--efm-bg); padding: 5px 7px; border-radius: 6px; overflow-x: auto; white-space: nowrap; }
#efmchat-root .efmchat-mcp-copy { border: 1px solid var(--efm-line); background: var(--efm-surface); border-radius: 6px; padding: 4px 8px; font-size: 11px; }

@media ( prefers-color-scheme: dark ) {
	#efmchat-root:not( [data-theme="light"] ) {
		--efm-surface: #16181c;
		--efm-bg: #101216;
		--efm-ink: #e8e8ea;
		--efm-mut: #9fb0c7;
		--efm-line: #2a3852;
	}
	#efmchat-root:not( [data-theme="light"] ) .efmchat-avatar { background: #1e2127; }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-badge { background: #1e2127; border-color: var(--efm-dteal); }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-msgav { background: var(--efm-surface); border-color: var(--efm-line); }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-msgbubble.efmchat-in,
	#efmchat-root:not( [data-theme="light"] ) .efmchat-sys.efmchat-interim { background: #1e2127; color: #e8e8ea; border-color: var(--efm-line); }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-composer,
	#efmchat-root:not( [data-theme="light"] ) .efmchat-csat,
	#efmchat-root:not( [data-theme="light"] ) .efmchat-filechip { background: #1e2127; border-color: var(--efm-line); }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-textarea,
	#efmchat-root:not( [data-theme="light"] ) .efmchat-input,
	#efmchat-root:not( [data-theme="light"] ) .efmchat-iconbtn,
	#efmchat-root:not( [data-theme="light"] ) .efmchat-chip { background: #1e2127; color: #e8e8ea; border-color: var(--efm-line); }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-mcp-url,
	#efmchat-root:not( [data-theme="light"] ) .efmchat-mcp-copy { background: #1e2127; color: #e8e8ea; border-color: var(--efm-line); }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-filechip { color: #8fd3c7; }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-menu,
	#efmchat-root:not( [data-theme="light"] ) .efmchat-chatshead,
	#efmchat-root:not( [data-theme="light"] ) .efmchat-chatsfoot,
	#efmchat-root:not( [data-theme="light"] ) .efmchat-chatitem,
	#efmchat-root:not( [data-theme="light"] ) .efmchat-endbtn.efmchat-endbtn-alt { background: #1e2127; border-color: var(--efm-line); }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-menuitem:hover { background: #2a2f38; }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-endbtn.efmchat-endbtn-alt { color: #8fd3c7; }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-gate { background: #1e2127; box-shadow: 0 1px 2px rgba( 0, 0, 0, .4 ), 0 8px 24px rgba( 0, 0, 0, .35 ); }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-gatefield .efmchat-gatelabel { color: #e8e8ea; }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-gatefield .efmchat-input { background: #16181c; }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-gatefield .efmchat-input[aria-invalid="true"] { background: #2a1a1a; border-color: #ff8a80; }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-gateerr { color: #ff8a80; }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-aipill { background: rgba( 255, 255, 255, .12 ); box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .16 ); }
}

/* Inline images and lightbox (0.3.0). */
#efmchat-root .efmchat-imgbtn { display: block; margin-top: 6px; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 10px; }
#efmchat-root .efmchat-imgbtn:focus-visible { outline: 3px solid var(--efm-mteal); outline-offset: 2px; }
#efmchat-root .efmchat-inlineimg { display: block; max-width: 100%; max-height: 220px; height: auto; border-radius: 10px; border: 1px solid var(--efm-line); }
#efmchat-root .efmchat-imgloading { margin-top: 6px; padding: 14px 18px; border: 1px dashed var(--efm-line); border-radius: 10px; color: var(--efm-mut); font-size: 12px; }
#efmchat-root .efmchat-lightbox { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483646; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba( 15, 35, 64, 0.82 ); }
#efmchat-root .efmchat-lightbox-img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; background: #fff; }
#efmchat-root .efmchat-lightbox-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--efm-navy); font-size: 24px; line-height: 1; display: grid; place-items: center; box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.35 ); }
#efmchat-root .efmchat-lightbox-close:focus-visible { outline: 3px solid var(--efm-mteal); outline-offset: 2px; }

/* Drop-zone highlight over the open panel (0.3.0). */
#efmchat-root .efmchat-dropzone { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; display: grid; place-items: center; margin: 8px; border: 2px dashed var(--efm-mteal); border-radius: 12px; background: rgba( 38, 140, 112, 0.14 ); color: var(--efm-dteal); font-size: 15px; font-weight: 700; text-align: center; pointer-events: none; animation: efmchat-dropfade 0.15s ease-out; }
@keyframes efmchat-dropfade { from { opacity: 0; } to { opacity: 1; } }
@media ( prefers-reduced-motion: reduce ) { #efmchat-root .efmchat-dropzone { animation: none; } }
@media ( prefers-color-scheme: dark ) {
	#efmchat-root:not( [data-theme="light"] ) .efmchat-dropzone { color: #8fd3c7; background: rgba( 38, 140, 112, 0.22 ); }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-imgloading { border-color: var(--efm-line); }
}

/* --- Product suggestions (0.5.0): carousel below "Connect via MCP", above the footer --- */
#efmchat-root .efmchat-cards { flex: none; background: var(--efm-surface); border-top: 1px solid var(--efm-line); padding: 0 12px 8px; }
#efmchat-root .efmchat-cardbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
#efmchat-root .efmchat-cardcap { font-size: 11px; font-weight: 700; color: var(--efm-mut); letter-spacing: 0.02em; }
#efmchat-root .efmchat-cardctl { display: flex; align-items: center; }
#efmchat-root .efmchat-cardnav { display: grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 8px; color: var(--efm-dteal); font-size: 22px; line-height: 1; text-align: center; }
#efmchat-root .efmchat-cardnav:hover { background: var(--efm-bg); }
#efmchat-root .efmchat-cardnav:focus-visible { outline: 3px solid var(--efm-mteal); outline-offset: -3px; }
#efmchat-root .efmchat-cardpause { font-size: 12px; letter-spacing: -1px; }
#efmchat-root .efmchat-cardtoggle { transform: rotate( 90deg ); }
#efmchat-root .efmchat-cardtoggle[aria-expanded="false"] { transform: rotate( -90deg ); }
#efmchat-root .efmchat-cardview { overflow: hidden; }
#efmchat-root .efmchat-cardlist { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; transition: transform 0.5s ease; will-change: transform; }
#efmchat-root .efmchat-card { flex: 0 0 calc( ( 100% - 16px ) / 3 ); min-width: 0; margin: 0; padding: 0; border: 1px solid var(--efm-line); border-radius: 10px; overflow: hidden; background: var(--efm-surface); }
#efmchat-root .efmchat-cardlink { display: block; color: var(--efm-ink); text-decoration: none; }
#efmchat-root .efmchat-cardlink:hover .efmchat-cardtitle { color: var(--efm-dteal); text-decoration: underline; }
#efmchat-root .efmchat-cardlink:focus-visible { outline: 3px solid var(--efm-mteal); outline-offset: -3px; }
#efmchat-root .efmchat-cardpic { display: block; aspect-ratio: 16 / 10; background: var(--efm-bg); overflow: hidden; }
#efmchat-root .efmchat-cardimg { display: block; width: 100%; height: 100%; object-fit: cover; }
#efmchat-root .efmchat-cardtitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 43px; padding: 6px 8px 7px; font-size: 11.5px; line-height: 1.3; font-weight: 600; }
/* Narrow screens: a native scroll strip with snap points, 2.5 cards in view. */
@media ( max-width: 480px ) {
	#efmchat-root .efmchat-cards { padding: 0 12px 6px; }
	#efmchat-root .efmchat-cardview { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	#efmchat-root .efmchat-cardview::-webkit-scrollbar { display: none; }
	#efmchat-root .efmchat-cardlist { transition: none; }
	#efmchat-root .efmchat-card { flex: 0 0 calc( ( 100% - 16px ) / 2.5 ); scroll-snap-align: start; }
}
/* No animation for visitors who turned it off (the script does not rotate either). */
@media ( prefers-reduced-motion: reduce ) {
	#efmchat-root .efmchat-cardlist { transition: none; }
	#efmchat-root .efmchat-cardview { scroll-behavior: auto; }
}
/* Short windows: the message box is never squeezed. Pictures go first, then the whole carousel. */
@media ( max-height: 700px ) {
	#efmchat-root .efmchat-cardpic { display: none; }
	#efmchat-root .efmchat-cardtitle { -webkit-line-clamp: 1; min-height: 0; }
}
@media ( max-height: 520px ) {
	#efmchat-root .efmchat-cards { display: none; }
}

/* --- Email confirmation code box (0.5.0): one small form inside the conversation --- */
#efmchat-root .efmchat-vbox { display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; margin: 4px 0 12px 36px; max-width: calc( 100% - 36px ); padding: 12px; background: var(--efm-surface); border: 1px solid var(--efm-line); border-radius: 12px; box-shadow: 0 1px 2px rgba( 15, 35, 64, .06 ), 0 8px 24px rgba( 15, 35, 64, .08 ); }
#efmchat-root .efmchat-vbox-title { margin: 0; font-size: 13px; font-weight: 700; color: var(--efm-ink); }
#efmchat-root .efmchat-vbox-hint { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--efm-ink); overflow-wrap: anywhere; }
#efmchat-root .efmchat-vbox-label { font-size: 12px; font-weight: 600; color: var(--efm-ink); }
#efmchat-root .efmchat-vbox-input { box-sizing: border-box; width: 100%; min-width: 0; height: 42px; padding: 0 12px; font-family: Consolas, ui-monospace, monospace; font-size: 18px; letter-spacing: 4px; background: var(--efm-surface); color: var(--efm-ink); border: 1px solid var(--efm-line); border-radius: 9px; cursor: text; }
#efmchat-root .efmchat-vbox-input:hover { border-color: var(--efm-mteal); }
#efmchat-root .efmchat-vbox-input:focus, #efmchat-root .efmchat-vbox-input:focus-visible { outline: 3px solid rgba( 38, 140, 112, .35 ); outline-offset: 0; border-color: var(--efm-mteal); }
#efmchat-root .efmchat-vbox-input:disabled { opacity: .6; cursor: not-allowed; }
#efmchat-root .efmchat-vbox-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
#efmchat-root .efmchat-vbox-confirm { min-height: 40px; padding: 0 18px; display: inline-flex; align-items: center; background: var(--efm-dteal); font-size: 13px; }
#efmchat-root .efmchat-vbox-confirm:hover { background: var(--efm-navy); }
#efmchat-root .efmchat-vbox-confirm:disabled { opacity: .6; cursor: not-allowed; }
#efmchat-root .efmchat-vbox-resend, #efmchat-root .efmchat-vbox-skip, #efmchat-root .efmchat-vbox-cancel { min-height: 40px; display: inline-flex; align-items: center; font-size: 12.5px; }
#efmchat-root .efmchat-vbox-confirm:focus-visible, #efmchat-root .efmchat-vbox-resend:focus-visible, #efmchat-root .efmchat-vbox-skip:focus-visible, #efmchat-root .efmchat-vbox-cancel:focus-visible { outline: 3px solid var(--efm-mteal); outline-offset: 2px; }
#efmchat-root .efmchat-vbox-status { margin: 0; min-height: 1.45em; font-size: 12.5px; line-height: 1.45; color: var(--efm-ink); }
@media ( prefers-color-scheme: dark ) {
	#efmchat-root:not( [data-theme="light"] ) .efmchat-humanrow { background: var(--efm-surface); }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-vbox { background: #1e2127; box-shadow: 0 1px 2px rgba( 0, 0, 0, .4 ), 0 8px 24px rgba( 0, 0, 0, .35 ); }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-vbox-input { background: #16181c; color: #e8e8ea; border-color: var(--efm-line); }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-vbox-confirm { background: var(--efm-mteal); color: #0b1a14; }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-vbox-resend,
	#efmchat-root:not( [data-theme="light"] ) .efmchat-vbox-skip,
	#efmchat-root:not( [data-theme="light"] ) .efmchat-vbox-cancel,
	#efmchat-root:not( [data-theme="light"] ) .efmchat-chatsclear,
	#efmchat-root:not( [data-theme="light"] ) .efmchat-cardnav { color: #8fd3c7; }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-cardnav:hover { background: #1e2127; }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-card { background: #1e2127; }
}

/* --- Earlier chats and email confirmation (Release 3, stream F) --- */
#efmchat-root .efmchat-ec-view { position: absolute; top: 64px; right: 0; bottom: 0; left: 0; z-index: 6; display: flex; flex-direction: column; background: var(--efm-bg); color: var(--efm-ink); overflow-y: auto; }
#efmchat-root .efmchat-ec-body { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }
#efmchat-root .efmchat-ec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--efm-line); }
#efmchat-root .efmchat-ec-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--efm-ink); }
#efmchat-root .efmchat-ec-title:focus-visible { outline: 2px solid var(--efm-mteal); outline-offset: 2px; }
#efmchat-root .efmchat-ec-back { color: var(--efm-dteal); text-decoration: underline; font-size: 12.5px; background: none; border: 0; cursor: pointer; }
#efmchat-root .efmchat-ec-back:focus-visible { outline: 2px solid var(--efm-mteal); outline-offset: 2px; }
#efmchat-root .efmchat-ec-label { font-size: 12.5px; font-weight: 600; color: var(--efm-ink); }
#efmchat-root .efmchat-ec-input { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--efm-line); border-radius: 8px; background: var(--efm-surface); color: var(--efm-ink); font-size: 14px; }
#efmchat-root .efmchat-ec-input:focus-visible { outline: 2px solid var(--efm-mteal); outline-offset: 1px; }
#efmchat-root .efmchat-ec-primary { padding: 9px 14px; border: 1px solid var(--efm-dteal); border-radius: 8px; background: var(--efm-dteal); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
#efmchat-root .efmchat-ec-primary:hover { background: var(--efm-navy); border-color: var(--efm-navy); }
#efmchat-root .efmchat-ec-primary:disabled { opacity: 0.6; cursor: default; }
#efmchat-root .efmchat-ec-primary:focus-visible { outline: 2px solid var(--efm-mteal); outline-offset: 2px; }
#efmchat-root .efmchat-ec-status { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--efm-ink); }
#efmchat-root .efmchat-ec-codestatus { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--efm-ink); }
#efmchat-root .efmchat-ec-code { font-family: Consolas, ui-monospace, monospace; font-size: 18px; letter-spacing: 4px; }
#efmchat-root .efmchat-ec-list { display: flex; flex-direction: column; gap: 8px; }
#efmchat-root .efmchat-ec-item { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--efm-line); border-radius: 10px; background: var(--efm-surface); color: var(--efm-ink); font-size: 13px; text-align: left; cursor: pointer; }
#efmchat-root .efmchat-ec-item:hover { border-color: var(--efm-mteal); }
#efmchat-root .efmchat-ec-item:focus-visible { outline: 2px solid var(--efm-mteal); outline-offset: 2px; }
#efmchat-root .efmchat-ec-log { display: flex; flex-direction: column; gap: 8px; }
#efmchat-root .efmchat-ec-msg { max-width: 86%; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
#efmchat-root .efmchat-ec-msg-visitor { align-self: flex-end; background: var(--efm-dteal); color: #fff; }
#efmchat-root .efmchat-ec-msg-staff { align-self: flex-start; background: var(--efm-surface); color: var(--efm-ink); border: 1px solid var(--efm-line); }
#efmchat-root .efmchat-ec-msg-system { align-self: center; background: none; color: var(--efm-mut); font-size: 11.5px; text-align: center; }
#efmchat-root .efmchat-ec-author { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; color: var(--efm-dteal); }
#efmchat-root .efmchat-ec-file { margin-top: 4px; font-size: 11.5px; font-style: italic; }
@media ( prefers-color-scheme: dark ) {
	#efmchat-root:not( [data-theme="light"] ) .efmchat-ec-input,
	#efmchat-root:not( [data-theme="light"] ) .efmchat-ec-item,
	#efmchat-root:not( [data-theme="light"] ) .efmchat-ec-msg-staff { background: #1e2127; color: #e8e8ea; border-color: var(--efm-line); }
	#efmchat-root:not( [data-theme="light"] ) .efmchat-ec-back,
	#efmchat-root:not( [data-theme="light"] ) .efmchat-ec-author { color: #8fd3c7; }
}