/*
 * RU: Стили раздела «ИИ-помощник» (БП5, подписка для бизнеса) нового кабинета /biz/app/. Правила — внутри body.bt-page и на
 *     токенах сайта (--k-*), без литералов цвета (храповик check:theme). Файл свой у каждой фазы — потоки не правят один файл.
 * EN: Styles of the "ИИ-помощник" section (БП5, business subscription) of the new /biz/app/ cabinet. Rules sit inside
 *     body.bt-page and use site tokens (--k-*), no colour literals (the check:theme ratchet). One file per phase.
 */

/* RU: П1: начертания 400/500/600, 700 — только знак бренда. Заголовки карточек и <b> по умолчанию браузера — 700; в теле экрана
   они 600. Заголовок экрана и шапка — общие стили оболочки, их правит не фаза.
   EN: П1: weights 400/500/600, 700 is for the brand mark only. Card headings and <b> default to 700 in the browser; in the screen
   body they are 600. The screen title and the header are shared shell styles, not the phase's to edit. */
body.bt-page .sc-ai .sc-body :is(h3, b, strong) {font-weight: 600;}

/* RU: Квота — строка и полоска расхода; исчерпанная подсвечена предупреждением, а не ошибкой: это не поломка.
   EN: The quota — a line and a usage bar; a used-up one is tinted as a warning, not an error: nothing is broken. */
body.bt-page .ai-bar {height: 6px; margin-top: var(--k-s-2); border-radius: var(--k-r-pill); background: var(--k-surface-3); overflow: hidden;}
body.bt-page .ai-bar i {display: block; height: 100%; border-radius: inherit; background: var(--k-brand);}
body.bt-page .ai-quota.is-full .ai-bar i {background: var(--k-warn);}
body.bt-page .ai-quota.is-full b {color: var(--k-warn);}

/* RU: Раскладка: слева — что просим, справа — черновик; на телефоне одна колонка (правило .grid-2 оболочки). Зазор между
   карточками даёт .sc-body (16 px) — своих отступов нет, иначе он удваивается.
   EN: The layout: what we ask for on the left, the draft on the right; one column on a phone (the shell's .grid-2 rule). The gap
   between cards comes from .sc-body (16 px) — no own margins, otherwise it doubles. */
body.bt-page .ai-layout {align-items: start;}

/* RU: Список отзывов без ответа — кнопки на всю ширину, выбранный — рамкой бренда; высота ограничена, чтобы форма под ним
   не уезжала за экран. EN: The unanswered list — full-width buttons, the picked one with a brand border; height is capped so
   the form below never slides off screen. */
body.bt-page .ai-reviews {display: grid; gap: var(--k-s-2); max-height: 420px; overflow-y: auto;}
body.bt-page .ai-review {display: grid; gap: 4px; width: 100%; padding: var(--k-s-2) var(--k-s-3); text-align: left; cursor: pointer;
  border: 1px solid var(--k-border); border-radius: var(--k-r-2); background: var(--k-surface); color: var(--k-text);
  font: 500 var(--k-fs-2) / var(--k-lh-sm) var(--k-font-ui);}
body.bt-page .ai-review:hover {border-color: var(--k-border-strong);}
body.bt-page .ai-review.is-on {border-color: var(--k-brand); background: var(--k-brand-soft);}
body.bt-page .ai-review:focus-visible {outline: 2px solid var(--k-brand); outline-offset: 2px;}
body.bt-page .ai-snip {color: var(--k-text-muted);}
body.bt-page .ai-stars {color: var(--k-viz-gold); letter-spacing: 1px;}
body.bt-page .ai-stars i {font-style: normal; color: var(--k-border-strong);}

/* RU: Ожидание модели: кольцо-индикатор и строка со счётчиком секунд. При «меньше движения» кольцо стоит — строка всё
   равно говорит, что модель думает. EN: Waiting for the model: a ring indicator and a line with a seconds counter. With
   reduced motion the ring stands still — the line still says the model is thinking. */
body.bt-page .ai-wait {display: flex; align-items: center; gap: var(--k-s-3); min-height: 120px; font: 600 var(--k-fs-3) / var(--k-lh-base) var(--k-font-ui); color: var(--k-text);}
body.bt-page .ai-spin {flex: none; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--k-surface-3);
  border-top-color: var(--k-brand); animation: ai-spin 0.9s linear infinite;}
@keyframes ai-spin {to {transform: rotate(360deg);}}
@media (prefers-reduced-motion: reduce) {
  body.bt-page .ai-spin {animation: none;}
}

/* RU: Пустое место под черновик — спокойная подсказка с иконкой. EN: The empty draft slot — a calm hint with an icon. */
body.bt-page .ai-empty {display: grid; justify-items: center; gap: var(--k-s-2); padding: var(--k-s-5) var(--k-s-3); text-align: center;}
body.bt-page .ai-empty .ic {width: 24px; height: 24px; color: var(--k-brand);}

/* RU: Поле черновика выше обычного: текст «о нас» — до 1200 знаков; кегль 14/20 из шкалы П1 — длинный текст читают, а не
   пробегают. Превышение длины — цветом предупреждения.
   EN: The draft field is taller than usual: an "about" text is up to 1200 characters; 14/20 from the П1 scale — a long text is
   read, not skimmed. Over-length shows in the warning colour. */
body.bt-page .ai-out {width: 100%; min-height: 160px; font: 400 var(--k-fs-3) / var(--k-lh-base) var(--k-font-ui);}
body.bt-page .ai-over {color: var(--k-warn); font-weight: 600;}
body.bt-page .ai-result .banner {margin-top: var(--k-s-2);}

/* RU: Замечания предпроверки ответа: ошибки — цветом опасности, предупреждения — предупреждения; «проходит» — зелёным.
   EN: Reply pre-check issues: errors in the danger colour, warnings in the warning colour; "passes" in green. */
body.bt-page .ai-issues {margin: var(--k-s-2) 0 0; padding-left: var(--k-s-4); font-size: var(--k-fs-2); line-height: var(--k-lh-sm);}
body.bt-page .ai-issues li.is-error {color: var(--k-danger);}
body.bt-page .ai-issues li.is-warn {color: var(--k-warn);}
body.bt-page .ai-ok {display: flex; align-items: center; gap: var(--k-s-1); margin: var(--k-s-2) 0 0; color: var(--k-ok); font-weight: 600;}

/* RU: Телефон (П4): кнопки, переключатели тона и строки отзывов не ниже 40 px, кнопки черновика — во всю ширину; для пальца
   (pointer: coarse) — 44 px. Общие .btn.is-sm (34) и .seg.is-xs (28) на компьютере остаются компактными.
   EN: Phone (П4): buttons, tone switches and review rows are at least 40 px, draft buttons go full width; for a finger
   (pointer: coarse) — 44 px. The shared .btn.is-sm (34) and .seg.is-xs (28) stay compact on a desktop. */
@media (max-width: 640px) {
  body.bt-page .ai-reviews {max-height: 300px;}
  body.bt-page .ai-result .btn {flex: 1 1 100%;}
  body.bt-page .sc-ai .btn, body.bt-page .sc-ai .seg button, body.bt-page .sc-ai .ai-review {min-height: 40px;}
}
@media (pointer: coarse) {
  body.bt-page .sc-ai .btn, body.bt-page .sc-ai .seg button, body.bt-page .sc-ai .ai-review {min-height: 44px;}
}