/* Виджет публичного AI-ассистента ID Solutions.
   Тёмная панель в языке лендинга: чёрная шапка (как site-header), поверхности
   #1c1c1c на #141414, фирменный оранжевый — только акцентом (штрих-разделитель,
   вопрос посетителя, кнопки). Тон — деловой инструмент, не «онлайн-консультант».

   Виджет вставляется на чужую страницу, поэтому:
   - все селекторы — строго под #ids-assistant, глобальных правил нет
     (исключение — @keyframes: они не скопируются, поэтому имена с префиксом idsa);
   - токены лендинга подхватываются через var(), значения после запятой — запасные;
   - никаких внешних ресурсов: только CSS и инлайн-SVG из assistant.js. */

#ids-assistant {
  /* Палитра и геометрия — зеркало tokens.css лендинга */
  --a-accent: var(--c-accent, #cc5a35);
  --a-accent-hover: var(--c-accent-hover, #e06b43);
  --a-bg: var(--c-bg, #141414);          /* тело панели, лента сообщений */
  --a-bg-2: var(--c-bg-2, #1c1c1c);      /* поверхности: ответы, поле ввода */
  --a-head: var(--c-header, #000000);    /* шапка панели и полоса формы */
  --a-text: var(--c-text, #eeeeee);
  --a-muted: var(--c-muted, #b9b9b9);
  --a-border: var(--c-border, #2c2c2c);
  --a-err: var(--c-err, #e0533f);
  --a-radius: var(--radius, 12px);
  --a-radius-sm: var(--radius-sm, 8px);
  --a-font: var(--font-sans, 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif);
  /* Полупрозрачный оранжевый для «вопросов посетителя»: rgba — запасной вариант,
     color-mix (ниже, где поддерживается) выводит его из токена акцента */
  --a-accent-soft: rgba(204, 90, 53, .16);
  --a-accent-line: rgba(204, 90, 53, .42);
  --a-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .35);

  position: fixed; right: 24px; bottom: 24px; z-index: 9000;
  font-family: var(--a-font); font-size: 14px; line-height: 1.5;
  color: var(--a-text); text-align: left; letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  #ids-assistant {
    --a-accent-soft: color-mix(in srgb, var(--a-accent) 16%, transparent);
    --a-accent-line: color-mix(in srgb, var(--a-accent) 42%, transparent);
  }
}
@media (max-width: 560px) { #ids-assistant { right: 16px; bottom: 16px; } }
@media print { #ids-assistant { display: none; } }

/* Защита от чужого box-sizing и «плавающих» svg-базлайнов */
#ids-assistant, #ids-assistant *, #ids-assistant *::before, #ids-assistant *::after { box-sizing: border-box; }
#ids-assistant svg { display: block; }

/* ---- Кнопка вызова ----
   Не «голый круг»: плоский фирменный оранжевый + светлая фаска сверху (inset),
   глубокая тень с лёгким тёплым отсветом. Иконка — контурный пузырь с тремя
   точками. Без пульсирующих колец — внимание берёт тизер рядом. */
#ids-assistant .idsa-fab {
  width: 58px; height: 58px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--a-accent); color: var(--a-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .18),
    0 10px 26px rgba(0, 0, 0, .45), 0 3px 10px rgba(204, 90, 53, .30);
  transition: background-color .2s ease-in-out, transform .2s ease-in-out, box-shadow .2s ease-in-out;
  animation: idsaFadeUp .25s ease both;
}
#ids-assistant .idsa-fab:hover {
  background: var(--a-accent-hover); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .18),
    0 14px 32px rgba(0, 0, 0, .5), 0 4px 14px rgba(204, 90, 53, .38);
}
#ids-assistant .idsa-fab:active { transform: translateY(0) scale(.97); }
#ids-assistant .idsa-fab:focus-visible { outline: 2px solid var(--a-text); outline-offset: 3px; }
#ids-assistant .idsa-fab svg { width: 26px; height: 26px; }
#ids-assistant.is-open .idsa-fab { display: none; }

/* ---- Тизер ----
   Тёмная pill-плашка в духе fssp-float: полупрозрачный чёрный, тонкая граница,
   оранжевая точка-акцент. Кликабелен (это кнопка), появляется с небольшой паузой. */
#ids-assistant .idsa-teaser {
  position: absolute; right: 72px; bottom: 11px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(20, 20, 20, .94); color: var(--a-text);
  border: 1px solid var(--a-border); border-radius: 999px;
  padding: 9px 16px; font: inherit; font-size: 13px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
  transition: border-color .2s ease-in-out, color .2s ease-in-out;
  animation: idsaFadeUp .3s ease both .4s;
}
#ids-assistant .idsa-teaser::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--a-accent); flex: 0 0 auto;
}
#ids-assistant .idsa-teaser:hover { border-color: var(--a-accent); color: var(--a-accent); }
#ids-assistant .idsa-teaser:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
#ids-assistant .idsa-teaser.is-hidden, #ids-assistant.is-open .idsa-teaser { display: none; }
@media (max-width: 560px) { #ids-assistant .idsa-teaser { display: none; } }

/* ---- Панель ----
   Тёмная карточка как contact-dialog: фон страницы + граница + глубокая тень.
   Сверху — фирменный штрих-градиент (как .separator между секциями сайта). */
#ids-assistant .idsa-panel {
  display: none; flex-direction: column; position: relative;
  width: 384px; max-width: calc(100vw - 32px);
  height: min(600px, calc(100vh - 48px));
  height: min(600px, calc(100dvh - 48px));
  background: var(--a-bg); color: var(--a-text);
  border: 1px solid var(--a-border); border-radius: var(--a-radius);
  box-shadow: var(--a-shadow); overflow: hidden;
  color-scheme: dark; /* нативные скроллбар/каретка/поля — тёмные */
}
#ids-assistant .idsa-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--a-accent), transparent);
}
#ids-assistant.is-open .idsa-panel {
  display: flex;
  transform-origin: 100% 100%;
  animation: idsaPanelIn .28s cubic-bezier(.19, 1, .22, 1);
}
/* Узкий экран: панель на весь экран, без скруглений */
@media (max-width: 560px) {
  #ids-assistant .idsa-panel {
    position: fixed; inset: 0; width: auto; max-width: none; height: auto;
    border: 0; border-radius: 0;
  }
}

