/* ==========================================================================
   AI assistant sheet — direction A (2026-09-17).
   Template: templates_v2/core/_ai_chat_modal.html (links this file).
   Behaviour: static/core/js/ai-chat.js (unchanged) + js/v2/ai-chat-skin.js.

   Every rule is under `.ui2 #aiChatModal`. The old static/core/css/ai-chat.css
   still loads from base.html; its .aic-* rules style the markup ai-chat.js
   builds, and the id in these selectors outranks them without !important.
   The template-owned chrome uses .ai2-* classes, so the old stylesheet's two
   `display: none !important` rules (quick replies, footer CTA) never match it.

   Desktop and tablet: a 760px sheet over the dimmed page, the transcript
   scrolls between a fixed header and the composer. Phone (< 734px): the sheet
   is the whole screen and the composer sits at the bottom.
   ========================================================================== */

/* ---------------------------------------------------------------- page dim */
/* style.css paints this backdrop with a purple gradient and a 10px blur. The
   backdrop fades in before the modal gets .show, so body.ai2-open (set by the
   skin on show.bs.modal) covers those frames and the id rule outranks the
   style.css one after them. */
body.ui2.ai2-open .modal-backdrop,
body.ui2.modal-open:has(#aiChatModal.show) .modal-backdrop {
  background: #000;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
body.ui2.ai2-open .modal-backdrop.show,
body.ui2.modal-open:has(#aiChatModal.show) .modal-backdrop.show { opacity: 0.42; }

/* ------------------------------------------------------------------ sheet */
.ui2 #aiChatModal { color: var(--ink); }
.ui2 #aiChatModal [hidden] { display: none !important; }

/* Centred like .modal-dialog-centered once max-height caps the sheet on a tall screen. */
.ui2 #aiChatModal .ai2-dialog { display: flex; align-items: center; max-width: 760px; min-height: calc(100% - 56px); margin: 28px auto; }
.ui2 #aiChatModal.fade .ai2-dialog { transform: scale(0.98); transition: transform 0.25s ease; }
.ui2 #aiChatModal.show .ai2-dialog { transform: none; }

.ui2 #aiChatModal .ai2-sheet {
  display: flex;
  width: 100%;
  flex-direction: column;
  height: calc(100vh - 56px);
  height: calc(100dvh - 56px);
  max-height: 980px;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* ----------------------------------------------------------------- header */
.ui2 #aiChatModal .ai2-hd {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 68px;
  padding: 0 16px 0 24px;
  border-bottom: 1px solid var(--sep);
}
.ui2 #aiChatModal .ai2-logo { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; }
.ui2 #aiChatModal .ai2-logo .ui-ic { width: 19px; height: 19px; stroke-width: 1.9; }
.ui2 #aiChatModal .ai2-hd-t { flex: 1; min-width: 0; }
.ui2 #aiChatModal .ai2-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -0.2px; color: var(--ink); }
.ui2 #aiChatModal .ai2-sub { margin: 2px 0 0; overflow: hidden; font-size: 13px; line-height: 1.3; color: var(--ink2); white-space: nowrap; text-overflow: ellipsis; }
.ui2 #aiChatModal .ai2-hd-a { flex: none; display: flex; align-items: center; gap: 8px; }
.ui2 #aiChatModal .ai2-hd-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.ui2 #aiChatModal .ai2-hd-btn:hover { background: var(--fill2); }
.ui2 #aiChatModal .ai2-hd-btn .ui-ic { width: 18px; height: 18px; }
/* «Прошлые чаты» open: the script toggles .is-active and aria-expanded. */
.ui2 #aiChatModal .ai2-hd-btn.is-active,
.ui2 #aiChatModal .ai2-hd-btn[aria-expanded="true"] { background: var(--ink); color: #fff; }

/* ------------------------------------------------------------- transcript */
.ui2 #aiChatModal .ai2-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 32px 28px;
  scroll-behavior: smooth;
}
.ui2 #aiChatModal .ai2-msgs { display: flex; flex-direction: column; gap: 16px; }
.ui2 #aiChatModal .aic-turn { display: flex; flex-direction: column; gap: 14px; }

