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

.virtualchat{
	--virtualchat-color:#2563eb;
	--virtualchat-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;
}
.virtualchat--right{right:20px;}
.virtualchat--left{left:20px;}

/* Nyitógomb */
.virtualchat-launcher{
	width:60px;height:60px;border:none;border-radius:50%;
	background:var(--virtualchat-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;
}
.virtualchat-launcher:hover{transform:scale(1.06);}
.virtualchat-launcher:active{transform:scale(.96);}
.virtualchat .virtualchat-ic-close{display:none;}
.virtualchat.is-open .virtualchat-ic-open{display:none;}
.virtualchat.is-open .virtualchat-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. */
.virtualchat-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. */
.virtualchat button{min-height:0 !important;margin:0 !important;}
.virtualchat textarea.virtualchat-input{min-height:0 !important;max-height:120px !important;}

/* Panel */
.virtualchat-panel{
	position:absolute;bottom:74px;width:370px;max-width:calc(100vw - 32px);
	height:520px;max-height:calc(100vh - 120px);
	background:#fff;border-radius:var(--virtualchat-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). */
.virtualchat-panel[hidden]{display:none;}
.virtualchat--right .virtualchat-panel{right:0;}
.virtualchat--left .virtualchat-panel{left:0;}

.virtualchat-header{
	background:var(--virtualchat-color);color:#fff;
	padding:14px 16px;display:flex;align-items:center;justify-content:space-between;
	flex:0 0 auto;
}
.virtualchat-title{font-weight:600;}
.virtualchat-close{background:none;border:none;color:#fff;font-size:24px;line-height:1;cursor:pointer;padding:0 4px;}
.virtualchat-hd-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
/* Téma-ütközés ellen: több téma globális button{width/min-width/padding} szabálya szétnyújtotta
   a kör alakú hívás-gombokat (ovális). A kényszerített MÉRET a widget.php-ben INLINE stílusban is
   ott van (túléli a WP Rocket RUCSS/minify-t és felülír minden téma-szabályt); itt csak fallback +
   a `display` a `:not([hidden])`-re szűkítve, hogy a `hidden` attribútum tovább is elrejthesse. */
.virtualchat .virtualchat-call{
	flex:0 0 auto !important;box-sizing:border-box !important;
	width:32px !important;height:32px !important;min-width:32px !important;max-width:32px !important;
	min-height:0 !important;padding:0 !important;margin:0 !important;
	background:rgba(255,255,255,.18);border:none;color:#fff;font-size:16px;
	border-radius:50% !important;cursor:pointer;line-height:1;text-align:center;
}
.virtualchat .virtualchat-call:not([hidden]){display:inline-flex !important;align-items:center;justify-content:center;}
.virtualchat .virtualchat-call:hover{background:rgba(255,255,255,.32);}
.virtualchat .virtualchat-live:hover{background:rgba(255,255,255,.32)!important;}
.virtualchat .virtualchat-live.on{background:#2ecc71!important;}
.virtualchat-lmsg{background:#fff;border:1px solid #e6e8f0;border-radius:12px;padding:12px;margin:6px 0;}
.virtualchat-lmsg-t{font-weight:700;font-size:13px;}
.virtualchat-lmsg input,.virtualchat-lmsg textarea{width:100%;border:1.5px solid #e6e8f0;border-radius:9px;padding:8px 10px;font-size:13px;margin-top:6px;font-family:inherit;box-sizing:border-box;}
.virtualchat-lmsg button{margin-top:8px;background:var(--virtualchat-color);color:#fff;border:none;border-radius:9px;padding:8px 14px;font-weight:700;cursor:pointer;font-size:13px;}

.virtualchat-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;
}
.virtualchat-msg{max-width:85%;padding:10px 13px;border-radius:14px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}
.virtualchat-msg.user{align-self:flex-end;background:var(--virtualchat-color);color:#fff;border-bottom-right-radius:4px;}
.virtualchat-msg.bot{align-self:flex-start;background:#fff;color:#1f2430;border:1px solid #e6e8ec;border-bottom-left-radius:4px;}
.virtualchat-msg a{color:var(--virtualchat-color);text-decoration:underline;word-break:break-word;}
.virtualchat-msg.user a{color:#fff;}
.virtualchat-msg strong{font-weight:600;}
.virtualchat-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). */
.virtualchat-thumb-link{display:inline-block;margin:6px 6px 2px 0;line-height:0;}
.virtualchat-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. */
.virtualchat-meta{font-size:10.5px;color:#8a90a0;margin-top:-6px;padding:0 5px;display:flex;align-items:center;gap:4px;line-height:1.2;}
.virtualchat-meta.user{align-self:flex-end;}
.virtualchat-meta.bot{align-self:flex-start;}
.virtualchat-ticks{font-weight:700;letter-spacing:-3px;padding-right:2px;}
.virtualchat-ticks.sent,.virtualchat-ticks.delivered{color:#9aa0ac;}
.virtualchat-ticks.seen{color:#34b7f1;} /* „látta" — kék pipák */
.virtualchat-typing{display:inline-flex;gap:6px;align-items:center;height:12px;}
.virtualchat-typing span{width:9px;height:9px;border-radius:50%;background:#8a90a0;display:inline-block;animation:virtualchat-bounce 1.3s infinite ease-in-out both;}
.virtualchat-typing span:nth-child(2){animation-delay:.18s;}
.virtualchat-typing span:nth-child(3){animation-delay:.36s;}
@keyframes virtualchat-bounce{0%,70%,100%{transform:translateY(0);opacity:.4;}35%{transform:translateY(-6px);opacity:1;}}

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

.virtualchat-foot{font-size:11px;color:#8a90a0;text-align:center;padding:6px 8px 10px;background:#fff;}
.virtualchat-foot a{color:var(--virtualchat-color);text-decoration:none;font-weight:600;}
.virtualchat-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 --virtualchat-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){
	.virtualchat-panel{
		position:fixed;
		top:10px; bottom:var(--virtualchat-bottom-clear,10px); left:10px; right:10px;
		width:auto; max-width:none;
		height:auto; max-height:none;
	}
}
@supports (height:100dvh){
	@media (max-width:480px){
		.virtualchat-panel{ max-height:calc(100dvh - 20px); }
	}
}

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