/*
 * "Asistent proiect" (stream 17): page-templates/assistant.php and assets/js/assistant.js. Loaded on that page only.
 * Mobile first (360 px up): the chat fills the screen with the message box stuck to the bottom; the materials list
 * follows it. From 1024 px: chat on the left, the list on the right (both scroll on their own).
 * Colours are the shop's own (see partner.css): #00a3e1 accents, #0070a8 / #005a87 for buttons, links and numbers
 * (white or body text on #00a3e1 is under WCAG AA). Fonts: the theme's Open Sans 500 and Nunito 400.
 * Motion: only the "typing" dots and a short blink of the mascot, both off under prefers-reduced-motion.
 */

.ea {
	--ea-cyan: #00a3e1;
	--ea-blue: #0070a8;
	--ea-blue-d: #005a87;
	--ea-ink: #333e48;
	--ea-muted: #56636f;
	--ea-line: #d6e2e9;
	--ea-tint: #e5f6fd;
	--ea-tint-2: #f3fafd;
	--ea-bg: #f5f8fa;
	--ea-ok: #1e7b3a;
	--ea-warn: #8a5300;
	--ea-err: #b42318;
	--ea-r: 14px;
	--ea-head: "Open Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--ea-ink);
	font-size: 1rem;
	line-height: 1.5;
}
body.ec-assistant .content-area.ea { flex: 0 0 auto; width: 100%; max-width: 100%; }
.ea *,
.ea *::before,
.ea *::after { box-sizing: border-box; }
.ea p { margin: 0; }
.ea ul { margin: 0; padding: 0; list-style: none; }
.ea a { color: var(--ea-blue); text-decoration: underline; text-underline-offset: 2px; }
.ea a:hover { color: var(--ea-blue-d); }
.ea :focus-visible { outline: 3px solid var(--ea-blue); outline-offset: 2px; }
.ea-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}
.ea button { font: inherit; }

/* ---------- Header ---------- */
.ea-head { padding: 14px 0 10px; }
.ea-head__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ea-title {
	margin: 0;
	font-family: var(--ea-head);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--ea-ink);
}
.ea-badge {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 2px 10px 2px 3px;
	border: 1px solid var(--ea-line);
	border-radius: 999px;
	font-size: .8125rem;
	color: var(--ea-muted);
	background: #fff;
}
.ea-demo-flag {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	background: #fff1bf;
	color: #5c4300;
	font-size: .8125rem;
	font-family: var(--ea-head);
	font-weight: 500;
}
.ea-lead { margin-top: 6px; color: var(--ea-muted); font-size: .9375rem; max-width: 60ch; }
.ea-off { margin: 12px 0 24px; padding: 14px; background: var(--ea-tint-2); border-radius: var(--ea-r); }

/* ---------- Tabs ---------- */
.ea-tabs { display: flex; gap: 4px; margin: 4px 0 10px; border-bottom: 1px solid var(--ea-line); }
.ea-tab {
	min-height: 44px;
	padding: 8px 14px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	color: var(--ea-muted);
	font-family: var(--ea-head);
	font-weight: 500;
	cursor: pointer;
}
.ea-tab.is-on { color: var(--ea-blue-d); border-bottom-color: var(--ea-blue); }

/* ---------- Chat ---------- */
.ea-layout { display: block; }
.ea-chat {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ea-bg);
	border: 1px solid var(--ea-line);
	border-radius: var(--ea-r);
}
.ea-log { flex: 1 1 auto; padding: 12px 10px 4px; display: flex; flex-direction: column; gap: 12px; }
.ea-msg { display: flex; gap: 8px; align-items: flex-start; max-width: 100%; }
.ea-msg--user { justify-content: flex-end; }
.ea-avatar { flex: none; margin-top: 2px; }
.ea-bubble {
	min-width: 0;
	max-width: calc(100% - 40px);
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--ea-line);
	border-radius: 4px var(--ea-r) var(--ea-r) var(--ea-r);
	overflow-wrap: anywhere;
}
.ea-msg--user .ea-bubble {
	max-width: 88%;
	background: var(--ea-blue);
	border-color: var(--ea-blue);
	color: #fff;
	border-radius: var(--ea-r) 4px var(--ea-r) var(--ea-r);
	white-space: pre-wrap;
}
.ea-bubble p + p,
.ea-bubble p + ul,
.ea-bubble ul + p { margin-top: 8px; }
.ea-bubble ul { padding-left: 1.1em; list-style: disc; }
.ea-bubble li + li { margin-top: 2px; }
.ea-bubble strong { font-weight: 700; }
.ea-note { color: var(--ea-muted); font-size: .9375rem; }
.ea-status { color: var(--ea-muted); font-size: .875rem; font-style: italic; }
.ea-status:empty { display: none; }
.ea-error { color: var(--ea-err); }
.ea-tag {
	display: inline-block;
	margin-bottom: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background: #fff1bf;
	color: #5c4300;
	font-size: .75rem;
}
.ea-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ea-chip {
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid var(--ea-blue);
	border-radius: 999px;
	background: #fff;
	color: var(--ea-blue-d);
	font-size: .9375rem;
	line-height: 1.25;
	text-align: left;
	cursor: pointer;
}
.ea-chip:hover:not(:disabled) { background: var(--ea-tint); }
.ea-chip:disabled { opacity: .55; cursor: default; }
.ea-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.ea-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ea-cyan); animation: ea-dot 1.2s infinite ease-in-out; }
.ea-dots i:nth-child(2) { animation-delay: .15s; }
.ea-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ea-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.ea-msg.is-typing .ea-mascot__eye { animation: ea-blink 3.2s infinite; transform-origin: center; transform-box: fill-box; }
@keyframes ea-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.15); } }