.ui2 #aiChatModal .aic-msg { display: flex; gap: 0; max-width: 100%; }
.ui2 #aiChatModal .aic-msg-user { justify-content: flex-end; }
.ui2 #aiChatModal .aic-msg-bot { flex-direction: column; align-items: flex-start; gap: 6px; }

/* «ИИ-помощник» over a bot bubble. The label and the sprite mark are added by
   ai-chat-skin.js; without it the Bootstrap glyph stands in as the mark. */
.ui2 #aiChatModal .aic-msg-bot > .aic-avatar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  margin: 0 0 0 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.2;
}
.ui2 #aiChatModal .aic-msg-bot > .aic-avatar > i,
.ui2 #aiChatModal .aic-msg-bot > .aic-avatar > .ai2-mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
}
.ui2 #aiChatModal .aic-msg-bot > .aic-avatar > .ai2-mark { padding: 4px; stroke-width: 2.2; }
.ui2 #aiChatModal .aic-msg-bot > .aic-avatar[data-ai2] > i { display: none; }

.ui2 #aiChatModal .aic-bubble {
  max-width: min(560px, 86%);
  padding: 10px 14px;
  border: 0;
  border-radius: 20px;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.42;
  letter-spacing: -0.1px;
  overflow-wrap: anywhere;
}
.ui2 #aiChatModal .aic-bubble p { margin: 0; }
.ui2 #aiChatModal .aic-bubble p + p { margin-top: 6px; }
.ui2 #aiChatModal .aic-msg-bot .aic-bubble { background: var(--fill); color: var(--ink); border-radius: 20px 20px 20px 6px; }
.ui2 #aiChatModal .aic-msg-user .aic-bubble { background: var(--brand); color: #fff; border-radius: 20px 20px 6px 20px; }

/* «Читаю…» / «Ещё секунду…»: the script's status row, inside the live region. */
.ui2 #aiChatModal .aic-msg-status .aic-bubble { display: inline-flex; align-items: center; gap: 10px; color: var(--ink2); }
.ui2 #aiChatModal .aic-status-dots { display: inline-flex; gap: 4px; }
.ui2 #aiChatModal .aic-status-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink3); }

/* A system notice («сессия закрыта») is a note, not a bubble. */
.ui2 #aiChatModal .aic-msg-system { flex-direction: row; align-items: flex-start; gap: 8px; max-width: 600px; }
.ui2 #aiChatModal .aic-msg-system .aic-avatar { flex: none; width: auto; height: auto; margin: 1px 0 0; padding: 0; border: 0; background: none; color: var(--ink3); font-size: 15px; line-height: 1; }
.ui2 #aiChatModal .aic-msg-system .aic-bubble { max-width: none; padding: 0; border-radius: 0; background: none; color: var(--ink2); font-size: 13px; line-height: 1.45; }
/* A failure is a notice with a way out, never an answer. */
.ui2 #aiChatModal .aic-msg-failure .aic-avatar { display: none; }
.ui2 #aiChatModal .aic-msg-failure .aic-bubble { padding: 12px 16px; border-radius: 16px; background: rgba(224, 122, 0, 0.1); color: var(--warn-ink); font-size: 15px; }
.ui2 #aiChatModal .aic-retry-row { display: flex; gap: 8px; margin-top: 10px; }
.ui2 #aiChatModal .aic-retry {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 980px;
  background: #fff;
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.ui2 #aiChatModal .aic-retry:hover:not(:disabled) { background: var(--fill); }
.ui2 #aiChatModal .aic-retry:disabled { opacity: 0.6; cursor: default; }