/* ---- Шапка панели: чёрная, как шапка сайта ---- */
#ids-assistant .idsa-head {
  display: flex; align-items: center; gap: 11px; flex: 0 0 auto;
  padding: 13px 14px; background: var(--a-head);
  border-bottom: 1px solid var(--a-border);
}
/* Знак ассистента: оранжевый скруглённый квадрат с «искрой» */
#ids-assistant .idsa-mark {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--a-accent); color: var(--a-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
#ids-assistant .idsa-mark svg { width: 18px; height: 18px; }
#ids-assistant .idsa-title { min-width: 0; }
#ids-assistant .idsa-title b { display: block; font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3; }
/* Подзаголовок — капителью, как служебные подписи fssp-карточек */
#ids-assistant .idsa-title span {
  display: block; font-size: 10.5px; color: var(--a-muted);
  text-transform: uppercase; letter-spacing: .06em; line-height: 1.4;
}
#ids-assistant .idsa-close {
  margin-left: auto; flex: 0 0 auto; width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--a-radius-sm); cursor: pointer;
  color: var(--a-muted);
  transition: background-color .15s ease, color .15s ease;
}
#ids-assistant .idsa-close:hover { background: rgba(255, 255, 255, .08); color: #fff; }
#ids-assistant .idsa-close:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 1px; }
#ids-assistant .idsa-close svg { width: 16px; height: 16px; }

/* ---- Лента сообщений ---- */
#ids-assistant .idsa-log {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin; scrollbar-color: var(--a-border) transparent;
}
#ids-assistant .idsa-log::-webkit-scrollbar { width: 8px; }
#ids-assistant .idsa-log::-webkit-scrollbar-track { background: transparent; }
#ids-assistant .idsa-log::-webkit-scrollbar-thumb { background: var(--a-border); border-radius: 8px; }

/* Пузыри. Ответ — карточка в тоне поверхностей сайта, почти на всю ширину
   (длинные деловые ответы читаются как текст, не как «смс»). Вопрос — компактнее,
   справа, с оранжевой подложкой-намёком вместо кричащей заливки. */
