/* ИИ-помощник площадки: кнопки входа в переписку с ИИ (слово владельца
   20.10.2026 — «у всех была возможность обратиться к ИИ»).

   Входов четыре, переписка одна:
   - шапка компьютера (`.topbar-ai`, templates/base.html) — на каждой странице;
   - шапка телефона (`.m-ai`, templates/_mobile/_topbar.html);
   - «Чат с клиентами» на компьютере (`.ai-btn`; на телефоне хватает кнопки в шапке прямо над ним);
   - чат в карточке заказа (`.oc-ai`, apps/lk/templates/lk/_order_chat.html).
   Подключается и в base.html, и в base_mobile.html. */

/* Свои имена цветов: компьютер берёт токены tokens.css, телефон — tokens-mobile.css
   (там другие имена, `--m-*`). */
:root {
  --ai-accent: var(--accent, #1d827b); --ai-accent-hover: var(--accent-hover, #156b65);
  --ai-accent-soft: var(--accent-soft, #e9f5f3); --ai-accent-line: var(--accent-line, #c4e3df);
  --ai-bad: var(--bad, #b91c1c); --ai-bad-soft: var(--bad-soft, #fee2e2);
  --ai-bg-alt: var(--bg-alt, #f4f5f7); --ai-bg-card: var(--bg-card, #fff);
  --ai-border: var(--border, #e5e7eb); --ai-ink: var(--ink, #0a0e1a); --ai-mute: var(--mute, #6b7280);
  --ai-color-on-primary: var(--color-on-primary, #fff);
}
body.m-page {
  --ai-accent: var(--m-primary, #1d827b); --ai-accent-hover: var(--m-primary-hover, #156b65);
  --ai-accent-soft: var(--m-primary-soft, #e9f5f3); --ai-accent-line: var(--m-primary-line, #c4e3df);
  --ai-bad: var(--m-bad, #b91c1c); --ai-bad-soft: var(--m-bad-soft, #fee2e2);
  --ai-bg-alt: var(--m-bg-alt, #f4f5f7); --ai-bg-card: var(--m-bg-card, #fff);
  --ai-border: var(--m-border, #e5e7eb); --ai-ink: var(--m-ink, #0a0e1a); --ai-mute: var(--m-mute, #6b7280);
}

/* ── Шапка компьютера (тёмная полоса 40px) ── */
.topbar-ai {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  height: 28px; padding: 0 9px; margin-left: 10px;
  border-radius: 7px; border: 1px solid rgba(79, 209, 197, 0.45);
  color: #4fd1c5; background: rgba(79, 209, 197, 0.12);
  font-size: 12px; font-weight: 700; letter-spacing: .02em; text-decoration: none;
}
.topbar-ai:hover { background: rgba(79, 209, 197, 0.22); color: #7ee3d9; }
.topbar-ai:focus-visible { outline: 2px solid #7ee3d9; outline-offset: 1px; }
.topbar-ai + .chat-toggle { margin-left: 6px; }

/* ── Шапка телефона ── */
.m-ai {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
  height: 34px; padding: 0 9px; margin-left: auto; margin-right: 6px;
  border-radius: 9px; border: 1px solid var(--ai-accent-line);
  background: var(--ai-accent-soft); color: var(--ai-accent);
  font-size: 12px; font-weight: 700; text-decoration: none;
}
.m-ai + .m-cart-pill { margin-left: 0; }

/* ── «Чат с клиентами» ── */
.lk-btn.ai-btn { background: var(--ai-accent); border-color: var(--ai-accent); color: var(--ai-color-on-primary); }

/* ── Чат карточки заказа: кнопка ИИ и поле размера шрифта ── */
.oc-tools .oc-ai {
  display: inline-flex; align-items: center; height: 24px; padding: 0 7px; margin-left: 4px;
  border-radius: 6px; background: var(--ai-accent); color: var(--ai-color-on-primary);
  font-size: 11px; font-weight: 700; text-decoration: none; line-height: 1;
}
.oc-tools .oc-ai:hover { background: var(--ai-accent-hover); }
.oc-tools .oc-fs { display: inline-flex; align-items: center; gap: 2px; margin-right: 2px; }
.oc-tools .oc-fs-in {
  width: 46px; height: 24px; padding: 0 4px; box-sizing: border-box;
  border: 1px solid var(--ai-border); border-radius: 6px; background: var(--ai-bg-card);
  color: var(--ai-ink); font: inherit; font-size: 11.5px; text-align: left;
}
.oc-tools .oc-fs-in:focus { outline: 2px solid var(--ai-accent); outline-offset: -1px; }

/* ── Окно переписки (templates/_help_ai_panel.html) ──
   Компьютер: колонка справа от шапки до низа окна, поверх страницы и панели
   чата. Телефон: весь экран. Закрыто — не рисуется вовсе. */
.ai-panel { display: none; }
html.ai-open .ai-panel {
  display: flex; flex-direction: column; position: fixed; z-index: 1200;
  top: var(--tb-h, 40px); right: 0; bottom: 0; width: 380px; max-width: 100vw;
  background: var(--ai-bg-card); border-left: 1px solid var(--ai-border);
  box-shadow: -8px 0 24px rgba(10, 14, 26, 0.12);
  font-size: 13px; color: var(--ai-ink);
}
.ai-panel__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--ai-border); }
.ai-panel__t { font-size: 14px; }
.ai-panel__badge {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ai-accent); background: var(--ai-accent-soft); border-radius: 4px; padding: 2px 6px;
}
.ai-panel__back { display: none; }
.ai-panel__ico { margin-left: auto; border: 0; background: none; color: var(--ai-mute); font-size: 14px; cursor: pointer; text-decoration: none; }
.ai-panel__ico + .ai-panel__ico { margin-left: 4px; }
.ai-panel__ctx { font-size: 11.5px; color: var(--ai-mute); padding: 6px 12px; background: var(--ai-bg-alt); }
.ai-panel__feed { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ai-msg { max-width: 86%; padding: 7px 10px; border-radius: 10px; line-height: 1.42; white-space: pre-wrap; }
.ai-msg--bot { align-self: flex-start; background: var(--ai-bg-alt); border-bottom-left-radius: 3px; }
.ai-msg--me { align-self: flex-end; background: var(--ai-accent); color: var(--ai-color-on-primary); border-bottom-right-radius: 3px; }
.ai-msg a { color: var(--ai-accent); }
.ai-msg__shot { display: block; max-width: 180px; border-radius: 6px; margin-bottom: 4px; border: 1px solid rgba(255,255,255,.4); }
.ai-bug { align-self: stretch; border: 1px solid #f3c2c2; background: var(--ai-bad-soft); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; }
.ai-bug b { color: var(--ai-bad); }
.ai-bug__btn { display: inline-block; margin-top: 7px; padding: 4px 10px; border-radius: 6px; background: var(--ai-bad); color: #fff; font-weight: 600; border: 0; font: inherit; font-size: 12.5px; }
.ai-bug__what { color: var(--ai-mute); font-size: 11.5px; margin-left: 6px; }
.ai-panel__inp { display: flex; gap: 6px; align-items: flex-end; padding: 8px; border-top: 1px solid var(--ai-border); }
.ai-panel__ta { flex: 1; min-height: 34px; max-height: 140px; resize: none; padding: 7px 9px; border: 1px solid var(--ai-border); border-radius: 8px; font: inherit; font-size: 13px; color: var(--ai-ink); }
.ai-panel__ib, .ai-panel__send { width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--ai-border); background: var(--ai-bg-card); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ai-panel__send { background: var(--ai-accent); border-color: var(--ai-accent); color: var(--ai-color-on-primary); }

/* Телефон: окно на весь экран, «‹» вместо крестика. */
html.ai-open body.m-page .ai-panel { top: 0; width: 100vw; border-left: 0; box-shadow: none; }
body.m-page .ai-panel__back { display: inline-flex; border: 0; background: none; font-size: 22px; line-height: 1; padding: 0 4px 0 0; color: var(--ai-ink); }
body.m-page .ai-panel__ico { display: none; }

/* Подписи кнопок шапки чата заказа — всегда в одну строку (жалоба владельца
   20.10.2026 по макету: «ИИ» со значком и «☑ Выбрать» переносились в две
   строки, когда панель узкая). Не хватает места — сжимается поле шрифта, а не
   подписи. */
.oc-tools .oc-ai, .oc-tools .oc-select-toggle, .oc-tools .oc-fs button { white-space: nowrap; flex-shrink: 0; }

/* Отметки площадки, ошибки, «думаю», «Спросить владельца», приложенный скриншот. */
.ai-msg--note { align-self: stretch; max-width: none; background: var(--ai-accent-soft); color: var(--ai-ink); font-size: 12.5px; }
.ai-msg--err { align-self: stretch; max-width: none; background: var(--ai-bad-soft); color: var(--ai-bad); font-size: 12.5px; }
.ai-msg--wait { color: var(--ai-mute); font-style: italic; }
.ai-ask { align-self: flex-start; }
.ai-ask__btn { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--ai-accent); background: var(--ai-bg-card); color: var(--ai-accent); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ai-bug__btn { cursor: pointer; }
.ai-bug__btn[disabled], .ai-ask__btn[disabled] { opacity: .55; cursor: progress; }
.ai-panel__att { display: flex; align-items: center; gap: 8px; padding: 6px 12px 0; font-size: 12px; color: var(--ai-mute); }
.ai-panel__att[hidden] { display: none; }
.ai-panel__att button { border: 0; background: none; color: var(--ai-mute); cursor: pointer; }
.ai-panel__inp.is-busy .ai-panel__send { opacity: .55; cursor: progress; }

/* Переписка на всю страницу (/ai/): то же окно, по центру, шириной до 860px. */
html.ai-page.ai-open .ai-panel { left: 0; right: 0; width: min(860px, 100vw); margin: 0 auto; border-right: 1px solid var(--ai-border); box-shadow: none; }
html.ai-page .ai-panel__wide { display: none; }

/* Вкладка «Чат» телефонной карточки заказа: вход в переписку с ИИ своей строкой. */
.mod-ai { margin: 12px 0 0; }
.mod-ai .m-ai { margin: 0; }