/* «Ответ помог? Да Нет» under its bubble (the skin moves the row there). */
.ui2 #aiChatModal .aic-feedback { display: flex; align-items: center; gap: 2px; margin: -8px 0 0 4px; font-size: 12px; color: var(--ink3); }
.ui2 #aiChatModal .aic-feedback-q { margin-right: 6px; }
.ui2 #aiChatModal .aic-feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 980px;
  background: transparent;
  color: var(--ink2);
  font-size: 12px;
  cursor: pointer;
}
.ui2 #aiChatModal .aic-feedback-btn:has(> .ai2-fb-t) > i { display: none; }
.ui2 #aiChatModal .aic-feedback-btn:hover,
.ui2 #aiChatModal .aic-feedback-btn:focus-visible { background: var(--fill); color: var(--ink); }
.ui2 #aiChatModal .aic-feedback-btn[aria-pressed="true"] { background: var(--fill2); color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- sections */
.ui2 #aiChatModal .aic-section { margin: 0; }
.ui2 #aiChatModal .aic-section + .aic-section { margin-top: 10px; }
.ui2 #aiChatModal .aic-section-title { margin: 0 0 10px; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.1px; text-transform: none; color: var(--ink); }
.ui2 #aiChatModal .aic-link { color: var(--brand); font-size: 13px; font-weight: 400; text-decoration: none; }
.ui2 #aiChatModal .aic-link:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
/* The script gives the bare «Все результаты в базе НПА» link an inline margin. */
.ui2 #aiChatModal .aic-section > .aic-link { margin-top: 10px !important; }

/* Lawyers: the title and «Все N юристов» share the first row. */
.ui2 #aiChatModal .aic-section:has(> .aic-cards) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; }
.ui2 #aiChatModal .aic-section:has(> .aic-cards) > .aic-section-title { grid-column: 1; grid-row: 1; }
.ui2 #aiChatModal .aic-section:has(> .aic-cards) > .aic-cards-more { grid-column: 2; grid-row: 1; margin: 0 0 10px; }
.ui2 #aiChatModal .aic-section:has(> .aic-cards) > .aic-cards { grid-column: 1 / -1; grid-row: 2; }

.ui2 #aiChatModal .aic-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}
/* Four or five cards: one row that scrolls sideways, the next card peeking. */
@media (min-width: 734px) {
  .ui2 #aiChatModal .aic-cards:has(> .aic-card:nth-child(4)) {
    display: flex;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--hair) transparent;
  }
  .ui2 #aiChatModal .aic-cards:has(> .aic-card:nth-child(4)) > .aic-card { flex: 0 0 calc((100% - 24px) / 3 - 14px); scroll-snap-align: start; }
}

.ui2 #aiChatModal .aic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: box-shadow 0.2s;
}
.ui2 #aiChatModal .aic-card:hover { box-shadow: inset 0 0 0 1px #b9b9bf; }
/* An ad says so first, on its own line, and otherwise looks like any card. */
.ui2 #aiChatModal .aic-card-sponsored { background: #fff; }
.ui2 #aiChatModal .aic-badge {
  position: static;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin-bottom: -2px;
  padding: 0 8px;
  border-radius: 980px;
  background: rgba(118, 118, 128, 0.12);
  color: var(--ink2);
  font-size: 11px;
  font-weight: 500;
}
.ui2 #aiChatModal .aic-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ui2 #aiChatModal .aic-card-photo,
.ui2 #aiChatModal .aic-card-photo-placeholder { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--fill2); }
.ui2 #aiChatModal .aic-card-photo { object-fit: cover; }
.ui2 #aiChatModal .aic-card-photo-placeholder { display: grid; place-items: center; color: var(--ink2); font-size: 18px; }
.ui2 #aiChatModal .aic-card-who { min-width: 0; }
.ui2 #aiChatModal .aic-card-name { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -0.1px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.ui2 #aiChatModal .aic-card-name:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.ui2 #aiChatModal .aic-card-kind { margin-top: 1px; font-size: 13px; line-height: 1.3; color: var(--ink2); }

