/* Чат-виджет ИИ-консультанта — общий для site/ и вариантов v1-v3.
   ЕДИНЫЙ виджет, ЧЕТЫРЕ темы: цвета берутся из --chat-* переменных, которые
   каждый сайт переопределяет в своём css/style.css (:root #ai-chat{...}).
   Значения ниже — дефолт (деловая светлая тема главного сайта) и фолбэк для
   страниц без style.css. Переопределять НЕ трогая логику chat.js. */
#ai-chat {
  /* --- легаси-переменные (совместимость со старым кодом) --- */
  --accent: #455ce9; --ink: #1c1d20; --bg-page-2: #f4f4f4; --bg-dark-2: #1c1d20; --text-mut: #8b8d92;
  --ease: cubic-bezier(.22,.61,.36,1);
  /* --- контракт темы чата (эти 6 — обязательные, остальные производные) --- */
  --chat-bg: #ffffff;                 /* фон окна */
  --chat-accent: #455ce9;             /* акцент: FAB, кнопка отправки, ссылки, CTA */
  --chat-bubble-in: #f1f3f9;          /* входящий пузырь (консультант) */
  --chat-bubble-out: #455ce9;         /* исходящий пузырь (клиент) */
  --chat-text: #1c1d20;               /* основной текст в окне */
  --chat-border: rgba(28,29,32,.12);  /* рамка/обводка */
  /* --- производные (у каждой темы есть разумный дефолт) --- */
  --chat-accent-2: #22b8cf;
  --chat-accent-text: #ffffff;        /* текст/иконка на акценте */
  --chat-bubble-in-text: var(--chat-text);
  --chat-bubble-in-border: transparent;
  --chat-bubble-out-text: #ffffff;
  --chat-border-w: 1px;
  --chat-head-bg: #1c1d20;            /* фон шапки */
  --chat-head-text: #ffffff;
  --chat-muted: #8b8d92;              /* второстепенный текст (сноска, лейблы) */
  --chat-input-bg: #ffffff;           /* поле ввода */
  --chat-input-area-bg: #fafafa;      /* полоса ввода */
  --chat-online: #4ade80;             /* точка «онлайн» */
  --chat-radius: 18px;                /* скругление окна */
  --chat-bubble-radius: 14px;
  --chat-cta-bg: linear-gradient(135deg, var(--chat-accent), var(--chat-accent-2));
  --chat-shadow: 0 24px 70px rgba(28,29,32,.28);
  --chat-fab-shadow: 0 10px 30px rgba(69,92,233,.4);
}

