/* ============================================================================
   AI-советник «Ask, don't dig» — лаунчер + панель диалога.
   Всё на токенах темы (--bg/--text/--accent…), поэтому светлая и тёмная
   работают без отдельного блока переопределений.

   ⚠️ ГЛАВНАЯ ГРАБЛЯ ПРОЕКТА: НЕ вешать transition на свойство, которое
   красится из var(--…). В Blink цвет тогда «залипает» на старом значении при
   переключении темы, и панель остаётся тёмной на светлом сайте. Поэтому
   ниже transition стоит только на transform/opacity/box-shadow, а наведение
   везде сделано через box-shadow, а не через смену background/border-color.
   ========================================================================== */

/* ── Лаунчер ─────────────────────────────────────────────────────────────── */
.ai-fab{
  position:fixed; right:22px; bottom:22px; z-index:1200;
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 18px; border:1px solid var(--border2); border-radius:100px;
  background:var(--bg2); color:var(--text); cursor:pointer;
  font-family:var(--font-body,inherit); font-size:14px; font-weight:600;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.45);
  transition:transform .18s ease, box-shadow .18s ease;   /* НЕ background */
}
.ai-fab:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -10px rgba(0,0,0,.55) }
.ai-fab[hidden]{ display:none }
.ai-fab-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent3,#35D08A) }
@media(max-width:520px){ .ai-fab{ right:14px; bottom:14px; padding:12px 16px } }

/* ⚠️ В правом нижнем углу главной и страницы провайдера уже стоит ↑-кнопка
   (`.scroll-top` из home.php / provider.php: fixed, bottom:28px, right:28px,
   42×42), и лаунчер накрывал её ЦЕЛИКОМ. Замерено в Blink, а не на глаз:
   перекрытие 42×40 из 42×42 на 1280×800 и 42×30 на 390×780, а elementFromPoint
   в центре ↑ отдаёт `.ai-fab` — то есть кнопка не нажимается вовсе ни на
   десктопе, ни на телефоне. Поднимаемся над ней.

   ⚠️ И ТОЛЬКО там, где она есть: в каталоге (layouts/public.php) ↑-кнопки нет,
   и безусловный подъём оставил бы под пилюлей пустой зазор без причины.
   `:has()` делает правило самозаживающим в обе стороны — появится ↑ на новой
   странице, лаунчер поднимется сам; исчезнет — вернётся в угол.
   Числа — геометрия самой .scroll-top плюс зазор, а не подобранная константа. */
body:has(.scroll-top) .ai-fab{
  right:28px;                        /* правые края в столбик, а не лесенкой */
  bottom:calc(28px + 42px + 12px);   /* низ ↑-кнопки + её высота + зазор */
}

/* ── Панель ──────────────────────────────────────────────────────────────── */
.ai-panel{
  position:fixed; right:22px; bottom:22px; z-index:1201;
  width:min(420px, calc(100vw - 28px));
  /* 100vh на мобильных БОЛЬШЕ фактической высоты окна (в него входит область
     под адресной строкой), поэтому высокая панель уезжает под браузерный
     хром и нижние строки не долистать. dvh считает реальную высоту; vh
     оставлен строкой выше как запасной для старых браузеров. */
  max-height:min(620px, calc(100vh - 40px));
  max-height:min(620px, calc(100dvh - 40px));
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--border2); border-radius:18px; background:var(--bg2);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.6);
  opacity:0; transform:translateY(12px) scale(.98); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.ai-panel.open{ opacity:1; transform:none; pointer-events:auto }
@media(max-width:520px){ .ai-panel{ right:8px; left:8px; bottom:8px; width:auto } }

.ai-head{
  display:flex; align-items:center; gap:10px; flex:none;
  padding:14px 16px; border-bottom:1px solid var(--border); background:var(--bg3);
}
.ai-title{ font-weight:700; font-size:14px; color:var(--text) }
.ai-sub{ font-family:var(--font-mono,monospace); font-size:10.5px; color:var(--text3); letter-spacing:.04em }
.ai-close{
  margin-left:auto; width:30px; height:30px; flex:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border2); border-radius:9px;
  background:var(--bg2); color:var(--text2); font-size:16px; line-height:1;
  transition:box-shadow .15s ease;
}
.ai-close:hover{ box-shadow:0 0 0 3px rgba(127,127,127,.16) }