.ui2 #aiChatModal .aic-card-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ui2 #aiChatModal .aic-card-meta:empty { display: none; }
.ui2 #aiChatModal .aic-pill { display: inline-flex; align-items: center; gap: 4px; padding: 0; border-radius: 0; background: none; color: var(--ink2); font-size: 13px; line-height: 1.35; }
.ui2 #aiChatModal .aic-pill i { font-size: 12px; color: var(--ink3); }
.ui2 #aiChatModal .aic-pill-rating { color: var(--ink); font-variant-numeric: tabular-nums; }
.ui2 #aiChatModal .aic-pill-rating i { color: #ff9f0a; }
.ui2 #aiChatModal .aic-pill-rating span { color: var(--ink2); }
.ui2 #aiChatModal .aic-pill-ok,
.ui2 #aiChatModal .aic-pill-ok i { color: var(--ok-ink); }
.ui2 #aiChatModal .aic-pill-fee { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui2 #aiChatModal .aic-pill-kk,
.ui2 #aiChatModal .aic-pill-fee i,
.ui2 #aiChatModal .aic-pill-kk i { color: var(--ink2); }
.ui2 #aiChatModal .aic-card-spec { font-size: 13px; line-height: 1.4; color: var(--ink2); }

/* «Написать» is the card's one real button; WhatsApp, call and profile sit
   under it as a row of labelled icons (the label stays the accessible name). */
.ui2 #aiChatModal .aic-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.ui2 #aiChatModal .aic-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 980px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--fill2);
  color: var(--ink2);
  font-size: 0;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.ui2 #aiChatModal .aic-btn i { font-size: 15px; line-height: 1; }
.ui2 #aiChatModal .aic-btn:hover { background: var(--fill); color: var(--ink); }
.ui2 #aiChatModal .aic-btn-wa i { color: var(--ok); }
.ui2 #aiChatModal .aic-btn-chat { flex: 1 1 100%; height: 36px; background: var(--fill2); box-shadow: none; color: var(--brand); font-size: 15px; font-weight: 600; }
.ui2 #aiChatModal .aic-btn-chat:hover { background: var(--fill3); color: var(--brand); }
.ui2 #aiChatModal .aic-btn-chat i { display: none; }

/* Law documents: title, then form · date and the honest status pill. */
.ui2 #aiChatModal .aic-docs { display: flex; flex-direction: column; gap: 8px; }
.ui2 #aiChatModal .aic-doc { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 0; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); }
.ui2 #aiChatModal .aic-doc-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: var(--fill); color: var(--ink2); font-size: 20px; }
.ui2 #aiChatModal .aic-doc-body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* The script writes kind before title; only the title moves (no focusable sibling). */
.ui2 #aiChatModal .aic-doc-title { order: -1; flex: 1 1 100%; display: block; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.1px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.ui2 #aiChatModal .aic-doc-title:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.ui2 #aiChatModal .aic-doc-kind { min-width: 0; font-size: 13px; line-height: 1.3; color: var(--ink2); }
.ui2 #aiChatModal .aic-doc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  margin: 0;
  padding: 0 9px;
  border-radius: 980px;
  background: var(--fill);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.ui2 #aiChatModal .aic-doc-status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* Same vocabulary as the kit's .ui-status: in force .ok, repealed .void,
   suspended / not yet in force .pend. An unknown code carries no label and
   the script draws no pill at all. */
.ui2 #aiChatModal .aic-doc-status-active { background: rgba(31, 157, 85, 0.1); color: var(--ok-ink); }
.ui2 #aiChatModal .aic-doc-status-repealed { background: var(--fill); color: var(--ink2); }
.ui2 #aiChatModal .aic-doc-status-suspended,
.ui2 #aiChatModal .aic-doc-status-draft { background: rgba(224, 122, 0, 0.12); color: var(--warn-ink); }
.ui2 #aiChatModal .aic-doc-open { flex: none; align-self: center; height: 34px; padding: 0 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); font-size: 15px; }
.ui2 #aiChatModal .aic-doc-open:hover { background: var(--fill); color: var(--ink); }

/* «Нормы». */
.ui2 #aiChatModal .aic-citation-list { display: block; margin: 0; padding: 0; list-style: none; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--hair); }
.ui2 #aiChatModal .aic-citation { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 16px; font-size: 14px; line-height: 1.4; }
.ui2 #aiChatModal .aic-citation + .aic-citation { border-top: 1px solid var(--fill2); }
.ui2 #aiChatModal .aic-citation-label { font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.ui2 #aiChatModal a.aic-citation-label { color: var(--brand); }
.ui2 #aiChatModal a.aic-citation-label:hover { text-decoration: underline; text-underline-offset: 2px; }
.ui2 #aiChatModal .aic-citation-title { min-width: 0; color: var(--ink2); }

