/* Секция и заголовок используют штатные классы шаблона
   (faq2-section-area / heading4 / tg-element-title / space10 / space44),
   поэтому фон, отступы и типографика приходят из темы сайта.
   Ниже — только то, что относится к самому окну чата. */
.ai-section *{box-sizing:border-box}
/* Виджет Битрикс24 (z-index 10150) висит выше шапки сайта (z-index 111),
   поэтому поднять карточку над ним нельзя — она перекроет шапку.
   Вместо этого запрещаем всплывающей подсказке виджета перехватывать
   клики по полю ввода. Круглая кнопка виджета не затронута. */
/* Подсказка виджета висит над карточкой чата, поэтому сквозь её поле клики проходят насквозь. Но содержимое — текст и крестик — должно нажиматься, иначе подсказку нечем закрыть. */.b24-widget-button-popup{pointer-events:none}.b24-widget-button-popup *{pointer-events:auto}
/* Карточка фиксированной высоты: интерфейс не прыгает при появлении
   первого сообщения, и ничего не заезжает под подвал.
   z-index — чтобы виджет Битрикс24 не перехватывал клики по полю ввода. */
/* Значок беты рядом с заголовком. Внутрь h1 его класть нельзя:
   анимация темы (tg-element-title) разбирает содержимое заголовка на
   строки и символы, и любой вложенный тег она съедает. Поэтому значок
   стоит соседом, а в строку их собирает флекс. */
.ai-title-row h1{margin-bottom:0}
/* Значок — часть заголовка, поэтому идёт сразу за последним словом и на
   любой ширине переносится вместе с ним. Размер и подъём считаем от кегля
   заголовка, чтобы не подгонять их под каждый экран отдельно. */
