/* creat de Claude in 02.08.2026 21:00
   Chatul asistentului (app/core/Asistent.php). Mobile-first, ca tot magazinul:
   pe telefon panoul ocupa ecranul intreg -- o fereastra mica de chat pe 360 px
   e o casuta in care nu se poate citi si din care nu se poate scrie. Pe ecran
   mare devine un panou in colt.

   Bula sta deasupra barii de jos (--bara), ca sa nu acopere navigarea de la
   degetul mare si sa nu fie acoperita de ea. */

.asist {
	--bara: 62px;
	--asist-fundal: #fff;
}

/* ---- bula ---- */
.asist-bula {
	position: fixed; z-index: 40;
	right: 14px; bottom: calc(var(--bara) + 14px + env(safe-area-inset-bottom, 0px));
	display: flex; align-items: center; gap: 8px;
	padding: 14px;
	font: inherit; font-size: 15px; font-weight: 600; color: #fff;
	background: var(--verde); border: 0; border-radius: 999px; cursor: pointer;
	box-shadow: 0 6px 20px rgba(0,0,0,.22);
}
/* modificat de Claude in 08.08.2026 18:32 -- pe telefon bula acopera caretul
   acordeonului din subsol (.foot-grup h3 label::after), care sta si el langa
   marginea din dreapta. O mutam mai la stanga doar pe mobil ca sa nu se suprapuna. */
@media (max-width: 719.98px) {
	.asist-bula { right: 34px; }
}
.asist-bula:hover { background: var(--verde-inchis); }
.asist-bula svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.asist-bula[hidden] { display: none; }
/* modificat de Claude in 08.08.2026 -- pe telefon bula ramane doar iconita,
   textul apare abia pe ecran mare unde e loc. Ramane in DOM pentru cititoarele
   de ecran, doar ascuns vizual. */
.asist-bula span {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* punctul verde care arata ca sunt mesaje necitite din discutia veche */
.asist-bula b {
	position: absolute; top: -3px; right: -3px;
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--rosu); border: 2px solid #fff;
}

/* ---- panoul ---- */
.asist-panou {
	position: fixed; z-index: 41; inset: 0;
	display: flex; flex-direction: column;
	background: var(--asist-fundal);
}
.asist-panou[hidden] { display: none; }

/* modificat de Claude in 05.08.2026 12:00 -- textul urmeaza --antet-text, nu alb fix:
   pe un antet clar (zanna) albul fix se pierdea, ca la cont.css */
.asist-cap {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 14px; padding-top: calc(12px + env(safe-area-inset-top, 0px));
	background: var(--antet); color: var(--antet-text);
}
.asist-cap-nume { font-weight: 700; font-size: 16px; }
.asist-cap-sub { font-size: 12px; opacity: .75; }
.asist-cap-stanga { flex: 1; min-width: 0; }
.asist-cap button {
	display: grid; place-items: center; width: 36px; height: 36px;
	color: var(--antet-text); background: color-mix(in srgb, var(--antet-text) 12%, transparent);
	border: 0; border-radius: 50%; cursor: pointer;
}
.asist-cap button:hover { background: color-mix(in srgb, var(--antet-text) 22%, transparent); }
/* modificat de Claude in 02.08.2026 21:00 -- butonul de stergere sta ascuns pana
   cand e ceva de sters; `display:grid` de mai sus bate `hidden`, deci se scrie aici */
.asist-cap button[hidden] { display: none; }
.asist-cap svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.asist-semn {
	display: grid; place-items: center; width: 34px; height: 34px; flex: none;
	font-weight: 700; color: var(--antet); background: var(--verde-clar); border-radius: 50%;
}