/* «Что сделать сейчас / Подготовьте». */
.ui2 #aiChatModal .aic-plan { display: block; padding: 16px 20px; border: 0; border-radius: 18px; background: var(--fill); }
.ui2 #aiChatModal .aic-plan-heading { margin: 0 0 6px; font-size: 15px; font-weight: 600; letter-spacing: -0.1px; text-transform: none; color: var(--ink); }
.ui2 #aiChatModal .aic-plan-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 20px; color: var(--ink); font-size: 15px; line-height: 1.45; }
.ui2 #aiChatModal .aic-plan-list + .aic-plan-heading { margin-top: 14px; }

/* ------------------------------------ consent, lead form, «Что дальше» */
.ui2 #aiChatModal .aic-action {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px 22px 22px;
  border: 0;
  border-radius: 18px;
  background: var(--fill);
  box-shadow: none;
}
.ui2 #aiChatModal .aic-action-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; color: var(--ink); }
.ui2 #aiChatModal .aic-action-text { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: var(--ink2); }
.ui2 #aiChatModal .aic-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.ui2 #aiChatModal .aic-action-row .aic-btn { flex: none; font-size: 17px; }
.ui2 #aiChatModal .aic-btn-primary { height: 44px; padding: 0 22px; background: var(--brand); color: #fff; }
.ui2 #aiChatModal .aic-btn-primary:hover { background: var(--brand-hover); color: #fff; }
.ui2 #aiChatModal .aic-btn-primary i { display: none; }
.ui2 #aiChatModal .aic-btn-primary .spinner-border { width: 16px; height: 16px; border-width: 2px; }
.ui2 #aiChatModal .aic-btn-primary:has(.spinner-border) { font-size: 15px; }
.ui2 #aiChatModal .aic-btn-ghost { height: 44px; padding: 0 22px; background: var(--fill2); color: var(--ink); font-weight: 600; }
.ui2 #aiChatModal .aic-btn-ghost:hover { background: var(--fill3); color: var(--ink); }
.ui2 #aiChatModal .aic-btn[disabled] { opacity: 0.6; pointer-events: none; }
.ui2 #aiChatModal .ai2-consent-note { margin: 12px 0 0; font-size: 12px; line-height: 1.35; color: var(--ink3); }

.ui2 #aiChatModal .aic-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.ui2 #aiChatModal .aic-field-full { grid-column: 1 / -1; }
.ui2 #aiChatModal .aic-field label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.ui2 #aiChatModal .aic-field input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  outline: 0;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hair);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  transition: box-shadow 0.2s;
}
.ui2 #aiChatModal .aic-field input::placeholder { color: var(--ink3); opacity: 1; }
.ui2 #aiChatModal .aic-field input:focus { border: 0; outline: 0; box-shadow: inset 0 0 0 1px var(--hair), 0 0 0 3px rgba(139, 0, 0, 0.12); }
.ui2 #aiChatModal .aic-form-error { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: var(--urgent); }

.ui2 #aiChatModal .aic-action-next .aic-action-title { display: flex; align-items: center; gap: 8px; }
.ui2 #aiChatModal .aic-action-next .aic-action-title::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.ui2 #aiChatModal .aic-action-next .aic-btn-primary { height: 36px; padding: 0 18px; background: var(--fill2); color: var(--brand); font-size: 15px; font-weight: 600; }
.ui2 #aiChatModal .aic-action-next .aic-btn-primary:hover { background: var(--fill3); color: var(--brand); }

