/* VirtualChat widget — frontend. Mobilbarát, minden méreten. */

.aichat{
	--aichat-color:#2563eb;
	--aichat-radius:16px;
	position:fixed;
	bottom:20px;
	z-index:2147483000;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	font-size:15px;
	line-height:1.45;
}
.aichat--right{right:20px;}
.aichat--left{left:20px;}

/* Nyitógomb */
.aichat-launcher{
	width:60px;height:60px;border:none;border-radius:50%;
	background:var(--aichat-color);color:#fff;cursor:pointer;
	box-shadow:0 6px 20px rgba(0,0,0,.25);
	display:flex;align-items:center;justify-content:center;
	transition:transform .15s ease;
}
.aichat-launcher:hover{transform:scale(1.06);}
.aichat-launcher:active{transform:scale(.96);}
.aichat .aichat-ic-close{display:none;}
.aichat.is-open .aichat-ic-open{display:none;}
.aichat.is-open .aichat-ic-close{display:block;}
/* Téma-ütközés ellen: egyes témák svg{width:auto}-t adnak, amitől a launcher-ikon
   0 szélesre zsugorodik. Kényszerítjük a méretet, hogy minden témán látszódjon. */
.aichat-launcher svg{width:26px !important;height:26px !important;flex-shrink:0;}
/* Téma-ütközés elleni védelem: több téma (főleg webshopok) globális
   button{min-height/margin} és textarea{min-height} szabályt tesz, ami szétdobja
   a widgetet (óriás bezáró/küldés gomb → túl magas fejléc, 120px-es beviteli mező).
   A widget saját elemeit visszaállítjuk. */
.aichat button{min-height:0 !important;margin:0 !important;}
.aichat textarea.aichat-input{min-height:0 !important;max-height:120px !important;}

/* Panel */
.aichat-panel{
	position:absolute;bottom:74px;width:370px;max-width:calc(100vw - 32px);
	height:520px;max-height:calc(100vh - 120px);
	background:#fff;border-radius:var(--aichat-radius);
	box-shadow:0 12px 48px rgba(0,0,0,.28);
	display:flex;flex-direction:column;overflow:hidden;
}
/* A hidden attribútum zárja be a panelt (a fenti display:flex-et felül kell írnia). */
.aichat-panel[hidden]{display:none;}
.aichat--right .aichat-panel{right:0;}
.aichat--left .aichat-panel{left:0;}