/* --- чат-виджет --- */
.chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 9700; width: 58px; height: 58px; border-radius: 50%;
  background: var(--chat-fab-bg, var(--chat-accent)); color: var(--chat-accent-text, #fff); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--chat-fab-shadow, 0 10px 30px rgba(69,92,233,.4)); transition: transform .3s var(--ease), opacity .3s; }
.chat-fab:hover { transform: scale(1.08); }
.chat-fab.hidden { opacity: 0; pointer-events: none; transform: scale(.6); }
.chat-fab-dot { position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--chat-online, #4ade80); border: 2px solid #fff; }
.chat-panel { position: fixed; right: 22px; bottom: 22px; z-index: 9800; width: min(370px, calc(100vw - 30px)); height: min(540px, calc(100vh - 60px));
  background: var(--chat-bg, #fff); color: var(--chat-text, #1c1d20); border: var(--chat-border-w, 1px) solid var(--chat-border, transparent);
  border-radius: var(--chat-radius, 18px); box-shadow: var(--chat-shadow, 0 24px 70px rgba(28,29,32,.28)); display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(18px) scale(.97); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
.chat-panel.open { opacity: 1; visibility: visible; transform: none; }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--chat-head-bg, var(--bg-dark-2)); color: var(--chat-head-text, #fff); }
.chat-head-t b { display: block; font-family: 'Unbounded'; font-size: .85rem; font-weight: 600; }
.chat-head-t i { font-style: normal; font-size: .72rem; color: var(--chat-head-text, #a3a7a9); opacity: .7; }
.chat-close { background: none; border: 0; color: var(--chat-head-text, #fff); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; }
#chat-body { flex: 1; display: flex; min-height: 0; }
#chat-body .quikchat-base { flex: 1; border: 0; border-radius: 0; font-family: 'Inter', sans-serif; font-size: .88rem; background: var(--chat-bg); color: var(--chat-text); }
#chat-body .quikchat-messages-area { background: var(--chat-bg); color: var(--chat-text); }
/* --- пузыри переписки: входящие (слева, консультант) и исходящие (справа, клиент) --- */
#chat-body .quikchat-message { display: flex; flex-direction: column; padding: 3px 4px; }
#chat-body .quikchat-align-left { align-items: flex-start; }
#chat-body .quikchat-align-right { align-items: flex-end; }
#chat-body .quikchat-user-label { color: var(--chat-muted); font-size: .72rem; font-weight: 600; margin-bottom: 2px; }
#chat-body .quikchat-message-content { max-width: 84%; padding: .5rem .75rem; border-radius: var(--chat-bubble-radius); line-height: 1.5; }
#chat-body .quikchat-align-left .quikchat-message-content { background: var(--chat-bubble-in); color: var(--chat-bubble-in-text); border: 1px solid var(--chat-bubble-in-border, transparent); }
#chat-body .quikchat-align-right .quikchat-message-content { background: var(--chat-bubble-out); color: var(--chat-bubble-out-text); }
#chat-body .quikchat-message-content a { color: var(--chat-accent); text-decoration: underline; }
/* --- полоса и поле ввода, кнопка отправки --- */
#chat-body .quikchat-input-area { background: var(--chat-input-area-bg, var(--chat-bg)); border-top: 1px solid var(--chat-border); }
#chat-body .quikchat-input-textbox { font-family: 'Inter', sans-serif; font-size: .88rem; background: var(--chat-input-bg); color: var(--chat-text); border: 1px solid var(--chat-border); }
#chat-body .quikchat-input-textbox::placeholder { color: var(--chat-muted); opacity: 1; }
#chat-body .quikchat-input-send-btn { background: var(--chat-accent); color: var(--chat-accent-text); }
.chat-note { font-size: .68rem; color: var(--chat-muted, #8b8d92); text-align: center; padding: 6px 10px 9px; background: var(--chat-bg, #fff); }
.chat-typing i { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: var(--chat-muted, #9aa0a6); animation: chatdot 1.2s infinite; }
.chat-typing i:nth-child(2) { animation-delay: .2s; }
.chat-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes chatdot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (max-width: 900px) { .chat-fab { right: 14px; bottom: 14px; width: 52px; height: 52px; } .chat-panel { right: 8px; bottom: 8px; } }

/* ====== Услуги: строки с ценой/сроком/кнопкой ====== */
.service-body-in { display: block; padding: .4rem 2rem 2rem; }
.svc-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.15rem .2rem; border-bottom: 1px solid rgba(28,29,32,.09); transition: background .3s; }
.svc-row:last-child { border-bottom: 0; }
.svc-row:hover { background: rgba(69,92,233,.03); }
.svc-info h4 { font-family: 'Inter'; font-size: 1rem; font-weight: 700; }
.svc-info p { font-size: .86rem; color: #5b5d61; margin-top: .35rem; line-height: 1.5; max-width: 62ch; }
.svc-row .svc-meta { display: grid; gap: .25rem; text-align: right; min-width: 130px; }
.svc-row .svc-price { font-weight: 700; color: var(--accent); font-size: .98rem; white-space: nowrap; }
.svc-row .svc-term { font-size: .78rem; color: #8b8d92; white-space: nowrap; }
.svc-row .svc-order { font-family: 'Inter'; font-weight: 600; font-size: .85rem; color: var(--ink); background: none;
  border: 1px solid rgba(28,29,32,.25); border-radius: 100px; padding: .6rem 1.5rem; cursor: pointer;
  transition: background .3s, color .3s, border-color .3s, transform .3s; white-space: nowrap; }
.svc-row .svc-order:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }
@media (max-width: 900px) {
  .service-body-in { padding: .3rem 1rem 1.5rem; }
  .svc-row { grid-template-columns: 1fr; gap: .6rem; text-align: left; }
  /* мобайл: цена слева, срок по правому краю той же строки, кнопка «Заказать» по правому краю
     ниже — без наложений (полировка 2026-07-24) */
  .svc-row .svc-meta { min-width: 0; text-align: left; display: flex; flex-wrap: wrap;
    gap: .5rem 1rem; align-items: baseline; justify-content: space-between; }
  .svc-row .svc-term { margin-left: auto; text-align: right; }
  .svc-row .svc-order { justify-self: end; }
}

/* ====== тост «заявка получена» ====== */
.emx-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 24px); z-index: 9900;
  display: flex; align-items: center; gap: 12px; background: var(--bg-dark-2); color: #fff;
  padding: 15px 22px; border-radius: 14px; box-shadow: 0 18px 50px rgba(28,29,32,.35);
  font-size: .92rem; font-weight: 600; opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s; max-width: min(92vw, 480px); }
.emx-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.emx-toast-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #1e9e63;
  display: flex; align-items: center; justify-content: center; color: #fff; }

/* ====== светлая модалка заказа услуги ====== */
#modal-order .modal-win { background: #fff; color: var(--ink); width: min(540px, 94vw); height: auto; max-height: 90vh;
  overflow-y: auto; padding: 2.4rem 2.4rem 2.2rem; border-radius: 20px; display: block; }
#modal-order .modal-close { position: absolute; top: 1.1rem; right: 1.3rem; color: var(--ink); }
#modal-order h3 { color: var(--ink); }
#modal-order .field { margin-bottom: 1.1rem; }
#modal-order .field > span { display: block; font-size: .82rem; font-weight: 600; color: #4a4c51; margin-bottom: .5rem; }
#modal-order .field input, #modal-order .field textarea { width: 100%; background: #fff; color: var(--ink);
  border: 1.5px solid rgba(28,29,32,.16); border-radius: 12px; padding: .8rem 1rem; font-family: 'Inter'; font-size: .93rem; }
#modal-order .field input:focus, #modal-order .field textarea:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(69,92,233,.12); }
#modal-order .field input[readonly] { background: var(--bg-page-2); color: #4a4c51; }
#modal-order .consent { color: #5b5d61; margin: .4rem 0 1.2rem; }
#modal-order .form-submit { width: auto; }
@media (max-width: 640px) { #modal-order .modal-win { padding: 1.8rem 1.2rem 1.6rem; } }

/* ====== футер-CTA в одну строку + аккордеон: якорь под шапкой ====== */
.footer-cta { flex-wrap: nowrap; }
.footer-cta h2 { white-space: nowrap; font-size: clamp(1.8rem, 4.6vw, 4.2rem); }
@media (max-width: 700px) { .footer-cta { flex-wrap: wrap; } .footer-cta h2 { white-space: normal; } }
.service-row { scroll-margin-top: 84px; }

/* ====== защита контента: выделение только там, где нужно ====== */
body { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable], .selectable, .quikchat-message-content,
a[href^="tel:"], a[href^="mailto:"], .contact-direct a { -webkit-user-select: text; -moz-user-select: text; user-select: text; -webkit-touch-callout: default; }
img, video { -webkit-user-drag: none; }

/* ---------- Аватар консультанта ---------- */
.chat-ava{position:relative;flex:0 0 auto;width:40px;height:40px;margin-right:.65rem}
.chat-ava img{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block;
  border:1.5px solid rgba(255,255,255,.35)}
.chat-ava-dot{position:absolute;right:0;bottom:1px;width:11px;height:11px;border-radius:50%;
  background:#3ddc84;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.chat-head{display:flex;align-items:center}
.chat-head-t b{display:block;font-size:.95rem;line-height:1.2}
.chat-head-t i{display:block;font-style:normal;font-size:.72rem;opacity:.75;line-height:1.25;margin-top:1px}

/* ---------- Предложение оставить заявку ---------- */
.chat-cta{display:flex;flex-direction:column;gap:.7rem}
.chat-cta-btn{
  align-self:flex-start;border:0;border-radius:10px;padding:.62rem 1.1rem;
  background:var(--chat-cta-bg, linear-gradient(135deg,var(--chat-accent),var(--chat-accent-2)));color:var(--chat-accent-text,#fff);
  font-weight:600;font-size:.86rem;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.16);transition:transform .2s,box-shadow .2s;
}
.chat-cta-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.22)}
/* три шага в ряд: основной — залитый, остальные — контурные. На узкой панели
   чата ряд переносится, кнопки тянутся на всю ширину (тап-таргет 40+px). */
.chat-cta-row{display:flex;flex-wrap:wrap;gap:.45rem}
.chat-cta-row .chat-cta-btn{align-self:auto;flex:1 1 auto;min-height:40px;padding:.55rem .85rem;font-size:.82rem}
.chat-cta-btn--alt{background:transparent;color:var(--chat-accent);
  border:1px solid var(--chat-border, rgba(28,29,32,.16));box-shadow:none}
.chat-cta-btn--alt:hover{box-shadow:0 6px 16px rgba(0,0,0,.14);border-color:var(--chat-accent)}

/* ---------- Форма заявки внутри чата ---------- */
.chat-lead{padding:1rem 1.1rem 1.2rem;overflow-y:auto;flex:1 1 auto;background:var(--chat-bg);color:var(--chat-text)}
.chat-lead[hidden]{display:none}
.chat-lead-back{background:none;border:0;color:var(--chat-muted);font-size:.78rem;cursor:pointer;padding:0 0 .6rem}
.chat-lead-back:hover{color:var(--chat-accent)}
.chat-lead-title{font-weight:700;font-size:1rem;margin-bottom:.6rem;color:var(--chat-text)}
.chat-lead-sum{
  background:var(--chat-bubble-in);border:1px solid var(--chat-border);border-radius:10px;
  padding:.7rem .85rem;font-size:.8rem;line-height:1.5;color:var(--chat-bubble-in-text);
  white-space:pre-line;margin-bottom:.85rem;
}
#chat-lead-form{display:flex;flex-direction:column;gap:.6rem}
#chat-lead-form input[type=text],#chat-lead-form input[type=tel],#chat-lead-form textarea{
  width:100%;border:1px solid var(--chat-border);border-radius:9px;padding:.62rem .8rem;
  font:inherit;font-size:.86rem;color:var(--chat-text);background:var(--chat-input-bg);resize:vertical;
}
#chat-lead-form input::placeholder,#chat-lead-form textarea::placeholder{color:var(--chat-muted);opacity:1}
#chat-lead-form input:focus,#chat-lead-form textarea:focus{
  outline:none;border-color:var(--chat-accent);
  box-shadow:0 0 0 3px rgba(47,107,255,.12);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--chat-accent) 22%, transparent);
}
.chat-lead-consent{display:flex;gap:.5rem;align-items:flex-start;font-size:.74rem;color:var(--chat-muted);cursor:pointer}
.chat-lead-consent input{margin-top:.15rem;accent-color:var(--chat-accent)}
.chat-lead-send{
  border:0;border-radius:10px;padding:.7rem 1rem;background:var(--chat-cta-bg, linear-gradient(135deg,var(--chat-accent),var(--chat-accent-2)));
  color:var(--chat-accent-text,#fff);font-weight:600;font-size:.88rem;cursor:pointer;margin-top:.2rem;
}
.chat-lead-send:disabled{opacity:.6;cursor:default}

/* --- правки после визуальной проверки --- */
.chat-lead-title{color:var(--chat-text);font-size:1.02rem}
.chat-panel.lead-open .chat-note{display:none}          /* не наезжает на кнопку */
.chat-lead{max-height:100%;overflow-y:auto;padding-bottom:2rem;-webkit-overflow-scrolling:touch}
/* липкую кнопку убрал — она накрывала галочку согласия;
   вместо этого форма прокручивается, снизу запас */
.chat-lead-sum{max-height:34vh;overflow-y:auto}
/* прокрутка сообщений колесиком + подсказка ввода (2026-07-22) */
#chat-body .quikchat-messages-area{ overflow-y:auto !important; overscroll-behavior:contain; }
.chat-hint{ font-size:.62rem; color:var(--chat-muted,#9a9a9a); text-align:center; padding:3px 10px 0; opacity:.8; line-height:1.4; }
/* подсказка ввода — минималистично, как .chat-note (2026-07-22) */
.chat-hint{ font-size:.66rem !important; color:var(--chat-muted,#8b8d92) !important; opacity:1 !important; font-weight:400 !important; padding:6px 10px 0 !important; line-height:1.4 !important; letter-spacing:0 !important; }
.chat-note{ padding-top:3px !important; }