/* ---------------------------------------------------------------- history */
.ui2 #aiChatModal .ai2-history { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 32px 28px; }
.ui2 #aiChatModal .ai2-history-title { margin: 0 0 8px; font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -0.25px; color: var(--ink); }
.ui2 #aiChatModal .ai2-history-list { display: flex; flex-direction: column; }
.ui2 #aiChatModal .aic-history-row { position: relative; display: flex; align-items: center; gap: 8px; max-width: none; margin: 0 -10px; padding: 0 10px; border: 0; border-radius: 12px; background: none; box-shadow: none; transition: background-color 0.2s; }
.ui2 #aiChatModal .aic-history-row + .aic-history-row::before { content: ""; position: absolute; top: 0; left: 10px; right: 10px; height: 1px; background: var(--fill2); }
.ui2 #aiChatModal .aic-history-row:hover,
.ui2 #aiChatModal .aic-history-row:focus-within { background: var(--fill); box-shadow: none; }
.ui2 #aiChatModal .aic-history-row:is(:hover, :focus-within)::before,
.ui2 #aiChatModal .aic-history-row:is(:hover, :focus-within) + .aic-history-row::before { display: none; }
.ui2 #aiChatModal .aic-history-open { flex: 1; min-width: 0; padding: 12px 0; border: 0; background: none; color: inherit; text-align: start; cursor: pointer; }
.ui2 #aiChatModal .aic-history-name { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.ui2 #aiChatModal .aic-history-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; font-size: 13px; color: var(--ink2); }
.ui2 #aiChatModal .aic-history-current { color: var(--ok-ink); font-weight: 500; }
.ui2 #aiChatModal .aic-history-closed { color: var(--ink3); }
.ui2 #aiChatModal .aic-history-remove { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink3); font-size: 13px; cursor: pointer; }
.ui2 #aiChatModal .aic-history-remove:hover,
.ui2 #aiChatModal .aic-history-remove:focus-visible { background: var(--fill2); color: var(--ink); }
.ui2 #aiChatModal .aic-history-empty { margin: 0; padding: 40px 0; font-size: 15px; color: var(--ink2); text-align: center; }

/* --------------------------------------------------------------- composer */
.ui2 #aiChatModal .ai2-foot { flex: none; padding: 12px 32px 14px; border-top: 1px solid var(--sep); background: #fff; }
/* max-width: none on the edge-to-edge scrollers: style.css caps every element at
   100% below 992px, which would pull their negative margins back in. */
.ui2 #aiChatModal .ai2-chips { display: flex; gap: 8px; max-width: none; margin: 0 -32px 10px; padding: 0 32px; overflow-x: auto; scrollbar-width: none; }
.ui2 #aiChatModal .ai2-chips::-webkit-scrollbar { display: none; }
.ui2 #aiChatModal .ai2-chips:empty { display: none; }
.ui2 #aiChatModal .aic-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 980px;
  background: var(--fill);
  color: var(--ink);
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s;
}
.ui2 #aiChatModal .aic-chip::before { content: none; }
.ui2 #aiChatModal .aic-chip:hover,
.ui2 #aiChatModal .aic-chip:focus-visible { background: var(--fill2); color: var(--ink); }
/* While the lead form is on screen (ai-chat-skin.js sets the class) the chips
   are gone: a chip click is sendMessage(), which removes the form and the name
   and phone already typed into it. On a phone the chip row sat directly under
   the form's «Отмена». The script hides the footer offer here already. */
.ui2 #aiChatModal.ai2-form-open .ai2-chips { display: none; }

/* The deferred offer (extras.consent_available without a question). */
.ui2 #aiChatModal .ai2-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 10px; }
.ui2 #aiChatModal .ai2-cta-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px; border: 0; border-radius: 980px; background: var(--fill2); color: var(--brand); font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color 0.2s; }
.ui2 #aiChatModal .ai2-cta-btn:hover { background: var(--fill3); }
.ui2 #aiChatModal .ai2-cta-btn .ui-ic { width: 16px; height: 16px; stroke-width: 2; }
.ui2 #aiChatModal .ai2-cta-hint { font-size: 13px; color: var(--ink2); }