.aichat-header{
	background:var(--aichat-color);color:#fff;
	padding:14px 16px;display:flex;align-items:center;justify-content:space-between;
	flex:0 0 auto;
}
.aichat-title{font-weight:600;}
.aichat-close{background:none;border:none;color:#fff;font-size:24px;line-height:1;cursor:pointer;padding:0 4px;}

.aichat-messages{
	flex:1 1 auto;overflow-y:auto;padding:16px;
	display:flex;flex-direction:column;gap:10px;background:#f7f8fa;
	/* A böngésző ne görgessen automatikusan a válasz aljára, ahogy nő a szöveg —
	   így a felhasználó kérdése FELÜL marad, alatta streamel a válasz. */
	overflow-anchor:none;
}
.aichat-msg{max-width:85%;padding:10px 13px;border-radius:14px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}
.aichat-msg.user{align-self:flex-end;background:var(--aichat-color);color:#fff;border-bottom-right-radius:4px;}
.aichat-msg.bot{align-self:flex-start;background:#fff;color:#1f2430;border:1px solid #e6e8ec;border-bottom-left-radius:4px;}
.aichat-msg a{color:var(--aichat-color);text-decoration:underline;word-break:break-word;}
.aichat-msg.user a{color:#fff;}
.aichat-msg strong{font-weight:600;}
.aichat-msg.bot.is-typing{min-width:44px;}
/* Termék mini bélyegkép a chatben (a bot által ajánlott termék első fotója). */
.aichat-thumb-link{display:inline-block;margin:6px 6px 2px 0;line-height:0;}
.aichat-thumb{display:block;max-width:84px;max-height:84px;width:auto;height:auto;border-radius:10px;border:1px solid #e6e8ec;object-fit:cover;background:#fff;}
/* Meta-sor: idő + Viber-szerű küldés-állapot pipák. */
.aichat-meta{font-size:10.5px;color:#8a90a0;margin-top:-6px;padding:0 5px;display:flex;align-items:center;gap:4px;line-height:1.2;}
.aichat-meta.user{align-self:flex-end;}
.aichat-meta.bot{align-self:flex-start;}
.aichat-ticks{font-weight:700;letter-spacing:-3px;padding-right:2px;}
.aichat-ticks.sent,.aichat-ticks.delivered{color:#9aa0ac;}
.aichat-ticks.seen{color:#34b7f1;} /* „látta" — kék pipák */
.aichat-typing{display:inline-flex;gap:6px;align-items:center;height:12px;}
.aichat-typing span{width:9px;height:9px;border-radius:50%;background:#8a90a0;display:inline-block;animation:aichat-bounce 1.3s infinite ease-in-out both;}
.aichat-typing span:nth-child(2){animation-delay:.18s;}
.aichat-typing span:nth-child(3){animation-delay:.36s;}
@keyframes aichat-bounce{0%,70%,100%{transform:translateY(0);opacity:.4;}35%{transform:translateY(-6px);opacity:1;}}

.aichat-inputbar{
	flex:0 0 auto;display:flex;align-items:flex-end;gap:8px;
	padding:10px;border-top:1px solid #e6e8ec;background:#fff;
}
.aichat-input{
	flex:1 1 auto;resize:none;border:1px solid #d5d9e0;border-radius:12px;
	padding:10px 12px;font:inherit;max-height:120px;outline:none;
}
.aichat-input:focus{border-color:var(--aichat-color);}
.aichat-send{
	flex:0 0 auto;height:42px;border:none;border-radius:12px;
	background:var(--aichat-color);color:#fff;cursor:pointer;font:inherit;font-weight:600;
	display:flex;align-items:center;justify-content:center;gap:6px;padding:0 16px;
}
.aichat-send-label{white-space:nowrap;}
.aichat-send svg{width:18px !important;height:18px !important;flex-shrink:0;}
.aichat-send:hover{filter:brightness(.95);}
.aichat-send:disabled{opacity:.5;cursor:not-allowed;}
/* Nagyon keskeny panelen csak az ikon marad. */
@media (max-width:360px){ .aichat-send-label{display:none;} .aichat-send{padding:0 12px;} }

.aichat-foot{font-size:11px;color:#8a90a0;text-align:center;padding:6px 8px 10px;background:#fff;}
.aichat-foot a{color:var(--aichat-color);text-decoration:none;font-weight:600;}
.aichat-foot a:hover{text-decoration:underline;}

/* Mobil — a chat-ABLAK a KÉPERNYŐHÖZ fixálva (a gomb pozíciójától függetlenül,
   mindig reszponzív, teljes képernyős).
   Az alsó margó a --aichat-bottom-clear (JS állítja): ha az oldalon van a
   képernyő aljához tapadó „hívás most" sáv (Call Now Button plugin), a panel
   annak a MÉRT magassága fölé kerül egy kis hézaggal; ha nincs, marad 10px. */
@media (max-width:480px){
	.aichat-panel{
		position:fixed;
		top:10px; bottom:var(--aichat-bottom-clear,10px); left:10px; right:10px;
		width:auto; max-width:none;
		height:auto; max-height:none;
	}
}
@supports (height:100dvh){
	@media (max-width:480px){
		.aichat-panel{ max-height:calc(100dvh - 20px); }
	}
}

@media (prefers-reduced-motion:reduce){
	.aichat-launcher{transition:none;}
	.aichat-typing span{animation:none;}
}