/* Чат-консультант: единый виджет для трёх бэкендов (assistant|n8n|openai).
   Палитра завязана на --main-color сайта с запасным значением.
   kedr812: фирменный зелёный #80bb25; иконка садовника и всплывающие подсказки —
   перенесены со старого виджета livepersona (см. хвост файла). */
:root{ --chat-accent:var(--main-color,#80bb25); }
.chat-btn{
	position:fixed; left:20px; bottom:100px; z-index:9998;
	width:58px; height:58px; border-radius:50%; border:none; cursor:pointer;
	background:var(--chat-accent); color:#fff;
	box-shadow:0 6px 20px rgba(16,24,40,.28);
	display:flex; align-items:center; justify-content:center;
	transition:transform .15s ease, box-shadow .15s ease;
}
.chat-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(16,24,40,.34); }
.chat-btn svg{ display:block; }
.chat-badge{
	position:absolute; top:-2px; right:-2px; min-width:20px; height:20px; border-radius:10px;
	background:#e03e3e; color:#fff; font:700 12px/20px Arial,sans-serif; text-align:center; padding:0 5px;
}
.chat-popup{
	position:fixed; left:20px; bottom:170px; z-index:9999;
	width:380px; max-width:calc(100vw - 24px); height:560px; max-height:calc(100vh - 120px);
	background:#fff; border-radius:16px; overflow:hidden;
	box-shadow:0 18px 50px rgba(16,24,40,.30), 0 2px 8px rgba(16,24,40,.12);
	display:flex; flex-direction:column;
	font:14px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#1a232d;
}
.chat-popup.hidden{ display:none; }
.chat-header{
	display:flex; align-items:center; gap:10px; padding:12px 14px;
	background:var(--chat-accent); color:#fff; flex:0 0 auto;
}
.chat-avatar{
	width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.16);
	display:flex; align-items:center; justify-content:center; flex:0 0 auto; overflow:hidden;
}
.chat-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.chat-title{ flex:1; min-width:0; }
.chat-name{ font-weight:700; font-size:15px; }
.chat-status{ font-size:12px; opacity:.85; display:flex; align-items:center; gap:5px; }
.chat-dot{ width:7px; height:7px; border-radius:50%; background:#4ade80; display:inline-block; }
.chat-hbtn{
	background:transparent; border:none; color:#fff; opacity:.75; cursor:pointer; padding:6px; border-radius:8px;
	display:flex; align-items:center;
}
.chat-hbtn:hover{ opacity:1; background:rgba(255,255,255,.14); }
.chat-content{
	flex:1; overflow-y:auto; overflow-x:hidden; padding:14px; background:#f5f7fa;
	display:flex; flex-direction:column; gap:2px;
}
.chat-msg{ display:flex; flex-direction:column; max-width:84%; margin:4px 0; }
.chat-msg.user{ align-self:flex-end; align-items:flex-end; }
.chat-msg.bot{ align-self:flex-start; align-items:flex-start; }
.chat-bubble{
	padding:9px 13px; border-radius:14px; white-space:pre-wrap;
	/* длинные ссылки рвём по символам, иначе пузырь растягивается и появляется прокрутка */
	word-wrap:break-word; overflow-wrap:anywhere; word-break:break-word; max-width:100%; min-width:0;
}
.chat-msg.user .chat-bubble{ background:var(--chat-accent); color:#fff; border-bottom-right-radius:4px; }
.chat-msg.bot .chat-bubble{ background:#fff; border:1px solid #e4e8ee; border-bottom-left-radius:4px; }
.chat-msg.error .chat-bubble{ background:#fdecec; border-color:#f5c2c2; color:#8a2424; font-style:italic; }
.chat-bubble a{ color:inherit; text-decoration:underline; word-break:break-word; overflow-wrap:anywhere; }
.chat-msg.bot .chat-bubble a{ color:var(--chat-accent); }
.chat-time{ font-size:10px; color:#93a0af; margin:3px 4px 0; }
.chat-typing .chat-bubble{ display:flex; gap:4px; align-items:center; }
.chat-typing .t-dot{
	width:7px; height:7px; border-radius:50%; background:#b9c3cf; animation:chatBlink 1.2s infinite both;
}
.chat-typing .t-dot:nth-child(2){ animation-delay:.2s; }
.chat-typing .t-dot:nth-child(3){ animation-delay:.4s; }
@keyframes chatBlink{ 0%,80%,100%{opacity:.3} 40%{opacity:1} }
/* карточки товаров (собирает код из данных инструментов) */
.chat-products{
	display:flex; gap:8px; overflow-x:auto; padding:6px 2px 2px; max-width:100%;
}
.chat-product{
	flex:0 0 128px; width:128px; background:#fff; border:1px solid #e4e8ee; border-radius:10px;
	padding:8px; text-decoration:none; color:#1a232d; font-size:12px; line-height:1.3;
}
.chat-product:hover{ border-color:var(--chat-accent); }
.chat-product img{ display:block; width:100%; height:86px; object-fit:contain; margin-bottom:6px; }
.chat-product .p-name{ display:block; margin-bottom:4px; min-height:26px; overflow:hidden; }
.chat-product .p-price{ display:block; font-weight:700; color:var(--chat-accent); }
.chat-footer{
	display:flex; align-items:flex-end; gap:8px; padding:10px 12px; background:#fff;
	border-top:1px solid #e4e8ee; flex:0 0 auto;
}
.chat-footer textarea{
	flex:1; resize:none; border:1px solid #d7dde5; border-radius:12px; padding:9px 12px;
	font:inherit; max-height:110px; outline:none; background:#f9fafb;
}
.chat-footer textarea:focus{ border-color:var(--chat-accent); background:#fff; }
.send-btn{
	width:40px; height:40px; border:none; border-radius:50%; cursor:pointer; flex:0 0 auto;
	background:var(--chat-accent); color:#fff; display:flex; align-items:center; justify-content:center;
}
.send-btn:disabled{ opacity:.5; cursor:default; }
@media (max-width:480px){
	.chat-popup{ left:0; right:auto; bottom:0; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-radius:0; }
	.chat-btn{ left:14px; bottom:80px; }
}

/* --- kedr812: иконка садовника вместо стандартного значка + всплывающие подсказки --------
   Перенесено со старого виджета (assets/less/custom.less, #lp-open-chat): кнопка слева
   и приподнята над низом экрана, подсказки всплывают справа от неё. */
.chat-btn,
.chat-btn:hover{
	/* иконка нарисована кругом под всю кнопку — заполняем ею фон целиком.
	   27.09.2026: icon_chat.png (60×60) заменена на icon_chat_2x.jpg (240×240) — на компьютере
	   кнопка стала 116px, и маленькая картинка там мылилась. Крупную версию перерисовала
	   нейросеть по исходнику, логотип на табличке — по logo.svg.
	   :hover здесь обязателен: общее правило сайта button:hover{background:#fff} сильнее
	   одного класса и при наведении стирало картинку (раньше его глушил !important в chat.less). */
	background:var(--chat-accent) url("../images/icon_chat_2x.jpg") no-repeat center center;
	background-size:cover;
}
.chat-btn > svg{ display:none; }
/* 27.09.2026. «Вибрация» была сдвигом на 2px дважды по 0,3 с — её почти не замечали.
   Теперь кнопка качается, как звонящий телефон (поворот до 16° с увеличением), и от неё
   расходится зелёная волна. Два цикла по 1,1 с; класс снимает chat.js через 2,3 с —
   меняете длительность здесь, поправьте и там. */
@keyframes chat-shake{
	0%{ transform:rotate(0) scale(1); }
	8%{ transform:rotate(-16deg) scale(1.12); }
	16%{ transform:rotate(14deg) scale(1.12); }
	24%{ transform:rotate(-12deg) scale(1.12); }
	32%{ transform:rotate(10deg) scale(1.1); }
	40%{ transform:rotate(-7deg) scale(1.07); }
	48%{ transform:rotate(4deg) scale(1.04); }
	56%{ transform:rotate(-2deg) scale(1.02); }
	64%,100%{ transform:rotate(0) scale(1); }
}
@keyframes chat-halo{
	0%{ box-shadow:0 0 0 0 rgba(128,187,37,.65); }
	70%,100%{ box-shadow:0 0 0 24px rgba(128,187,37,0); }
}
.chat-btn.consultant-shake{ animation:chat-shake 1.1s ease-in-out 2; }
.chat-btn.consultant-shake::after{
	content:''; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:50%;
	pointer-events:none; animation:chat-halo 1.1s ease-out 2;
}
@media (prefers-reduced-motion:reduce){
	.chat-btn.consultant-shake, .chat-btn.consultant-shake::after{ animation:none; }
}
.consultant-message{
	position:fixed;
	bottom:105px;
	left:92px;
	background:#fff;
	padding:10px 15px;
	border-radius:10px;
	box-shadow:0 5px 20px rgba(0,0,0,.15);
	opacity:0;
	transform:translateY(20px);
	transition:.3s;
	z-index:9997;
	max-width:230px;
	font:13px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
	color:#1a232d;
}
.consultant-message.show{ opacity:1; transform:translateY(0); }
@media (max-width:600px){
	.consultant-message{ max-width:60vw; left:86px; }
}

/* 27.09.2026. На компьютере кнопка вдвое крупнее: 58 → 116px (просил клиент — мелкую
   не замечали). На телефоне остаётся 58px: мобильная вёрстка (html.mv2) и узкие окна
   сюда не попадают. Вслед за кнопкой сдвинуты окно чата (иначе оно наезжает на кнопку),
   подсказки справа от неё и красный счётчик (у крупного круга угол рамки далеко от края). */
@media (min-width:768px){
	html:not(.mv2) .chat-btn{ width:116px; height:116px; }
	html:not(.mv2) .chat-badge{ top:6px; right:6px; }
	html:not(.mv2) .chat-popup{ bottom:228px; max-height:calc(100vh - 248px); }
	html:not(.mv2) .consultant-message{ left:150px; bottom:120px; }
}