.ui2 #aiChatModal .ai2-composer {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 44px;
  margin: 0;
  padding: 0 6px 0 16px;
  border-radius: 22px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: box-shadow 0.2s;
}
.ui2 #aiChatModal .ai2-composer:focus-within { box-shadow: inset 0 0 0 1px var(--hair), 0 0 0 3px rgba(139, 0, 0, 0.12); }
.ui2 #aiChatModal .ai2-input {
  flex: 1;
  min-width: 0;
  height: 44px;
  max-height: 140px;
  margin: 0;
  padding: 11px 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 22px;
  resize: none;
}
/* One line of placeholder in a one-row field; a wrapped second line peeks under it. */
.ui2 #aiChatModal .ai2-input::placeholder { overflow: hidden; color: var(--ink3); opacity: 1; white-space: nowrap; text-overflow: ellipsis; }
.ui2 #aiChatModal .ai2-input:disabled { background: transparent; color: var(--ink3); }
.ui2 #aiChatModal .ai2-mic,
.ui2 #aiChatModal .ai2-send { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: 6px 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.ui2 #aiChatModal .ai2-mic { background: transparent; color: var(--ink2); }
.ui2 #aiChatModal .ai2-mic:hover { background: var(--fill); color: var(--ink); }
.ui2 #aiChatModal .ai2-mic .ui-ic { width: 18px; height: 18px; }
.ui2 #aiChatModal .ai2-mic.is-listening { background: var(--tint2); color: var(--brand); animation: ai2-listen 1.4s infinite ease-in-out; }
.ui2 #aiChatModal .ai2-send { background: var(--brand); color: #fff; }
.ui2 #aiChatModal .ai2-send:hover { background: var(--brand-hover); }
.ui2 #aiChatModal .ai2-send .ui-ic { width: 17px; height: 17px; stroke-width: 2.4; }
/* Nothing typed yet, or a turn in flight: the arrow is there but off. */
.ui2 #aiChatModal .ai2-input:placeholder-shown ~ .ai2-send,
.ui2 #aiChatModal .ai2-send:disabled { background: var(--fill2); color: var(--ink3); cursor: default; }
@keyframes ai2-listen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 0, 0, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(139, 0, 0, 0); }
}

.ui2 #aiChatModal .ai2-legal { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--ink3); text-align: center; }
.ui2 #aiChatModal .ai2-legal a { color: var(--ink2); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 2px; }
.ui2 #aiChatModal .ai2-legal a:hover { color: var(--ink); }

/* ----------------------------------------------------------------- tablet */
@media (min-width: 734px) and (max-width: 1067.98px) {
  .ui2 #aiChatModal .ai2-dialog { width: calc(100% - 48px); min-height: calc(100% - 48px); margin: 24px auto; }
  .ui2 #aiChatModal .ai2-sheet { height: calc(100vh - 48px); height: calc(100dvh - 48px); }
}

