/* Версия веб-чата в оформлении manzanagroup.ru (внутренние страницы, напр.
   /products/loyalnost/). Задумана для поддомена вроде ldb.manzanagroup.ru.

   Правила шапки, подменю, кнопок, первого экрана и нижней строки подвала
   ВЗЯТЫ С САЙТА MANZANA (template.css Битрикса и /cssNew/button.css,
   28.09.2026) дословно — у себя, а не ссылкой: их файл лежит по адресу с
   хэшем кэша и сменится при первой пересборке. Картинки и ссылки — абсолютные
   на manzanagroup.ru. Если на основном сайте поменяют меню — перенести
   заново: web/tools/manzana/README.md.

   Шрифт: у них в CSS «Source Sans Pro», а подключён Google «Source Sans 3» —
   его преемник; здесь так же. */

/* ─── База ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Source Sans 3", "Source Sans Pro", Helvetica, Arial, sans-serif;
  font-size: 15px; line-height: 1.3; color: #2B2E32;
  background: #26292D;   /* цвет подвала: окно выше страницы не даёт чёрного хвоста */
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; }
p { margin: 0; }
img { max-width: 100%; border: 0; vertical-align: middle; }
button, input, textarea { font-family: inherit; }

/* ─── Шапка и подвал: manzanagroup.ru, template.css ─── */
.container-new {width: 100% !important;max-width:1200px !important;box-sizing: border-box;position:relative;margin:auto;}
.menuoverflow {overflow:hidden;}
@media (max-width: 1320px) {
  .container-new {max-width:100% !important;padding:0px 62px;}
}
@media (max-width: 1023px) {
  .container-new {max-width:100% !important;padding:0px 40px;}
}
@media (max-width: 767px) {
  .container-new {max-width:100% !important;padding:0px 12px;}
}
.new-main {position:fixed;top:0px;left:0px;width:100%;background:rgba(255,255,255,0.8);backdrop-filter: blur(20px);z-index:100;box-sizing:border-box;border-bottom:1px solid #F1F1F2;}
.new-main.opened {height:100%;overflow:auto;}
.new-main .burger {display:none;}
.menu-container {position:relative;display:flex;align-items:center;gap:24px;justify-content:space-between;padding:12px 0px;box-sizing:border-box;}
.menu-container a {border:0px;}
.menu-container a:hover {opacity:1;}
.menu-container a.logo-new img {min-width:229px;}
.new-main-menu {display:flex;align-items:center;gap:24px;margin:0px;padding:0px;}
.new-main-menu li {list-style:none;}
.new-main-menu > li > a > svg {transition:all 0.3s ease;}
.new-main-menu > li > a {font-size:18px;color:#2B2E32;display:flex;align-items:center;gap:6px;padding:18px 0px;box-sizing:border-box;transition:all 0.3s ease;}
.new-main-menu > li:hover > a {color:#78BE20;}
.new-main-menu > li:hover > a svg {transform:rotate(180deg);}
.new-main-menu > li:hover > a svg * {transition:all 0.3s ease;}
.new-main-menu > li:hover > a svg path {fill:#78BE20;}
.new-main-menu li .submenu {left:50%;transform:translate(-50%,0%);display:flex;backdrop-filter: blur(20px);padding:24px;box-sizing:border-box;gap:32px;position:absolute;opacity:0;visibility:hidden;top:calc(100% - 11px);transition:all 0.3s ease;background:rgba(255,255,255,0.98);box-shadow: 0px 0px 4px 0px #0000003D;border-radius:16px;}
.new-main-menu li .submenu .right-part {min-width:420px;}
.new-main-menu li .submenu .left-part ul {min-width:220px;}
.new-main-menu li .submenu .left-part ul li {padding:5px 5px;transition:all 0.3s ease;margin:0px -5px;border-radius:8px;}
.new-main-menu li .submenu .left-part ul li:not(.submenu-block-separate):hover {background:#292B3212;}
.new-main-menu li .submenu .left-part ul li.submenu-block-separate {padding:0px;margin:0px;}
.new-main-menu li .submenu .left-part ul li.submenu-block-separate p {margin:20px 0px 8px;}
.new-main-menu li:hover .submenu {opacity:1;visibility:visible;}
.new-main-menu li .submenu .left-part {display:flex;flex-direction:column;}
.new-main-menu li .menu-block {display:flex;gap:16px;}
.new-main-menu li .submenu .left-part > p {font-size:16px;color:#9B9B9B;margin-bottom:12px;width:100%;}
.new-main-menu li .submenu .left-part ul {width:calc(50% - 8px);padding:0px;gap: 4px;display: flex;flex-direction: column;box-sizing:border-box;}
.new-main-menu li .submenu .left-part ul.border {border-right:1px solid rgba(0,0,0,0.1);padding-right:16px;}
.new-main-menu li .submenu .left-part ul a {display:flex;font-size:18px;color:#292B32;gap:12px;align-items:center;}
.new-main-menu li .submenu .right-part {}
.new-main-menu li .submenu .menu-more-block {background:rgba(242, 242, 243, 0.8);padding:24px;box-sizing:border-box;border-radius:8px;}
.new-main-menu li .submenu .right-part .menu-more-block > p {font-size:16px;color:#9B9B9B;margin-bottom:24px;width:100%;}
.new-main-menu li .submenu .right-part > p {font-size:16px;color:#9B9B9B;margin-bottom:12px;width:100%;}
.new-main-menu li .submenu .right-part .banner {display:flex;gap:16px;align-items:center;margin-bottom:24px;font-size:18px;color:#292B32;}
.new-main-menu li .submenu .right-part .banner p {margin:0px;}
.new-main-menu li .submenu .right-part .button {padding:5px 10px;border:1px solid #999999;font-weight:400;}
.new-main-menu li .submenu .right-part ul {margin-bottom:18px;padding:0px;gap: 10px;display: flex;flex-direction: column;box-sizing:border-box;}
.new-main-menu li .submenu .right-part ul a {display:flex;font-size:18px;color:#292B32;gap:12px;align-items:center;}
.menu-container .search {display:flex;font-size:18px;color:#292B32;align-items:center;gap:6px;margin-left:auto;cursor:pointer;}
.new-main .search-field {padding:20px 0px;width:100%;box-sizing:border-box;border-top:1px solid #00000033;opacity:0;visibility:hidden;transition:all 0.3s ease;position:absolute;background: rgba(255, 255, 255, 0.8);backdrop-filter: blur(20px);}
.new-main .search-field.opened {opacity:1;visibility:visible;}
.new-main .search-field form {display:flex;gap:10px;background:#F0F0F0;border-radius:50px;padding:5px;box-sizing:border-box;align-items:center;}
.new-main .search-field form .clear {background: transparent;padding: 0px;border: 0px;outline: none;margin: 0px 10px 0px auto;height: 100%;display:flex;}
.new-main .search-field form input {width:100%;background:transparent;font-size:18px;margin-left:15px;border-radius:50px;border:0px;outline:none;}
.new-main-menu_container {margin:0px auto;}
@media (max-width: 1320px) {
  .new-main {padding:0px 62px;}
  .menu-container {gap:18px;padding:5px 0px;}
  .new-main-menu {gap:18px;}
  .menu-container > a img {min-width:178px;}
  .new-main-menu > li > a {font-size:14px;}
  .menu-container .logo {width:auto !important;}
  .menu-container button {font-size:14px;padding: 9px 24px;}
  .menu-container .search {font-size:14px;}
  .new-main .search-field .container-new {padding:0px;}
  .new-main .search-field {width:calc(100% - 124px);}
  .new-main .search-field form .submit {font-size:14px;}
}
@media (max-width: 1023px) {
  .new-main {padding:0px 40px;}
  .new-main-menu {position:absolute;top:100%;left:0px;width:100%;opacity:0;visibility:hidden;flex-direction: column;align-items: flex-start;padding-top:20px;border-top:1px solid #00000033;}
  .new-main-menu > li > a {padding:0px;font-size:16px;justify-content: space-between;}
  .menu-container .search {font-size:0px;gap:0px;}
  .new-main .burger {display:flex;background:transparent;outline:none;border:0px;padding:0px;}
  .new-main .logo-new {margin-left:auto;}
  .new-main.active {height:100%;}
  .new-main.active .new-main-menu {opacity:1;visibility:visible;overflow:auto;position:static;}
  .new-main-menu li {width:100%;overflow:auto;}
  .new-main-menu li:hover .submenu {opacity:0;visibility:hidden;}
  .new-main-menu > li:hover > a {color:#2B2E32;}
  .new-main-menu > li:hover > a svg path {fill: #2B2E32;}
  .new-main-menu > li:hover > a svg {transform:rotate(0deg);}
  .new-main-menu > li.openm > a {color:#78BE20;}
  .new-main-menu > li.openm > a svg path {fill: #78BE20;}
  .new-main-menu > li.openm > a svg {transform:rotate(180deg);}
  .new-main-menu li .submenu {width:1%;overflow:hidden;top:-1000px;backdrop-filter: none;width:100%;background: transparent;transform: translate(0px, 0px);box-shadow: none;padding:0px;padding-top:20px;}
  .new-main-menu > li.openm .submenu {overflow:visible;position: static;opacity: 1;visibility: visible;}
  .new-main-menu > li.openm .submenu .menu-block {width:100%;max-height: none;flex-direction: column;gap:4px;}
  .new-main-menu > li.openm .submenu .left-part ul {width:100%;border:0px;padding:0px;}
  .new-main-menu > li.openm .submenu .left-part {width:100%;}
  .new-main-menu li .submenu .left-part > p {font-size:12px;}
  .new-main-menu li .submenu .left-part ul a {font-size:14px;}
  .new-main.active .menu-container {position:static;}
  .new-main.active .new-main-menu_container {position: absolute;top: 49px;width: calc(100% - 48px);height: calc(100% - 49px);overflow: auto;padding-bottom:20px;}
  .new-main .search-field .container-new {padding:0px;}
  .new-main .search-field {width:calc(100% - 80px);}
}
@media (max-width: 767px) {
  .new-main .logo-new {margin-left:0px;}
  .new-main {padding:3px 12px;}
  .menu-container a.logo-new img {min-width:144px;}
  .menu-container {gap:12px;}
  .new-main .search-field form .submit {display:none;}
  .new-main .search-field form input {min-height:43px;}
  .new-main .search-field .container-new {padding:0px;}
  .new-main .search-field {width:calc(100% - 24px);}
}
.new-footer {display:flex !important;background:rgba(38, 41, 45, 1);padding:0px;}
.new-footer a {border-bottom:0px;}
.new-footer a:hover {opacity;1;}
.new-footer .sline {display:flex;align-items:center;margin-top:32px;padding-top:32px;box-sizing:border-box;border-top:1px solid #FFFFFF33;gap:32px;justify-content:space-between;width:100%;}
.new-footer .sline p {margin:0px;color:rgba(155, 155, 155, 1);}
.new-footer .sline a {margin-right:auto;font-size:16px;color:rgba(155, 155, 155, 1);}
.new-footer .sline .social {display:flex;gap:15px;align-items:center;}
.new-footer .sline .social a {display:flex;}
.new-footer .sline .social a svg * {transition:all 0.3s ease;}
.new-footer .sline .social a:hover {opacity:1;}
.new-footer .sline .social a:hover svg circle {fill:#60981a;}
.new-footer .sline .social a:focus svg circle {fill:#548516;}
@media (max-width: 1320px) {
  .new-footer .sline {gap:12px;font-size:14px;margin-top:28px;padding-top:28px;}
  .new-footer .sline a {font-size:14px;}
}
@media (max-width: 1023px) {
  .new-footer .sline {flex-wrap:wrap;}
  .new-footer .sline p {order:1;width:calc(50% - 6px);}
  .new-footer .sline .social {width:calc(50% - 6px);order:2;}
  .new-footer .sline a {order:3;}
}
@media (max-width: 767px) {
  .new-footer .sline {flex-direction:column;gap:4px;align-items:flex-start;}
  .new-footer .sline .social {width:100%;order:1;margin-bottom:14px;}
  .new-footer .sline p {width:100%;order:2;}
  .new-footer .sline a {margin-right:0px;}
}
.modules-banner .container-new {display:flex;
	flex-direction:column;
	align-items:center;}


/* ─── Кнопки: manzanagroup.ru, /cssNew/button.css ─── */
.button {
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    vertical-align: middle;
    border-radius: 50px;
    padding: 12px 24px;
    display: inline-block;
    cursor: pointer;
    border: none;
    transition: all 0.3s;
    width: max-content;
}

.button:hover {
    opacity: 0.8;
    transition: all 0.3s;
}

.button.button-primary {
    color: #FFFFFF;
    background-color: #78BE20;
}

.button.button-light {
    background: transparent;
    font-weight: 600;
    font-size: 18px;
    line-height: 130%;
    border: 1px solid #53565A4D;
    color: #53565A;
}

/* «Заявка» у них — <button>; здесь ссылка на /contacts/, поэтому правило
   для узкой шапки продублировано для <a> */
@media (max-width: 1320px) {
  .menu-container a.button { font-size: 14px; padding: 9px 24px; }
}

/* ─── Первый экран: manzanagroup.ru, template.css (.modules-banner) ─── */
@media (max-width: 1023px) {
  .mt-xl {margin-top:24px !Important;}
}
.modules-banner {background-color:rgba(0, 0, 0, 1);
	position:relative;
	padding-top:137px;
	box-sizing:border-box;
	overflow:hidden;}
.modules-banner:before {content:"";
	width:1137px;
	height:1137px;
	position:absolute;
	top:-27%;
	left:50%;
	transform:translate(-50%, 0%);
	border-radius:1000px;
	opacity:0.3;
	background:rgba(7, 102, 165, 1);
	filter: blur(300px);}
.modules-banner:after {content:"";
	width:1584px;
	height:544px;
	position:absolute;
	left:50%;
	bottom:-35%;
	transform:translate(-50%, 0%);
	border-radius:1000px;
	opacity:0.3;
	background:rgba(93, 187, 248, 1);
	filter: blur(170px);}
.modules-banner .container-new {display:flex;
	flex-direction:column;
	align-items:center;}
.modules-banner .module-label {color:rgba(204, 235, 255, 1);
	border: 1px solid rgba(204, 235, 255, 1);
	font-size:18px;
	padding:6px 12px 8px;
	border-radius:50px;
	box-sizing:border-box;}
.modules-banner .module-label.manzana-campaign {color:#CCEBFF;border-color:#CCEBFF;}
.modules-banner .module-label.manzana-cdp {color:#D9E7FF;border-color:#D9E7FF;}
.modules-banner .module-label.manzana-bi {color:#FFE8D0;border-color:#FFE8D0;}
.modules-banner .module-label.manzana-predictive-analytics {color:#FFE3D9;border-color:#FFE3D9;}
.modules-banner .module-label.manzana-digital {color:#FFF2D9;border-color:#FFF2D9;}
.modules-banner .module-label.manzana-loyalty {color:#D7ECBC;border-color:#D7ECBC;}
.modules-banner .module-name {color:#fff;
	font-size:72px;
	font-weight:600;
	margin-top:12px;
	max-width:1000px;
	text-align:center;
	line-height: 110%;}
.modules-banner .moudle-desc {margin-top:32px;
	color:#fff;
	font-size:32px;
	font-weight:600;
	text-align:center;
	max-width:800px;}
.modules-banner .moudle-subdesc {margin-top:12px;
	color:#fff;
	font-size:18px;
	text-align:center;
	max-width:800px;
	line-height:140%;}
@media (max-width: 1320px) {
  .modules-banner {padding-top:83px;}
  .modules-banner .module-label {font-size: 14px;padding: 4px 7px 6px;}
  .modules-banner .module-name {margin-top:8px;font-size:42px;}
  .modules-banner .moudle-desc {font-size:24px;max-width:590px;margin-top:24px;}
  .modules-banner .moudle-subdesc {margin-top:8px;font-size:14px;max-width: 750px;}
  .modules-banner:before {content:"";width:606px;height:606px;top:3%;opacity:1;}
  .modules-banner:after {content:"";width:1024px;height:290px;opacity:0.8;bottom:-18%;}
}
@media (max-width: 1023px) {
  .modules-banner .module-name {font-size:36px;}
  .mt-xl {margin-top:32px !important;}
  .modules-banner .moudle-desc {font-size:18px;max-width:572px;}
  .modules-banner .moudle-subdesc {max-width:572px;}
  .modules-banner:before {top:0px;}
  .modules-banner:after {bottom:-20%;}
}

/* ─── Наше: первый экран и чат ─── */
/* Цвет размытых кругов фона задаёт сама страница модуля: у «Лояльности» в
   разметке стоит <style>.modules-banner:before{background:#78BE20}</style>
   (и то же для :after) — без этого фон синий, как у других модулей */
.modules-banner:before, .modules-banner:after { background: #78BE20; }
.modules-banner { padding-bottom: 96px; }
.modules-banner .container-new { z-index: 1; }   /* над размытыми кругами фона */

/* Чат — белая карточка, как карточки модулей на их страницах */
.ldb-chat {
  position: relative; z-index: 1;
  width: 100%; max-width: 880px;
  margin-top: 48px;
  background: #fff; border-radius: 32px;
  padding: 32px 32px 24px;
  display: flex; flex-direction: column; gap: 20px;
  text-align: left;
}

.ldb-chat .log { display: flex; flex-direction: column; gap: 18px; }

.ldb-chat .msg-user {
  align-self: flex-end; max-width: 80%;
  background: #78BE20; color: #fff;
  font-size: 18px; line-height: 140%;
  padding: 12px 20px; border-radius: 24px 24px 6px 24px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* при прокрутке к вопросу не прятать его под закреплённую шапку (84px) */
.ldb-chat .msg-user { scroll-margin-top: 108px; }

.ldb-chat .msg-bot {
  align-self: stretch;
  font-size: 18px; line-height: 150%; color: #2B2E32;
  overflow-wrap: anywhere;
}
.ldb-chat .msg-bot.greeting { color: #53565A; }
.ldb-chat .msg-bot.greeting p:first-child { color: #2B2E32; font-weight: 600; font-size: 20px; }
.ldb-chat .msg-bot.system { color: #53565A; }
.ldb-chat .msg-bot.error { color: #B4432F; }
.ldb-chat .msg-bot p + p, .ldb-chat .msg-bot p + ul, .ldb-chat .msg-bot p + ol,
.ldb-chat .msg-bot ul + p, .ldb-chat .msg-bot ol + p,
.ldb-chat .msg-bot h3 + p, .ldb-chat .msg-bot h3 + ul { margin-top: 10px; }
.ldb-chat .msg-bot h3 { font-size: 22px; font-weight: 600; line-height: 120%; margin: 20px 0 0; }
.ldb-chat .msg-bot h3:first-child { margin-top: 0; }
.ldb-chat .msg-bot ul, .ldb-chat .msg-bot ol { padding-left: 24px; margin: 6px 0 0; }
.ldb-chat .msg-bot li + li { margin-top: 4px; }
.ldb-chat .msg-bot hr { border: 0; border-top: 1px solid #F1F1F2; margin: 18px 0; }
.ldb-chat .msg-bot strong { font-weight: 600; }
.ldb-chat .msg-bot code { background: #F0F0F0; border-radius: 6px; padding: 1px 6px; }
.ldb-chat .msg-meta { margin-top: 10px; font-size: 14px; color: #9B9B9B; }

.ldb-chat .thinking { color: #9B9B9B; }
.ldb-chat .thinking::after {
  content: ''; display: inline-block; width: 1.2em; text-align: left;
  animation: ldb-dots 1.4s steps(4, end) infinite;
}
@keyframes ldb-dots {
  0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; }
}

/* Примеры вопросов — «пилюли», как .button-light у них */
.ldb-chat .examples { display: flex; flex-wrap: wrap; gap: 8px; }
.ldb-chat .examples[hidden] { display: none; }
.ldb-chat .chip {
  font-size: 16px; line-height: 130%; color: #53565A;
  background: transparent; border: 1px solid #53565A4D; border-radius: 50px;
  padding: 8px 16px; cursor: pointer; text-align: left;
  transition: all 0.3s;
}
.ldb-chat .chip:hover { border-color: #78BE20; color: #78BE20; }

/* Поле ввода — как поле поиска в их шапке */
.ldb-chat .composer {
  display: flex; align-items: flex-end; gap: 10px;
  background: #F0F0F0; border-radius: 32px; padding: 6px 6px 6px 20px;
}
.ldb-chat .composer textarea {
  flex: 1; resize: none; min-height: 48px; max-height: 200px;
  background: transparent; border: 0; outline: none;
  font-size: 18px; line-height: 140%; color: #2B2E32;
  padding: 12px 0;
}
.ldb-chat .composer .button { flex: none; }
.ldb-chat .composer .button:disabled { background-color: #A9AAAC; cursor: wait; opacity: 1; }
.ldb-chat .note { font-size: 14px; color: #9B9B9B; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Подвал — только нижняя строка (© ООО, политика, соцсети) */
.new-footer .container-new { padding-top: 0; padding-bottom: 32px; }
.new-footer .sline { margin-top: 0; border-top: 0; }

@media (max-width: 1320px) {
  .ldb-chat { margin-top: 36px; border-radius: 18px; padding: 24px 24px 20px; }
  .ldb-chat .msg-user, .ldb-chat .msg-bot { font-size: 16px; }
  .ldb-chat .chip { font-size: 14px; }
  .ldb-chat .composer textarea { font-size: 16px; }
}
@media (max-width: 767px) {
  .modules-banner { padding-bottom: 48px; }
  .ldb-chat { padding: 18px 16px 16px; }
  .ldb-chat .msg-user { max-width: 92%; }
}

h1 { margin: 0; }

/* кнопки шагов мастера концепции */
.ldb-chat .concept-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ldb-chat .chip:disabled { opacity: .45; cursor: default; }