/* Чат-консультант: единый виджет для двух бэкендов (assistant|openai).
   Перенесено с fraulen.ru 02.10.2026 (там — из эталона CMS); прежняя версия лежит в локальной
   копии рядом, с меткой времени деплоя.

   ⚠ ОТЛИЧИЯ ОТ FRAULEN — всё про соседей по экрану у domagood:
   1. Цвет — фирменный оранжевый #ff7f00 (он же у прежнего чата, у плашки cookie и акцент админки).
      Белый мелкий текст на нём читается плохо, поэтому ссылки и цены в белых пузырях и карточках —
      тёмным оттенком #b35600 (тот же, что «под текст» в админке).
   2. Шапка сайта липкая и стоит на z-index 99999 (.header-area), поэтому окно чата ВЫШЕ неё:
      иначе на телефоне развёрнутое на весь экран окно уезжало под шапку — прежний виджет ради
      этого стоял на 1000000. Но ниже модалки «товар добавлен» (.modal-backdrop 100005, .modal 100010
      в custom.css): она должна перекрывать всё. Кнопка — низко (1031): только над липкой панелью
      покупки (1030) и не поверх выдвижного меню (100001).
   3. На карточке товара на телефоне внизу липкая панель «Купить» (.mobile-buy-bar, ~70px,
      body.has-buy-bar) — кнопку чата поднимаем над ней, как custom.css поднимает #scrollUp.
      Стрелка «наверх» (#scrollUp) — справа внизу, поэтому чат, как и на fraulen, слева. */