.ai-beta{color:#8a99a8;font-size:.44em;font-weight:600;line-height:1;cursor:help;white-space:nowrap;margin-left:.16em;top:-.5em}
/* На узком экране заголовок переносится на две строки, и значок-сосед
   улетает к правому краю, далеко от текста. Там опускаем его отдельной
   строкой под заголовком. */
@media(max-width:767px){/* заголовок и текст под ним стояли вплотную */.ai-section .heading4 p{margin-top:12px}/* готовых вопросов на телефоне показываем пять: десять занимают весь экран */.ai-card .examples button:nth-child(n+6){display:none}/* разделитель между текстом и карточкой скрыт на телефоне темой (space44 d-none), поэтому задаём отступ сами */.ai-card{margin-top:24px}}
.ai-card{position:relative;z-index:1;display:flex;flex-direction:column;height:min(64vh,620px);min-height:430px;background:#fff;border:1px solid #e3e8ed;border-radius:6px;overflow:hidden;text-align:left}
/* --- кнопка «на весь экран» --- */
.ai-card .ai-card-tools{position:absolute;top:10px;right:12px;z-index:3;display:flex;gap:6px}
.ai-card .ai-fs-btn{width:34px;height:34px;padding:0;border:1px solid #e3e8ed;background:#fff;border-radius:8px;color:#5b6b7a;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(20,38,55,.06)}
.ai-card .ai-fs-btn:hover{background:#f3f5f7;color:#142637}
.ai-card .ai-fs-btn svg{width:17px;height:17px;display:block}
.ai-card .ai-fs-btn .icon-exit{display:none}
.ai-card.is-full .ai-fs-btn .icon-exit{display:block}
.ai-card.is-full .ai-fs-btn .icon-enter{display:none}
/* Полноэкранный режим. z-index поднимаем только здесь — в обычном
   состоянии карточка остаётся под липкой шапкой сайта. */
/* Секция темы имеет position:relative и z-index:1 — она создаёт контекст
   наложения, и карточка внутри не может подняться над подвалом (тоже z-index:1).
   Поэтому на время разворота поднимаем саму секцию. */
body.ai-fullscreen .ai-section{z-index:10300}
.ai-card.is-full{position:fixed;inset:0;z-index:10300;width:100%;max-width:none;height:100%;min-height:0;border:0;border-radius:0}
.ai-card.is-full .ai-scroll{padding:30px max(24px,calc(50% - 460px)) 10px}
.ai-card.is-full .composer-area{padding:14px max(16px,calc(50% - 460px)) 12px}
html.ai-fullscreen,body.ai-fullscreen{overflow:hidden}
/* виджет Битрикс24 висит выше всего — в полноэкранном режиме убираем */
body.ai-fullscreen .b24-widget-button-wrapper,body.ai-fullscreen .b24-widget-button-popup,body.ai-fullscreen .b24-widget-button-shadow{display:none!important}
.ai-card .ai-scroll{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:24px 24px 6px}
.ai-card .ai-scroll::-webkit-scrollbar{width:8px}
.ai-card .ai-scroll::-webkit-scrollbar-thumb{background:#d7dde3;border-radius:8px}
.ai-card .intro{padding:4px 0 8px}
.ai-card .intro p{max-width:640px;margin:0;color:#5b6b7a;font-size:15px;line-height:1.55}
.ai-card .examples{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ai-card .examples button{border:1px solid #e3e8ed;background:#fff;border-radius:999px;padding:10px 14px;font:inherit;font-size:13px;color:#43566a;cursor:pointer}
.ai-card .examples button:hover{background:#f3f5f7}
.ai-card .messages{display:flex;flex-direction:column;gap:22px;padding:4px 0 8px}
.ai-card .message{max-width:min(92%,76ch);font-size:15.5px;line-height:1.62;white-space:pre-wrap;word-wrap:break-word;color:#142637}
.ai-card .message.user{align-self:flex-end;background:#f3f5f7;padding:12px 16px;border-radius:14px 14px 4px 14px}
.ai-card .message.assistant{align-self:flex-start}
/* карточки страниц сайта под ответом — собираются из catalog.json на сервере */
.ai-card .cards{display:flex;flex-direction:column;gap:10px;align-self:flex-start;width:100%;max-width:min(92%,60ch);margin-top:-10px}
.ai-card .card{display:flex;flex-direction:row;align-items:stretch;background:#fff;border:1px solid #e3e8ed;border-radius:8px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.ai-card .card:hover{border-color:#c9d3dc;box-shadow:0 4px 14px rgba(20,38,55,.08)}
.ai-card .card-img{flex:0 0 152px;width:152px;align-self:stretch;min-height:104px;object-fit:contain;display:block;background:#f3f5f7;padding:8px}
.ai-card .card-body{display:flex;flex-direction:column;justify-content:center;gap:7px;flex:1;min-width:0;padding:12px 16px}
.ai-card .card-title{font-size:13.5px;line-height:1.35;font-weight:500;color:#142637}
.ai-card .card-btn{font-size:12px;font-weight:600;color:#f5921e}
.ai-card .role{display:flex;align-items:center;gap:5px;color:#8a99a8;font-size:10px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:6px}
.ai-card .role-logo{width:1.3em;height:1.3em;flex:0 0 auto;display:block}
.ai-card .composer-area{flex:0 0 auto;border-top:1px solid #e3e8ed;background:#fff;padding:12px 16px 10px}
.ai-card .composer{display:flex;align-items:flex-end;gap:10px;border:1px solid #dfe5ea;background:#fff;border-radius:14px;padding:7px 7px 7px 14px;margin:0}
.ai-card .composer:focus-within{border-color:#b9c4ce}
.ai-card textarea{flex:1;resize:none;border:0;outline:0;font:inherit;font-size:15.5px;line-height:1.45;max-height:150px;min-height:40px;padding:9px 0;background:transparent;color:#142637}
.ai-card textarea::placeholder{color:#9fb0bf}
/* font-family кнопке НЕ задаём: стрелка должна рисоваться тем же
   шрифтом, что и раньше, иначе глиф меняет начертание. */
.ai-card .send{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;flex:0 0 auto;padding:0 13px;border:0;border-radius:11px;background:#142637;color:#fff;font-size:18px;cursor:pointer}
.ai-card .send-key{color:#fff;font-family:inherit;font-size:13px;font-weight:500;line-height:1}
.ai-card .send-arrow{display:flex;align-items:center;line-height:1}
.ai-card .send-arrow svg{width:17px;height:17px;display:block}
.ai-card .send:hover{background:#1d3349}
.ai-card .send:disabled{opacity:.35;cursor:not-allowed}
.ai-card .under{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:8px 4px 0;font-size:11px;line-height:1.5;color:#8a99a8}
.ai-card .under span{max-width:120ch}
.ai-card .under button{flex:0 0 auto;align-self:flex-start}
.ai-card .under button{border:0;background:none;color:#7b8b9a;padding:0;cursor:pointer;font:inherit}
.ai-card .error{margin:0 0 8px;color:#a22;font-size:13px}
.ai-card .typing{color:#8a99a8}
.ai-card .order{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* --- админ-панель под чатом, видна только администратору --- */
.ai-admin{margin-top:20px;background:#fff;border:1px solid #e3e8ed;border-radius:8px;padding:16px 18px;font-size:13px;color:#142637;text-align:left}
/* Расход идёт первым блоком, индексы — вторым, поэтому разделитель здесь */
.ai-admin-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px;margin-top:20px;padding-top:16px;border-top:1px solid #eef1f4}
.ai-admin-title{font-weight:600;font-size:14px}
.ai-admin-btn{border:1px solid #142637;background:#142637;color:#fff;border-radius:8px;padding:8px 16px;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.ai-admin-btn:hover:not(:disabled){background:#1d3349}
.ai-admin-btn:disabled{opacity:.45;cursor:not-allowed}
.ai-admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}
.ai-stat{background:#f7f8fa;border-radius:6px;padding:12px 14px}
.ai-stat-label{color:#7b8b9a;font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.ai-stat-value{font-size:21px;font-weight:600;line-height:1.1}
.ai-stat-sub{color:#7b8b9a;font-size:11.5px;margin-top:5px;line-height:1.45}
.ai-progress{margin-top:15px}
.ai-progress-bar{height:8px;background:#eef1f4;border-radius:999px;overflow:hidden}
.ai-progress-bar span{display:block;height:100%;width:0;background:#f5921e;border-radius:999px;transition:width .4s ease}
.ai-progress-text{margin-top:7px;color:#5b6b7a;font-size:12px}
.ai-admin-note{margin-top:12px;padding:10px 12px;border-radius:6px;background:#fdf3e7;color:#8a5a12;font-size:12.5px}
.ai-admin-note.error{background:#fdeaea;color:#a22}
.ai-usage{margin-top:0}
.ai-usage-note{margin-top:10px;color:#8a99a8;font-size:11.5px;line-height:1.5}
/* плитки и графики расхода — как в консоли провайдера */
.ai-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.ai-tile{background:#f7f8fa;border-radius:8px;padding:13px 15px}
.ai-tile-label{color:#7b8b9a;font-size:11px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.ai-tile-value{font-size:23px;font-weight:600;line-height:1.1;color:#142637;font-variant-numeric:tabular-nums}
.ai-tile-sub{color:#8a99a8;font-size:11.5px;margin-top:4px}
.ai-charts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.ai-chart{background:#fff;border:1px solid #e3e8ed;border-radius:8px;padding:12px 8px 6px}
.ai-chart-wide{grid-column:auto}
.ai-chart-title{padding:0 8px 1px;color:#5b6b7a;font-size:12px;font-weight:500}
.ai-chart-now{display:flex;align-items:baseline;gap:7px;padding:0 8px 8px;min-height:26px}
.ai-chart-now b{color:#142637;font-size:21px;font-weight:600;line-height:1.1;letter-spacing:-.01em}
.ai-chart-now i{color:#8a99a8;font-size:11px;font-style:normal;line-height:1.1}
.ai-chart-box{height:180px}
.ai-chart-box.empty{display:flex;align-items:center;justify-content:center;color:#8a99a8;font-size:12px}
@media(max-width:1100px){.ai-charts{grid-template-columns:1fr 1fr}.ai-chart-wide{grid-column:1/-1}}
@media(max-width:700px){.ai-charts{grid-template-columns:1fr}}
@media(max-width:600px){.ai-chart-box{height:150px}}
.ai-usage-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ai-usage-title{font-weight:600;font-size:14px}
.ai-usage-hint{color:#8a99a8;font-size:11.5px}
.ai-tile.low .ai-tile-value{color:#a22}
.ai-tile.low{background:#fdeaea}
.ai-usage-table{overflow-x:auto}
.ai-usage-table table{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap}
.ai-usage-table th{text-align:right;color:#7b8b9a;font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:500;padding:0 0 8px 14px}
.ai-usage-table th:first-child{text-align:left;padding-left:0}
.ai-usage-table td{text-align:right;padding:7px 0 7px 14px;border-top:1px solid #eef1f4;font-variant-numeric:tabular-nums}
.ai-usage-table td:first-child{text-align:left;padding-left:0;color:#5b6b7a}
.ai-usage-table .cost{font-weight:600;color:#142637}
.ai-usage-empty{color:#8a99a8;font-size:12.5px}
@media(max-width:600px){.ai-card{height:auto;min-height:0;scroll-margin-top:74px}.ai-card .send-key{display:none}.ai-card .send{padding:0;width:44px;height:44px}.ai-card .cards{max-width:100%}.ai-card .card-img{flex:0 0 112px;width:112px;min-height:84px;padding:6px}.ai-card .card-body{padding:10px 12px}.ai-card .ai-scroll{max-height:56vh;padding:18px 16px 4px}.ai-card.is-full .ai-scroll{max-height:none}.ai-card .composer-area{padding:10px 12px 8px}.ai-card .message{max-width:96%}.ai-card .examples{gap:6px}.ai-card .examples button{font-size:12px;padding:9px 11px}.ai-card .under{font-size:11px}}

/* Пояснительный блок под чатом — оформлен как на страницах инструментов.
   Отступ между ним и чатом задаём здесь: раньше складывались 80 px снизу
   у секции чата и 50 px сверху у блока, получался провал в 130 px. */
.ai-section{padding-bottom:44px}
.ai-article{background:var(--ztc-bg-bg-1);padding:0 0 60px}
.ai-article-card{background:var(--ztc-text-text-1);border:1px solid var(--ztc-border-border-1);border-radius:4px;box-shadow:0 18px 40px rgba(20,38,55,.08);padding:40px}
.ai-article-card h2{font-size:24px;line-height:1.3;margin:0 0 12px}
.ai-article-card h3{font-size:19px;line-height:1.35;margin:0 0 10px}
.ai-article-card p{margin:0 0 12px;line-height:1.6}
.ai-article-card ul{margin:0 0 14px;padding-left:20px}
.ai-article-card li{margin-bottom:8px;line-height:1.55}
.ai-article-card a{color:var(--ztc-text-text-9);text-decoration:underline}
.ai-article-section{margin-top:26px}
.ai-article-grid{display:grid;gap:26px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:26px}
.ai-article-example{background:var(--ztc-bg-bg-1);border-left:3px solid var(--ztc-bg-bg-3);border-radius:4px;color:var(--ztc-text-text-6);padding:10px 14px}
.ai-faq{margin-top:30px}
.ai-faq h4{color:var(--ztc-text-text-5);font-size:18px;font-weight:var(--ztc-weight-bold);line-height:1.4;margin:22px 0 8px;scroll-margin-top:90px}
@media(max-width:767px){.ai-section{padding-bottom:28px}.ai-article{padding-bottom:40px}.ai-article-card{padding:22px}.ai-article-grid{grid-template-columns:1fr;gap:20px}.ai-article-card h2{font-size:21px}.ai-article-card h3{font-size:18px}}