/* ШІ-асистент: кнопка на мапі й панель-шухляда праворуч.

   Візуально це та сама сімʼя, що й читач справи: панель праворуч, темна
   поверхня, жовтий сигнал. Асистент — ще один інструмент над тими самими
   даними, а не окремий продукт, і виглядати він має відповідно. */

/* Кнопка асистента — акцент, а не ще одна рамка.

   Поруч стоїть «Відкрити аналітику», і дві однакові жовті рамки одна під
   одною читалися б як пара рівнозначних, між якими треба обирати. Тут
   ієрархія: аналітика — звичайна дія над тим, що вже видно; асистент —
   єдине місце, де мапі можна поставити питання словами. Тому в нього
   заливка з жовтим підсвітом, а не сама лише обводка.

   Сяйво зроблено тінню, а не фільтром: filter створює новий контекст
   накладання й на слабких пристроях тягне цілий шар композиції, а на
   мапі поверх канви це помітно. */
.ai-call {
  position: relative;                 /* для пульсу ::after */
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 11px; border-radius: 4px; cursor: pointer;
  font: 600 11.5px/1 var(--sans); letter-spacing: 0.01em;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 212, 0, 0.13), rgba(255, 212, 0, 0.04)),
    var(--panel);
  border: 1px solid rgba(255, 212, 0, 0.42);
  box-shadow: 0 2px 14px rgba(255, 212, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  /* Саме background-color, а не скорочений background: інакше в переході бере
     участь і градієнт, тобто ціле зображення тла заради зміни кольору. */
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.ai-call:hover {
  border-color: var(--signal);
  box-shadow: 0 3px 20px rgba(255, 212, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.ai-call:active { transform: translateY(1px); }

.ai-spark {
  width: 15px; height: 15px; flex: none; fill: var(--signal);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ai-call:hover .ai-spark { transform: rotate(90deg) scale(1.08); }

/* Відкритий стан — заливка, а не тільки рамка: інакше на строкатій мапі не
   видно, що панель уже відкрита, і кнопку тиснуть удруге. */
body.ai-open .ai-call {
  background: var(--signal); color: #000;
  border-color: var(--signal); box-shadow: 0 3px 18px rgba(255, 212, 0, 0.3);
}
body.ai-open .ai-spark { fill: #000; }

/* Запрошення до першого натискання. Гасне назавжди після першого ж кліку —
   постійна анімація на мапі, де й так багато руху, швидко дратує. */
.ai-call.is-new::after {
  content: ''; position: absolute; inset: -1px; border-radius: 4px;
  border: 1px solid var(--signal); pointer-events: none;
  animation: ai-ping 2.6s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
@keyframes ai-ping {
  0%   { opacity: 0.55; transform: scale(1); }
  55%  { opacity: 0;    transform: scale(1.12); }
  100% { opacity: 0;    transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-call.is-new::after { animation: none; opacity: 0.4; }
  .ai-call:hover .ai-spark { transform: none; }
}

.ai-panel {
  position: fixed; top: var(--masthead-h); right: 0; bottom: 0; z-index: 4100;
  width: min(460px, 94%);
  display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--rule-2);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.45);
}
.ai-panel[hidden] { display: none; }

.ai-top {
  display: flex; align-items: flex-start; gap: 10px; flex: none;
  padding: 13px 16px; border-bottom: 1px solid var(--rule);
}
.ai-title { flex: 1; font-size: 13px; font-weight: 600; }
.ai-title span {
  display: block; font: 10px var(--mono); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px;
}
.ai-x {
  background: none; border: 0; color: var(--ink-3);
  font-size: 13px; cursor: pointer; padding: 2px 4px;
}
.ai-x:hover { color: var(--alert); }

/* Скидання розмови. Поруч із хрестиком, але навмисно НЕ червоне на ховері:
   воно не закриває вікно й нічого не ламає — просто починає з чистого аркуша. */
.ai-reset {
  background: none; border: 0; color: var(--ink-3);
  font-size: 14px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.ai-reset:hover { color: var(--signal); }

/* Підказка-довідка стоїть першою й тримається окремо від решти: ті залежать
   від даних і змінюються, а ця пояснює саме інструмент. */
.ai-sug-help { border-color: var(--rule-2) !important; color: var(--ink-2) !important; }

.ai-log {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 14px;
}

.ai-msg { font-size: 13px; line-height: 1.55; }
.ai-msg.user {
  align-self: flex-end; max-width: 88%;
  background: var(--raised); color: var(--ink);
  padding: 8px 11px; border-radius: 3px;
}
.ai-msg.bot { align-self: stretch; }
.ai-text { white-space: pre-wrap; color: var(--ink); }
.ai-status { color: var(--ink-3); font-family: var(--mono); font-size: 11.5px; }

/* Текст, який ще пишеться. Трохи приглушений — щоб було видно, що це ще не
   готова відповідь: маркери джерел проставляться, коли генерація завершиться.
   Курсор у кінці рядка робить паузи між токенами схожими на набір, а не на
   зависання. */
.ai-live { white-space: pre-wrap; color: var(--ink-2); }
.ai-live::after {
  content: '▍'; margin-left: 1px; color: var(--ink-3);
  animation: ai-caret 1.1s steps(1) infinite;
}
@keyframes ai-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ai-live::after { animation: none; }
}

/* Джерела. Тип позначено словом, а не значком: значок довелося б пояснювати,
   а слово читається одразу. */
.ai-src {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 8px;
}
.ai-src-item { font-size: 11.5px; line-height: 1.5; color: var(--ink-2); }
.ai-src-item > b {
  font-family: var(--mono); color: var(--ink-3); margin-right: 5px;
}
.ai-src-item a { color: var(--ua); }
.ai-src-item a:hover { color: var(--signal); }
.ai-kind {
  font-family: var(--mono); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-3);
  border: 1px solid var(--rule-2); border-radius: 2px; padding: 1px 4px;
}
.ai-kind.official { color: var(--sk); border-color: var(--sk); }
.ai-case { color: var(--ink-3); margin-top: 3px; padding-left: 8px; }

/* Маркер джерела в тексті відповіді — кнопка, а не надрядкова цифра:
   на телефоні в неї треба влучити пальцем. */
.ai-ref {
  color: var(--ua); text-decoration: none; font-family: var(--mono);
  font-size: 0.92em; padding: 0 2px;
}
.ai-ref:hover { color: var(--signal); }
.ai-src-item.ai-flash { animation: ai-flash 1.6s ease-out; }
@keyframes ai-flash {
  0% { background: rgba(255, 212, 0, 0.18); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-src-item.ai-flash { animation: none; outline: 1px solid var(--signal); }
}
/* Уривок джерела згорнуто до двох рядків; натискання розгортає. */
.ai-excerpt {
  cursor: pointer; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.ai-excerpt.open { display: block; -webkit-line-clamp: unset; }

.ai-apply {
  background: var(--panel-2); border: 1px solid var(--rule-2); color: var(--signal);
  font: 11px var(--mono); padding: 3px 9px; border-radius: 3px;
  cursor: pointer; margin: 5px 6px 0 0;
}
.ai-apply:hover { background: rgba(255, 212, 0, 0.1); border-color: var(--signal); }
.ai-applied { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.ai-vote { margin-top: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }

.ai-sug { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 16px 12px; flex: none; }
.ai-sug[hidden] { display: none; }
.ai-sug button {
  background: var(--panel-2); border: 1px solid var(--rule);
  color: var(--ink-2); font: 11.5px var(--sans);
  border-radius: 999px; padding: 5px 11px; cursor: pointer; text-align: left;
}
.ai-sug button:hover { color: var(--ink); border-color: var(--rule-2); }

.ai-form {
  display: flex; gap: 8px; flex: none;
  padding: 11px 16px 8px; border-top: 1px solid var(--rule);
}
.ai-form textarea {
  flex: 1; resize: none; height: 38px; max-height: 120px;
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 3px;
  padding: 10px 11px; font: 13px var(--sans);
}
.ai-form textarea:focus { outline: none; border-color: var(--rule-2); }
.ai-form button[type=submit] {
  background: var(--signal); border: 0; color: #000;
  border-radius: 3px; padding: 0 15px; cursor: pointer; font-size: 15px;
}
.ai-form button[type=submit]:disabled { background: var(--rule-2); color: var(--ink-3); cursor: default; }

.ai-note {
  flex: none; padding: 0 16px 12px;
  font-size: 10.5px; line-height: 1.5; color: var(--ink-3);
}

/* На вузькому екрані панель займає все: тримати поруч мапу й розмову на
   375 пікселях однаково не вийде. Тому кнопка «показати на мапі» там ще й
   закриває панель — інакше результат свого ж натискання не видно. */
@media (max-width: 900px) {
  .ai-panel { width: 100%; top: 0; }
  .ai-call { padding: 8px 11px; }
}

/* Правовий акт як джерело. Він мусить читатися інакше за допис у чаті й за
   сторінку з мережі: це те, на що можна послатися, а не те, що хтось
   розповів. Тому власний колір і цитата мовою оригіналу під рядком. */
.ai-kind.act {
  color: var(--signal);
  border-color: color-mix(in srgb, var(--signal) 45%, transparent);
  background: color-mix(in srgb, var(--signal) 12%, transparent);
}
.ai-quote {
  margin: 5px 0 2px; padding: 6px 9px;
  border-left: 2px solid color-mix(in srgb, var(--signal) 45%, transparent);
  background: rgba(255, 255, 255, 0.03);
  font-size: 11.5px; line-height: 1.5; color: var(--ink-2);
}

/* Позначка вільного режиму. Навмисно тривожного кольору, а не нейтрального:
   різниця між «звірено з джерелами» й «модель так вважає» має читатися до
   того, як людина почне читати саму відповідь. */
.ai-free {
  margin-bottom: 6px; padding: 3px 8px;
  display: inline-block; border-radius: 999px;
  background: color-mix(in srgb, var(--alert) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--alert) 40%, transparent);
  color: var(--alert);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Службова примітка під відповіддю («сайти з правилами не встиг
   перевірити», «бачу лише 8 повідомлень») — її ставить сервер, не модель,
   тож вона виглядає інакше за текст відповіді. */
.ai-notice {
  margin-top: 8px; padding: 5px 9px; border-radius: 3px;
  background: var(--panel-2); border: 1px solid var(--rule);
  font-size: 11.5px; line-height: 1.5; color: var(--ink-2);
}
/* «Ще почитати» — під джерелами, тихіше за них: модель на це не посилається */
.ai-extra { border-top-style: dashed; gap: 5px; }
.ai-extra-h {
  font-family: var(--mono); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-3);
}