/* ---------- плашка чата с ассистентом ---------- */
/* виджета нет в макете: это дополнение к сайту, поэтому цвета и типографику
   берём те же, что у остальных всплывающих блоков — меню и списка языков */
.chat{
  position:fixed;right:24px;bottom:24px;z-index:120;
  font-family:Roboto,Arial,sans-serif;
}
.chat__fab{
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--accent,#43BCC3);color:#04121A;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .2s,box-shadow .2s;
}
.chat__fab:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.55)}
.chat__fab svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8}
.chat__fab .chat__x{display:none}
.chat.open .chat__fab .chat__ico{display:none}
.chat.open .chat__fab .chat__x{display:block}

.chat__panel{
  position:absolute;right:0;bottom:76px;width:376px;
  /* панель растёт вверх — упираем её в закреплённую шапку, иначе на невысоких
     экранах она накрывает переключатель языков. --bar-h ставит скрипт подгонки */
  /* 100px = отступ плашки от низа (24) плюс отступ панели от плашки (76) */
  max-height:min(620px,calc(100vh - 100px - var(--bar-h,80px) - 14px));
  display:flex;flex-direction:column;overflow:hidden;
  background:#0C1322;border:1px solid rgba(255,255,255,.10);border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s,transform .22s,visibility .22s;
}
.chat.open .chat__panel{opacity:1;visibility:visible;transform:none}
.chat__panel[hidden]{display:none}

.chat__head{
  display:flex;align-items:center;gap:10px;padding:14px 14px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.chat__avatar{
  width:36px;height:36px;flex:0 0 36px;border-radius:50%;
  background:var(--accent,#43BCC3);color:#04121A;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
}
.chat__names{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.chat__title{color:#fff;font-size:15px;font-weight:600}
.chat__sub{color:rgba(255,255,255,.55);font-size:12px}
.chat__head-btns{margin-left:auto;display:flex;align-items:center;gap:2px}
.chat__close,.chat__min{
  width:28px;height:28px;border:0;background:none;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;border-radius:8px;
}
.chat__close svg,.chat__min svg{width:14px;height:14px;stroke:rgba(255,255,255,.7);stroke-width:2;fill:none}
.chat__close:hover,.chat__min:hover{background:rgba(255,255,255,.06)}
.chat__close:hover svg,.chat__min:hover svg{stroke:#fff}
.chat__min svg{transition:transform .25s}
/* свёрнутая панель: остаётся только полоса с заголовком */
.chat.small .chat__log,
.chat.small .chat__form,
.chat.small .chat__tg{display:none}
.chat.small .chat__panel{max-height:none}
.chat.small .chat__min svg{transform:rotate(180deg)}
.chat__head{cursor:pointer}

.chat__log{
  flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;
}
.chat__log::-webkit-scrollbar{width:6px}
.chat__log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
.chat__msg{
  max-width:82%;padding:10px 13px;border-radius:14px;
  font-size:14px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word;
}
.chat__msg a{color:var(--accent,#43BCC3)}
.chat__msg--bot{align-self:flex-start;background:#141C2E;color:#E9EDF5;border-bottom-left-radius:5px}
.chat__msg--me{align-self:flex-end;background:var(--accent,#43BCC3);color:#04121A;border-bottom-right-radius:5px}
.chat__msg--sys{align-self:center;background:none;color:rgba(255,255,255,.5);font-size:12px;text-align:center}
.chat__dots{display:inline-flex;gap:4px;align-items:center;height:14px}
.chat__dots i{
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);
  animation:chatDot 1.1s infinite ease-in-out;
}
.chat__dots i:nth-child(2){animation-delay:.15s}
.chat__dots i:nth-child(3){animation-delay:.3s}
@keyframes chatDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* меню бота: кнопки приходят вместе с ответом и живут в ленте, как в телеграме */
/* ряды выравниваем в две колонки, как клавиатуру в боте: иначе кнопки
   разной длины дают рваный край */
.chat__kb{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:2px 0 6px}
.chat__key{
  border:1px solid rgba(255,255,255,.16);border-radius:12px;background:#141C2E;
  color:#D7DEE9;font-family:inherit;font-size:13px;line-height:1.35;
  padding:9px 12px;cursor:pointer;text-align:center;
  display:flex;align-items:center;justify-content:center;min-height:38px;
  transition:border-color .2s,color .2s,background .2s;
}
.chat__key--wide{grid-column:1 / -1;justify-content:flex-start;text-align:left}
.chat__key:hover:not(:disabled){border-color:var(--accent,#43BCC3);color:#fff;background:#18223a}
.chat__key:disabled{opacity:.45;cursor:default}

/* картинки-инструкции из FAQ */
.chat__msg--pic{padding:6px;max-width:92%}
.chat__pic{display:block;width:100%;height:auto;border-radius:10px}
.chat__cap{padding:8px 7px 3px;font-size:14px;line-height:1.45;white-space:pre-wrap}

.chat__form{
  display:flex;align-items:flex-end;gap:8px;padding:10px 12px 12px;
  border-top:1px solid rgba(255,255,255,.10);
}
.chat__input{
  flex:1;resize:none;max-height:96px;min-height:38px;
  background:#141C2E;border:1px solid rgba(255,255,255,.12);border-radius:12px;
  color:#fff;font-family:inherit;font-size:14px;line-height:1.35;padding:10px 12px;
}
.chat__input::placeholder{color:rgba(255,255,255,.4)}
.chat__input:focus{outline:none;border-color:var(--accent,#43BCC3)}
.chat__send{
  width:38px;height:38px;flex:0 0 38px;border:0;border-radius:12px;cursor:pointer;
  background:var(--accent,#43BCC3);color:#04121A;display:flex;align-items:center;justify-content:center;
}
.chat__send svg{width:17px;height:17px;fill:currentColor}
.chat__send:disabled{opacity:.45;cursor:default}
.chat__tg{
  display:block;text-align:center;padding:0 14px 12px;
  color:rgba(255,255,255,.5);font-size:12px;text-decoration:none;
}
.chat__tg:hover{color:var(--accent,#43BCC3)}

@media (max-width:767px){
  .chat{right:16px;bottom:16px}
  .chat__fab{width:54px;height:54px}
}
@media (prefers-reduced-motion:reduce){
  .chat__fab,.chat__panel{transition:none}
  .chat__dots i{animation:none}
}