/* ---- firul discutiei ---- */
.asist-fir {
	flex: 1; overflow-y: auto; overscroll-behavior: contain;
	padding: 14px; display: flex; flex-direction: column; gap: 12px;
	background: var(--fundal);
}
.asist-m { max-width: 88%; padding: 10px 13px; border-radius: 14px; line-height: 1.45; }
.asist-m p { margin: 0 0 .5em; }
.asist-m p:last-child { margin-bottom: 0; }
.asist-m ul { margin: .3em 0; padding-left: 1.1em; }
.asist-m--eu {
	align-self: flex-end; color: #fff; background: var(--verde);
	border-bottom-right-radius: 5px;
}
.asist-m--el {
	align-self: flex-start; background: #fff; border: 1px solid var(--linie);
	border-bottom-left-radius: 5px;
}
.asist-m--rau { align-self: stretch; max-width: none; color: #7a1d15; background: #fdecea; border: 1px solid #f5c6c1; }

/* ce face acum: "Caut in catalog…" */
.asist-stare { align-self: flex-start; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.asist-stare i { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); animation: asist-puls 1s infinite ease-in-out; }
@keyframes asist-puls { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.asist-stare[hidden] { display: none; }

/* ---- produsele din raspuns ---- */
/* Aceleasi date si aceeasi forma ca in restul magazinului: poza, nume, pret,
   pret taiat si butonul obisnuit de adaugare in cos (.btn-cos, prins de app.js
   pentru tot site-ul), ca sa nu existe doua feluri de a cumpara acelasi produs. */
.asist-produse { align-self: stretch; display: grid; gap: 8px; }
.asist-p {
	display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: center;
	padding: 8px; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
}
.asist-p img { width: 62px; height: 62px; object-fit: contain; }
.asist-p-nume { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--text); }
.asist-p-nume:hover { color: var(--verde-inchis); }
.asist-p-brand { font-size: 11.5px; color: var(--muted); }
.asist-p-jos { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.asist-p-pret { font-weight: 700; }
.asist-p-vechi { font-size: 12px; color: var(--muted); text-decoration: line-through; }
.asist-p .btn-cos { margin-left: auto; padding: 7px 12px; font-size: 13px; }
.asist-p-epuizat { margin-left: auto; font-size: 12px; color: var(--muted); }

/* ---- sugestii ---- */
.asist-sugestii { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 10px; background: var(--fundal); }
.asist-sugestii[hidden] { display: none; }
.asist-sugestii button {
	padding: 8px 12px; font: inherit; font-size: 13px; color: var(--verde-inchis);
	background: #fff; border: 1px solid var(--verde-clar); border-radius: 999px; cursor: pointer;
}
.asist-sugestii button:hover { background: #f3f8ea; }

/* ---- scrisul ---- */
.asist-scrie {
	display: flex; gap: 8px; align-items: flex-end;
	padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	background: #fff; border-top: 1px solid var(--linie);
}
/* modificat de Claude in 02.08.2026 19:05 -- chenarul, marimea literei si inelul de
   focalizare vin din regula comuna de controale (app.css); aici ramane doar ce e al
   casetei de chat: un rand care creste pana la 110px, cu colturi de bula */
.asist-scrie textarea {
	flex: 1; max-height: 110px; min-height: 42px; resize: none;
	border-radius: 18px;
}
.asist-scrie button {
	display: grid; place-items: center; width: 42px; height: 42px; flex: none;
	color: #fff; background: var(--verde); border: 0; border-radius: 50%; cursor: pointer;
}
.asist-scrie button:disabled { background: var(--chenar); cursor: default; }
.asist-scrie svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.asist-nota { margin: 0; padding: 0 14px 10px; font-size: 11px; color: var(--muted); text-align: center; background: #fff; }

/* ---- ecran mare: panou in colt ---- */
@media (min-width: 720px) {
	.asist { --bara: 0px; }

	/* modificat de Claude in 08.08.2026 -- bula sta 10px mai sus pe desktop */
	.asist-bula { bottom: calc(var(--bara) + 24px + env(safe-area-inset-bottom, 0px)); padding: 12px 16px 12px 13px; }
	/* modificat de Claude in 08.08.2026 -- textul revine doar de aici in sus */
	.asist-bula span {
		position: static; width: auto; height: auto; padding: 0; margin: 0;
		overflow: visible; clip: auto; white-space: nowrap;
	}

	.asist-panou {
		inset: auto 20px 20px auto;
		width: 400px; height: min(640px, calc(100vh - 100px));
		border-radius: 16px; overflow: hidden;
		box-shadow: 0 18px 50px rgba(0,0,0,.25);
	}
	.asist-cap { border-radius: 0; }
}