#ids-assistant .idsa-msg {
  max-width: 94%; padding: 9px 13px; border-radius: var(--a-radius);
  font-size: 14px; line-height: 1.55; white-space: pre-wrap;
  overflow-wrap: break-word; word-wrap: break-word;
  animation: idsaFadeUp .22s ease both;
}
#ids-assistant .idsa-msg.bot {
  align-self: flex-start;
  background: var(--a-bg-2); border: 1px solid var(--a-border); color: var(--a-text);
}
#ids-assistant .idsa-msg.me {
  align-self: flex-end; max-width: 82%;
  background: var(--a-accent-soft); border: 1px solid var(--a-accent-line);
  border-radius: var(--a-radius) var(--a-radius) 4px var(--a-radius);
  color: var(--a-text);
}
/* Сбой ответа — сдержанный красный намёк, без «алармов» */
#ids-assistant .idsa-msg.is-error { border-color: rgba(224, 83, 63, .45); color: var(--a-muted); }
#ids-assistant .idsa-msg a {
  color: var(--a-accent); text-decoration: underline;
  text-underline-offset: 2px; overflow-wrap: anywhere;
}
#ids-assistant .idsa-msg a:hover { color: var(--a-accent-hover); }
#ids-assistant .idsa-hint { font-size: 13px; color: var(--a-muted); line-height: 1.5; }

/* Индикатор ожидания: три точки в пустом пузыре ответа,
   пока с сервера не пришёл первый символ (класс is-pending ставит JS) */
#ids-assistant .idsa-typing { display: inline-flex; align-items: center; gap: 5px; padding: 4px 2px; }
#ids-assistant .idsa-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--a-muted);
  opacity: .35; animation: idsaTyping 1.1s ease-in-out infinite;
}
#ids-assistant .idsa-typing i:nth-child(2) { animation-delay: .15s; }
#ids-assistant .idsa-typing i:nth-child(3) { animation-delay: .3s; }

/* ---- Поле ввода ---- */
#ids-assistant .idsa-form {
  display: flex; align-items: flex-end; gap: 8px; flex: 0 0 auto;
  padding: 10px 12px; background: var(--a-head); border-top: 1px solid var(--a-border);
}
@media (max-width: 560px) {
  /* Учёт «домашней» полосы iOS на полноэкранной панели */
  #ids-assistant .idsa-form { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
#ids-assistant .idsa-form textarea {
  flex: 1 1 auto; min-width: 0; resize: none; height: 42px; max-height: 110px;
  margin: 0; padding: 10px 12px;
  background: var(--a-bg-2); color: var(--a-text);
  border: 1px solid var(--a-border); border-radius: var(--a-radius-sm);
  font: inherit; font-size: 14px; line-height: 1.5; caret-color: var(--a-accent);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#ids-assistant .idsa-form textarea::placeholder { color: var(--a-muted); opacity: .65; }
#ids-assistant .idsa-form textarea:focus {
  outline: none; border-color: var(--a-accent);
  box-shadow: 0 0 0 3px var(--a-accent-soft);
}
/* Кнопка отправки — младшая сестра кнопки вызова: тот же оранжевый круг с фаской */
#ids-assistant .idsa-send {
  flex: 0 0 auto; align-self: flex-end; width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--a-accent); color: var(--a-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: background-color .15s ease, opacity .15s ease, transform .15s ease;
}
#ids-assistant .idsa-send:hover { background: var(--a-accent-hover); }
#ids-assistant .idsa-send:active { transform: scale(.94); }
#ids-assistant .idsa-send:focus-visible { outline: 2px solid var(--a-text); outline-offset: 2px; }
#ids-assistant .idsa-send:disabled { opacity: .45; cursor: default; background: var(--a-accent); transform: none; }
#ids-assistant .idsa-send svg { width: 18px; height: 18px; }

/* ---- Анимации (имена с префиксом — keyframes глобальны) ---- */
@keyframes idsaFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes idsaPanelIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes idsaTyping { 0%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Уважение к prefers-reduced-motion: всё на местах сразу, точки — статичное «…».
   !important нужен, чтобы перебить анимации, объявленные более специфичными
   селекторами выше (тот же приём, что в app.css лендинга). */
@media (prefers-reduced-motion: reduce) {
  #ids-assistant *, #ids-assistant *::before, #ids-assistant *::after {
    animation: none !important; transition: none !important;
  }
  #ids-assistant .idsa-typing i { opacity: .6; }
}