/* ── Лента диалога ───────────────────────────────────────────────────────── */
.ai-log{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px }
.ai-msg{ font-size:14px; line-height:1.6; color:var(--text); white-space:pre-wrap; word-wrap:break-word }
.ai-msg.user{
  align-self:flex-end; max-width:85%;
  padding:9px 13px; border-radius:14px 14px 4px 14px;
  background:var(--bg4,var(--bg3)); font-size:13.5px;
}
.ai-msg.bot{ align-self:stretch }
.ai-msg.err{ color:var(--danger,#FF6B7D); font-size:13px }

/* Курсор во время генерации */
.ai-msg.bot.typing::after{
  content:''; display:inline-block; width:2px; height:1em;
  background:var(--accent); vertical-align:-.14em; margin-left:2px;
  animation:ai-blink 1s step-end infinite;
}
@keyframes ai-blink{ 0%,100%{opacity:1} 50%{opacity:0} }

/* Статус «ищу в базе» — доказательство, что ответ из каталога, а не из головы */
.ai-status{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono,monospace); font-size:11px; color:var(--text3);
}
.ai-status i{
  width:6px; height:6px; border-radius:50%; background:var(--accent3,#35D08A);
  animation:ai-pulse 1.4s ease-in-out infinite;
}
@keyframes ai-pulse{ 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Подсказки-затравки ──────────────────────────────────────────────────── */
/* Отдельный класс от .ai-card: похожи внешне, но это разные сущности —
   кнопка-вопрос и ссылка на тариф (см. комментарий в _ai_launcher.php). */
.ai-hints{ display:flex; flex-direction:column; gap:8px }
.ai-hint{
  padding:10px 12px; text-align:left; cursor:pointer;
  border:1px solid var(--border); border-radius:11px; background:var(--bg3);
  font-family:var(--font-body,inherit); font-size:12.5px; color:var(--text2);
  transition:box-shadow .15s ease, transform .15s ease;   /* НЕ border-color */
}
.ai-hint:hover{ transform:translateX(2px); box-shadow:0 0 0 1px var(--accent) }

/* ── Карточки тарифов ────────────────────────────────────────────────────── */
.ai-cards{ display:flex; flex-direction:column; gap:8px }
.ai-card{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border:1px solid var(--border); border-radius:11px;
  background:var(--bg3); color:inherit; text-decoration:none;
  transition:box-shadow .15s ease, transform .15s ease;  /* НЕ border-color */
}
.ai-card:hover{ transform:translateX(2px); box-shadow:0 0 0 1px var(--accent) }
.ai-card-logo{
  width:28px; height:28px; flex:none; border-radius:7px; object-fit:contain;
  background:var(--bg2);
}
/* Заглушка вместо логотипа: первая буква названия. Нужна не только когда
   logo_url пуст — у части провайдеров там битая ссылка, и без отката на
   карточке оставался пустой квадрат (см. logo() в ai.js). */
.ai-card-letter{
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; color:var(--text2);
  border:1px solid var(--border); text-transform:uppercase;
}
.ai-card-flag{
  height:9px; width:auto; border-radius:1px; vertical-align:baseline;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
}
.ai-card-main{ flex:1; min-width:0 }
.ai-card-name{ font-size:12.5px; font-weight:700; color:var(--text) }
.ai-card-spec{
  font-family:var(--font-mono,monospace); font-size:10.5px; color:var(--text2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ai-card-price{ flex:none; text-align:right; font-family:var(--font-mono,monospace) }
.ai-card-price b{ font-size:13.5px; color:var(--accent) }
.ai-card-price span{ display:block; font-size:9.5px; color:var(--text3) }

/* ── Ввод ────────────────────────────────────────────────────────────────── */
.ai-form{ flex:none; display:flex; gap:8px; padding:12px; border-top:1px solid var(--border) }
.ai-input{
  flex:1; min-width:0; padding:11px 13px; font-size:13.5px;
  font-family:var(--font-body,inherit); color:var(--text);
  background:var(--bg); border:1px solid var(--border2); border-radius:11px; outline:none;
  transition:box-shadow .15s ease;
}
.ai-input::placeholder{ color:var(--text3) }
.ai-input:focus{ box-shadow:0 0 0 3px rgba(127,127,127,.15) }
.ai-send{
  flex:none; padding:0 16px; cursor:pointer; font-size:13.5px; font-weight:700;
  background:var(--accent); color:var(--on-accent,#1a1400);
  border:none; border-radius:11px;
  transition:opacity .15s ease, box-shadow .15s ease;
}
.ai-send:hover:not(:disabled){ box-shadow:0 6px 16px -4px var(--accent) }
.ai-send:disabled{ opacity:.45; cursor:not-allowed }

.ai-foot{
  flex:none; padding:0 12px 10px;
  font-family:var(--font-mono,monospace); font-size:9.5px; color:var(--text3); line-height:1.5;
}

@media(prefers-reduced-motion:reduce){
  .ai-fab,.ai-panel,.ai-card,.ai-hint,.ai-input,.ai-send{ transition:none }
  .ai-msg.bot.typing::after,.ai-status i{ animation:none }
}