:root{ --chat-accent:#ff7f00; --chat-accent-text:#b35600; }
.chat-btn{
	position:fixed; left:22px; bottom:22px; z-index:1031;   /* слева — чтобы не перекрывать стрелку «наверх» (#scrollUp справа) */
	width:58px; height:58px; padding:0; border:0; border-radius:50%; cursor:pointer; box-sizing:border-box;
	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 svg{ width:28px; height:28px; }   /* фикс размера иконки поверх темы сайта */
.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:22px; bottom:92px; z-index:100002;   /* выше липкой шапки (99999), ниже модалок (100005+) */
	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;
	/* 12px — как подпись в карточке товара (.chat-product ниже). Было 14px: рядом с карточками
	   сообщения выглядели крупнее товаров, ради которых чат и открывают. Междустрочный интервал
	   при этом поднят с 1.45 до 1.5, иначе мелкий текст читается тяжелее. */
	font:12px/1.5 -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;
}
.chat-title{ flex:1; min-width:0; }
.chat-name{ font-weight:700; font-size:14px; }
.chat-status{ font-size:11px; 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:0; color:#fff; opacity:.75; cursor:pointer; padding:6px; border-radius:8px;
	display:flex; align-items:center; height:auto; box-sizing:border-box;   /* height:auto — гасим глобальную button{height:44px} темы */
}
.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-text); }
.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-text); }
/* С 02.10.2026 карточка — блок: ссылка на товар + кнопка «В корзину»; под названием — цвет варианта */
.chat-product{ display:flex; flex-direction:column; }
.chat-product .p-link{ display:block; flex:1; color:inherit; text-decoration:none; }
.chat-product .p-attr{ display:block; color:#6b7785; font-size:11px; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-product .p-cart{
	margin:6px 0 0; width:100%; height:auto; padding:6px 4px; box-sizing:border-box; cursor:pointer;
	border:1px solid var(--chat-accent); border-radius:8px; background:#fff; color:var(--chat-accent-text);
	font-family:inherit; font-weight:700; font-size:11px; line-height:1.2; text-transform:none;
}
.chat-product .p-cart:hover{ background:#fff4e8; }
.chat-product .p-cart:disabled{ opacity:.75; cursor:default; }
.chat-footer{
	display:flex; align-items:flex-end; gap:8px; padding:10px 12px; background:#fff;
	border-top:1px solid #e4e8ee; flex:0 0 auto;
}
/* поле ввода — тем же кеглем, что и сообщения (font:inherit ниже) */
.chat-footer textarea{
	flex:1; resize:none; border:1px solid #d7dde5; border-radius:12px; padding:9px 12px;
	font:inherit; height:auto; min-height:42px; max-height:110px; box-sizing:border-box; outline:none; background:#f9fafb;
	/* height:auto + box-sizing — перебиваем глобальные input/textarea{height:44px} темы, поле не распухает */
}
.chat-footer textarea:focus{ border-color:var(--chat-accent); background:#fff; }
.send-btn{
	width:40px; height:40px; padding:0; border:0; border-radius:50%; cursor:pointer; flex:0 0 auto; box-sizing:border-box;
	background:var(--chat-accent); color:#fff; display:flex; align-items:center; justify-content:center;
	/* padding:0/border:0 — глобальная button{padding:0 22px;border:1px} темы иначе прятала иконку */
}
.send-btn svg{ width:20px; height:20px; }
.send-btn:disabled{ opacity:.5; cursor:default; }
/* ── Полоса корзины и оформление заказа в окне чата (02.10.2026) ─────────────────────────────
   Поля и кнопки темы domagood имеют глобальные высоту, отступы и рамки (как и на fraulen, см. выше
   .chat-hbtn/.send-btn) — поэтому height/padding/border/margin у них заданы явно. */
.chat-cartbar{
	display:flex; align-items:center; gap:8px; padding:8px 12px; flex:0 0 auto;
	background:#fff4e8; border-top:1px solid #f6d6b3; font-size:12px; color:#1a232d;
}
.chat-cartbar[hidden]{ display:none; }
.chat-cartbar-info{ flex:1; min-width:0; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-cartbar-info svg{ flex:0 0 auto; color:var(--chat-accent-text); }
.chat-cartbar-btn{
	flex:0 0 auto; height:auto; margin:0; padding:7px 12px; border:0; border-radius:8px; cursor:pointer; box-sizing:border-box;
	background:var(--chat-accent); color:#fff; font-family:inherit; font-weight:700; font-size:12px; line-height:1.2; text-transform:none;
}
.chat-cartbar-btn:disabled{ opacity:.6; cursor:default; }
.chat-msg.chat-checkout-wrap{ max-width:100%; width:100%; align-self:stretch; }
.chat-checkout{
	background:#fff; border:1px solid #e4e8ee; border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:7px; margin:0;
}
.chat-checkout .cc-title{ font-weight:700; font-size:13px; }
.chat-checkout .cc-items{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.chat-checkout .cc-items li{ display:flex; gap:6px; align-items:baseline; margin:0; padding:0; }
.chat-checkout .cc-items a{ flex:1; min-width:0; color:#1a232d; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-checkout .cc-items a:hover{ color:var(--chat-accent-text); }
.chat-checkout .cc-q{ color:#6b7785; white-space:nowrap; }
.chat-checkout .cc-items b{ white-space:nowrap; }
.chat-checkout .cc-total{ font-weight:700; text-align:right; padding-top:4px; border-top:1px dashed #e4e8ee; }
.chat-checkout input[type=text],.chat-checkout input[type=tel],.chat-checkout input[type=email],.chat-checkout textarea{
	width:100%; height:auto; min-height:36px; margin:0; padding:8px 10px; box-sizing:border-box;
	border:1px solid #d7dde5; border-radius:8px; background:#f9fafb; font:inherit; color:#1a232d; box-shadow:none; outline:none;
}
.chat-checkout textarea{ resize:vertical; min-height:52px; }
.chat-checkout input:focus,.chat-checkout textarea:focus{ border-color:var(--chat-accent); background:#fff; }
.chat-checkout .cc-consent{ font-size:11px; line-height:1.4; color:#6b7785; font-weight:normal; margin:0; }
.chat-checkout .cc-consent a{ color:var(--chat-accent-text); }
.chat-checkout .cc-consent input{ width:auto; height:auto; margin:0 4px 0 0; vertical-align:-2px; }
.chat-checkout .cc-err{ background:#fdecec; border:1px solid #f5c2c2; color:#8a2424; border-radius:8px; padding:7px 10px; }
.chat-checkout .cc-err[hidden]{ display:none; }
.chat-checkout .cc-actions{ display:flex; gap:8px; align-items:center; }
.chat-checkout .cc-submit{
	flex:1; height:auto; margin:0; padding:10px 12px; border:0; border-radius:10px; cursor:pointer; box-sizing:border-box;
	background:var(--chat-accent); color:#fff; font-family:inherit; font-weight:700; font-size:13px; line-height:1.2; text-transform:none;
}
.chat-checkout .cc-submit:disabled{ opacity:.6; cursor:default; }
.chat-checkout .cc-cancel{
	height:auto; margin:0; padding:10px 12px; border:1px solid #d7dde5; border-radius:10px; background:#fff; color:#4a5563;
	cursor:pointer; font-family:inherit; font-size:12px; line-height:1.2; text-transform:none; box-sizing:border-box;
}
.chat-checkout .cc-note{ font-size:11px; line-height:1.4; color:#6b7785; }
@media (max-width:767px){
	body.has-buy-bar .chat-btn{ bottom:84px; }   /* над липкой панелью «Купить» на карточке товара */
}
@media (max-width:480px){
	.chat-popup{ left:0; right:0; bottom:0; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-radius:0; }
	.chat-btn{ left:14px; bottom:14px; }
	body.has-buy-bar .chat-btn{ bottom:80px; }
}