/* Calculation and proposal cards inside the chat */
.ea-card {
	margin-top: 10px;
	padding: 10px 12px;
	background: var(--ea-tint-2);
	border: 1px solid var(--ea-line);
	border-radius: 10px;
	font-size: .9375rem;
}
.ea-card__title { font-family: var(--ea-head); font-weight: 500; color: var(--ea-blue-d); margin-bottom: 4px; }
.ea-card details { margin-top: 6px; }
.ea-card summary { cursor: pointer; color: var(--ea-blue); min-height: 44px; display: flex; align-items: center; }
.ea-rules { margin-top: 4px; font-size: .8125rem; color: var(--ea-muted); }
.ea-rules li + li { margin-top: 4px; }
.ea-mini { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.ea-mini .ea-btn { margin-top: 6px; }

/* Message box: stuck to the bottom of the chat while the chat is on screen */
.ea-form {
	position: sticky;
	bottom: 0;
	z-index: 2;
	padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
	background: #fff;
	border-top: 1px solid var(--ea-line);
	border-radius: 0 0 var(--ea-r) var(--ea-r);
}
.ea-form__row { display: flex; gap: 8px; align-items: flex-end; }
#ea-input {
	flex: 1 1 auto;
	min-height: 48px;
	max-height: 160px;
	padding: 12px;
	border: 1px solid #9fb3c0;
	border-radius: 12px;
	font: inherit;
	font-size: 1rem; /* 16 px: iOS doesn't zoom */
	line-height: 1.4;
	resize: none;
	color: var(--ea-ink);
	background: #fff;
}
#ea-input:focus { border-color: var(--ea-blue); outline: 2px solid var(--ea-blue); outline-offset: 0; }
.ea-send {
	flex: none;
	width: 48px; height: 48px;
	border: 0;
	border-radius: 12px;
	background: var(--ea-blue);
	color: #fff;
	cursor: pointer;
	display: grid; place-items: center;
}
.ea-send:hover:not(:disabled) { background: var(--ea-blue-d); }
.ea-send:disabled { background: #9fb3c0; cursor: default; }
.ea-hint { margin-top: 6px; font-size: .75rem; color: var(--ea-muted); line-height: 1.4; }
.ea-hint[hidden] { display: none; }
.ea-consent { display: flex; gap: 6px; align-items: center; margin-top: 4px; font-size: .75rem; color: var(--ea-muted); }
.ea-consent input { width: 18px; height: 18px; margin: 0; }
.ea-restart { text-align: right; padding: 4px 10px 8px; }
.ea-link { background: none; border: 0; padding: 8px 0; min-height: 44px; color: var(--ea-blue); text-decoration: underline; cursor: pointer; }

/* ---------- Materials list panel ---------- */
.ea-panel { margin-top: 16px; }
.ea-empty {
	padding: 16px;
	border: 1px dashed #9fb3c0;
	border-radius: var(--ea-r);
	color: var(--ea-muted);
	font-size: .9375rem;
	background: #fff;
}
.ea-empty__title { font-family: var(--ea-head); font-weight: 500; color: var(--ea-ink); margin-bottom: 4px; }
.ea-prop { background: #fff; border: 1px solid var(--ea-line); border-radius: var(--ea-r); padding: 14px 12px; }
.ea-prop__title { margin: 0 0 4px; font-family: var(--ea-head); font-weight: 500; font-size: 1.125rem; color: var(--ea-ink); }
.ea-prop__sum { color: var(--ea-muted); font-size: .9375rem; }
.ea-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 12px 0; }
.ea-tier {
	min-height: 56px;
	padding: 6px 4px;
	border: 1px solid var(--ea-line);
	border-radius: 10px;
	background: #fff;
	color: var(--ea-ink);
	cursor: pointer;
	line-height: 1.2;
}
.ea-tier b { display: block; font-family: var(--ea-head); font-weight: 500; font-size: .875rem; }
.ea-tier span { display: block; margin-top: 2px; font-size: .8125rem; color: var(--ea-blue-d); font-variant-numeric: tabular-nums; }
.ea-tier[aria-pressed="true"] { border: 2px solid var(--ea-blue); background: var(--ea-tint); }
.ea-score { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--ea-tint-2); }
.ea-score__num { font-family: var(--ea-head); font-weight: 500; font-size: 1.75rem; color: var(--ea-blue-d); font-variant-numeric: tabular-nums; line-height: 1; }
.ea-score__num small { font-size: .875rem; color: var(--ea-muted); }
.ea-score__label { font-size: .875rem; }
.ea-meter { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: #dbe6ec; overflow: hidden; }
.ea-meter i { display: block; height: 100%; background: var(--ea-blue); border-radius: 4px; }
.ea-score details { grid-column: 1 / -1; font-size: .875rem; }
.ea-score summary { cursor: pointer; color: var(--ea-blue); min-height: 44px; display: flex; align-items: center; }
.ea-score__cap { grid-column: 1 / -1; font-size: .75rem; color: var(--ea-muted); }
.ea-rubric li { padding: 8px 0; border-top: 1px solid var(--ea-line); }
.ea-rubric__head { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.ea-rubric__pts { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ea-blue-d); }
.ea-rubric__raise { color: var(--ea-warn); margin-top: 2px; }
.ea-lines { margin-top: 12px; }
.ea-line { padding: 10px 0; border-top: 1px solid var(--ea-line); }
.ea-line__role { font-size: .8125rem; color: var(--ea-muted); }
.ea-line__name { display: block; margin-top: 2px; font-weight: 600; line-height: 1.35; }
.ea-line__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: .8125rem; color: var(--ea-muted); }
.ea-line__price { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ea-line__price b { color: var(--ea-ink); }
.ea-line__why { margin-top: 4px; font-size: .875rem; }
.ea-line__same { font-size: .75rem; color: var(--ea-muted); }
.ea-fact { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--ea-tint); color: var(--ea-blue-d); font-size: .75rem; }
.ea-pick { display: inline-block; padding: 0 6px; border-radius: 6px; background: #e3f4e8; color: var(--ea-ok); font-size: .75rem; }
.ea-total { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 12px 0 4px; border-top: 2px solid var(--ea-ink); font-family: var(--ea-head); font-weight: 500; }
.ea-total b { font-size: 1.25rem; color: var(--ea-blue-d); font-variant-numeric: tabular-nums; }
.ea-vat { font-size: .75rem; color: var(--ea-muted); }
.ea-actions { display: grid; gap: 8px; margin-top: 12px; }
.ea-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px;
	padding: 10px 16px;
	border: 1px solid var(--ea-blue);
	border-radius: 10px;
	background: #fff;
	color: var(--ea-blue-d);
	font-family: var(--ea-head);
	font-weight: 500;
	text-decoration: none !important;
	cursor: pointer;
	text-align: center;
}
.ea-btn--primary { background: var(--ea-blue); color: #fff !important; }
.ea-btn--primary:hover { background: var(--ea-blue-d); }
.ea-btn:disabled { opacity: .6; cursor: default; }
.ea-msgline { font-size: .875rem; min-height: 1.3em; }
.ea-msgline.is-ok { color: var(--ea-ok); }
.ea-msgline.is-err { color: var(--ea-err); }
.ea-budget { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; flex-wrap: wrap; }
.ea-budget label { flex: 1 1 140px; font-size: .875rem; }
.ea-budget input { display: block; width: 100%; min-height: 44px; margin-top: 2px; padding: 8px 10px; border: 1px solid #9fb3c0; border-radius: 10px; font: inherit; font-size: 1rem; }
.ea-budget-res { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #e3f4e8; font-size: .9375rem; }
.ea-budget-res.is-over { background: #fff1bf; }
.ea-more { margin-top: 12px; border-top: 1px solid var(--ea-line); }
.ea-more summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-family: var(--ea-head); font-weight: 500; color: var(--ea-blue-d); }
.ea-more p { white-space: pre-line; font-size: .9375rem; }
.ea-circ li { padding: 6px 0; border-top: 1px solid var(--ea-line); font-size: .875rem; }
.ea-circ .is-ok { color: var(--ea-ok); }
.ea-circ .is-warn { color: var(--ea-warn); }
.ea-disc { margin-top: 12px; font-size: .75rem; color: var(--ea-muted); }

/* ---------- Calculators ---------- */
.ea-calc-intro { color: var(--ea-muted); font-size: .9375rem; margin-bottom: 10px; }
.ea-calcs { display: grid; gap: 12px; }
.ea-calc { background: #fff; border: 1px solid var(--ea-line); border-radius: var(--ea-r); padding: 12px; }
.ea-calc h2 { margin: 0 0 8px; font-family: var(--ea-head); font-weight: 500; font-size: 1.0625rem; color: var(--ea-ink); }
.ea-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.ea-fields label { font-size: .8125rem; color: var(--ea-muted); min-width: 0; }
.ea-fields .ea-wide { grid-column: 1 / -1; }
.ea-fields input,
.ea-fields select {
	display: block; width: 100%;
	min-height: 44px;
	margin-top: 2px;
	padding: 8px 10px;
	border: 1px solid #9fb3c0;
	border-radius: 10px;
	font: inherit;
	font-size: 1rem;
	color: var(--ea-ink);
	background: #fff;
}
.ea-check { display: flex !important; gap: 8px; align-items: center; min-height: 44px; }
.ea-check input { width: 20px; min-height: 0; height: 20px; margin: 0; }
.ea-calc .ea-btn { margin-top: 10px; width: 100%; }
.ea-res { margin-top: 10px; }
.ea-table { width: 100%; border-collapse: collapse; font-size: .8125rem; margin-top: 6px; font-variant-numeric: tabular-nums; }
.ea-table th,
.ea-table td { padding: 4px 6px; border-bottom: 1px solid var(--ea-line); text-align: left; }
.ea-table tr.is-pick td { background: var(--ea-tint); font-weight: 600; }

.ea-foot { margin: 18px 0 28px; font-size: .75rem; color: var(--ea-muted); line-height: 1.5; max-width: 90ch; }

/*
 * The theme styles every button through a long :not() chain (grey #efecec, black on hover/focus) that outranks
 * single classes, so this page's own buttons set their colours with !important.
 */
.ea .ea-chip,
.ea .ea-tab,
.ea .ea-tier,
.ea .ea-btn,
.ea .ea-send,
.ea .ea-link {
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
.ea .ea-chip { background-color: #fff !important; color: var(--ea-blue-d) !important; border: 1px solid var(--ea-blue) !important; font-weight: 400 !important; }
.ea .ea-chip:hover:not(:disabled),
.ea .ea-chip:focus-visible { background-color: var(--ea-tint) !important; color: var(--ea-blue-d) !important; }
.ea .ea-tab { background-color: transparent !important; color: var(--ea-muted) !important; border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; }
.ea .ea-tab.is-on { color: var(--ea-blue-d) !important; border-bottom-color: var(--ea-blue) !important; }
.ea .ea-tab:hover { color: var(--ea-blue-d) !important; }
.ea .ea-tier { background-color: #fff !important; color: var(--ea-ink) !important; border: 1px solid var(--ea-line) !important; }
.ea .ea-tier[aria-pressed="true"] { background-color: var(--ea-tint) !important; border: 2px solid var(--ea-blue) !important; }
.ea .ea-btn { background-color: #fff !important; color: var(--ea-blue-d) !important; border: 1px solid var(--ea-blue) !important; }
.ea .ea-btn:hover { background-color: var(--ea-tint) !important; }
.ea .ea-btn--primary,
.ea .ea-btn--primary:hover,
.ea .ea-btn--primary:focus { background-color: var(--ea-blue) !important; color: #fff !important; border-color: var(--ea-blue) !important; }
.ea .ea-btn--primary:hover { background-color: var(--ea-blue-d) !important; }
.ea .ea-send { background-color: var(--ea-blue) !important; color: #fff !important; border: 0 !important; padding: 0 !important; }
.ea .ea-send:hover:not(:disabled) { background-color: var(--ea-blue-d) !important; }
.ea .ea-send:disabled { background-color: #9fb3c0 !important; }
.ea .ea-link { background-color: transparent !important; color: var(--ea-blue) !important; border: 0 !important; padding: 8px 0 !important; }

/*
 * Stream 18's quick-tools button opens this very page. On phones it sat on the send button and, scrolled, on
 * "Adaugă tot în coș" and the product names (verifier, 6 Oct), so it is hidden here below 1024 px. This page already
 * has the calculators and "Trimite lista echipei noastre"; phone and contact stay in the header.
 */
@media (max-width: 1023px) {
	body.ec-assistant #ec-qt { display: none !important; }
}

@media (min-width: 600px) {
	.ea-calcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ea-actions { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
	.ea-title { font-size: 1.75rem; }
	.ea-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
	.ea-chat { height: calc(100vh - 170px); min-height: 560px; max-height: 900px; }
	.ea-log { overflow-y: auto; overscroll-behavior: contain; }
	.ea-panel { position: sticky; top: 16px; margin-top: 0; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; }
	.ea-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.ea-dots i,
	.ea-msg.is-typing .ea-mascot__eye { animation: none; }
	.ea-dots i { opacity: .7; }
}