/* ------------------------------------------------------------------ phone */
@media (max-width: 733.98px) {
  .ui2 #aiChatModal .ai2-dialog { display: block; width: 100%; max-width: none; height: 100%; min-height: 0; margin: 0; }
  .ui2 #aiChatModal.fade .ai2-dialog { transform: translateY(32px); }
  .ui2 #aiChatModal.show .ai2-dialog { transform: none; }
  .ui2 #aiChatModal .ai2-sheet { height: 100vh; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none; }

  .ui2 #aiChatModal .ai2-hd { height: 56px; gap: 10px; padding: 0 4px 0 16px; }
  .ui2 #aiChatModal .ai2-logo { width: 32px; height: 32px; }
  .ui2 #aiChatModal .ai2-logo .ui-ic { width: 17px; height: 17px; }
  .ui2 #aiChatModal .ai2-sub { font-size: 12px; }
  .ui2 #aiChatModal .ai2-hd-a { gap: 0; }
  .ui2 #aiChatModal .ai2-hd-btn { width: 44px; height: 44px; background: transparent; }
  .ui2 #aiChatModal .ai2-hd-btn:hover { background: var(--fill); }
  .ui2 #aiChatModal .ai2-hd-btn .ui-ic { width: 21px; height: 21px; }
  .ui2 #aiChatModal .ai2-hd-btn.is-active,
  .ui2 #aiChatModal .ai2-hd-btn[aria-expanded="true"] { background: var(--fill2); color: var(--ink); }

  .ui2 #aiChatModal .ai2-body,
  .ui2 #aiChatModal .ai2-history { padding: 12px 16px 24px; }
  .ui2 #aiChatModal .aic-bubble { max-width: 86%; font-size: 16px; line-height: 1.4; }
  .ui2 #aiChatModal .aic-msg-failure .aic-bubble { max-width: 100%; }
  .ui2 #aiChatModal .aic-msg-system .aic-bubble { font-size: 14px; }
  .ui2 #aiChatModal .aic-feedback-btn { height: 32px; font-size: 13px; }
  .ui2 #aiChatModal .aic-section-title { font-size: 16px; }

  /* Cards always scroll sideways on a phone, edge to edge. */
  .ui2 #aiChatModal .aic-cards { display: flex; gap: 10px; max-width: none; margin: 0 -16px; padding: 2px 16px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
  .ui2 #aiChatModal .aic-cards::-webkit-scrollbar { display: none; }
  .ui2 #aiChatModal .aic-card { flex: 0 0 262px; scroll-snap-align: start; }
  .ui2 #aiChatModal .aic-card-photo,
  .ui2 #aiChatModal .aic-card-photo-placeholder { width: 48px; height: 48px; }
  .ui2 #aiChatModal .aic-card-name { font-size: 16px; }
  .ui2 #aiChatModal .aic-btn { height: 36px; }
  .ui2 #aiChatModal .aic-btn-chat { height: 44px; font-size: 16px; }

  .ui2 #aiChatModal .aic-doc { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; }
  .ui2 #aiChatModal .aic-doc-body { flex: 1 0 calc(100% - 58px); }
  .ui2 #aiChatModal .aic-doc-title { font-size: 16px; }
  .ui2 #aiChatModal .aic-doc-open { margin-left: 58px; height: 36px; }

  .ui2 #aiChatModal .aic-action { padding: 18px 16px 16px; }
  .ui2 #aiChatModal .aic-action-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .ui2 #aiChatModal .aic-action-row .aic-btn { width: 100%; height: 50px; }
  .ui2 #aiChatModal .aic-action-next .aic-action-row .aic-btn { height: 44px; }
  .ui2 #aiChatModal .aic-form-grid { grid-template-columns: 1fr; }

  .ui2 #aiChatModal .ai2-foot { padding: 8px 16px calc(6px + env(safe-area-inset-bottom, 0px)); }
  /* The footer is a quarter of a phone screen (measured 255 px with the chips,
     the offer, the mic disclosure and the legal line), and the keyboard takes
     about half: while typing, under 200 px of conversation was left — usually
     part of a lawyer card rather than the question the visitor is answering.
     So on a phone the offer's hint goes (the bot's own bubble above already
     says the request is free and that lawyers call back), both legal lines are
     smaller, and the offer is one compact row.

     What is deliberately NOT done here: hiding the chips or the offer while
     the composer has focus. The field keeps focus after a send, so both would
     stay gone for the rest of the conversation — the chips are the answer to
     the question on screen, and an offer nobody can reach is worse than a
     footer 40 px too tall. The mic disclosure is not hidden either: it is a
     statement about audio leaving the browser. */
  .ui2 #aiChatModal .ai2-cta-hint { display: none; }
  .ui2 #aiChatModal .ai2-cta { margin-bottom: 8px; }
  .ui2 #aiChatModal .ai2-cta-btn { height: 32px; }
  .ui2 #aiChatModal .ai2-chips { margin: 0 -16px 8px; padding: 2px 16px; }
  .ui2 #aiChatModal .aic-chip { height: 34px; font-size: 14px; }
  /* 16px or more: anything smaller makes iOS Safari zoom the page on focus. */
  .ui2 #aiChatModal .ai2-input { font-size: 16px; }
  /* The placeholder does not fit a phone's field and textarea placeholders ignore
     text-overflow: fade its end instead of cutting a letter in half. */
  .ui2 #aiChatModal .ai2-input:placeholder-shown { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .ui2 #aiChatModal .ai2-legal { margin-top: 5px; font-size: 11px; }
}

/* A tap leaves :hover stuck on touch screens; the header buttons stay clear. */
@media (max-width: 733.98px) and (hover: none) {
  .ui2 #aiChatModal .ai2-hd-btn:hover:not(.is-active):not([aria-expanded="true"]) { background: transparent; }
}