/* Чат поддержки: кнопка в углу и окно разговора.

   Зачем окно на сайте, если есть бот. Человек с вопросом на странице цен,
   уходя в Telegram, теряет и страницу, и мысль, и половина не возвращается.
   Окно оставляет его там, где он и был.

   z-index 300 — выше всего остального на сайте (максимум в проекте был
   200 у модальных окон). Кнопка поддержки должна лежать поверх всего:
   вопрос возникает как раз тогда, когда что-то закрыло собой экран.

   Свои переменные не заводим: цвета берём из общей темы, чтобы окно
   переключалось вместе с сайтом и не оставалось светлым пятном ночью. */

.sup{position:fixed;right:18px;bottom:18px;z-index:300;
  font-family:var(--font);
  /* На телефонах с вырезами кнопка иначе уезжает под системную полосу. */
  right:max(18px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom))}

/* ── кнопка ─────────────────────────────────────────────────────────── */
.sup-btn{width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;padding:0;
  background:var(--acc);color:var(--acc-ink);
  box-shadow:0 8px 26px -6px rgba(0,0,0,.5);
  transition:transform .18s ease, box-shadow .18s ease}
.sup-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -6px rgba(0,0,0,.55)}
.sup-btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.sup-btn svg{fill:currentColor;display:block}
/* Непрочитанный ответ. Точка, а не число: считать входящие в поддержке
   незачем, важно только что ответ есть. */
.sup-dot{position:absolute;top:1px;right:1px;width:13px;height:13px;
  border-radius:50%;background:#e5484d;border:2px solid var(--bg);display:none}
.sup.has-new .sup-dot{display:block}

/* ── окно ───────────────────────────────────────────────────────────── */
.sup-win{position:absolute;right:0;bottom:70px;width:352px;
  max-height:min(560px,calc(100dvh - 120px));
  display:none;flex-direction:column;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 22px 60px -18px rgba(0,0,0,.66)}
.sup.is-open .sup-win{display:flex}
.sup.is-open .sup-btn{transform:none}

.sup-head{display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:13px 12px 13px 15px;border-bottom:1px solid var(--line)}
.sup-head img{width:30px;height:30px;border-radius:8px;flex:0 0 auto}
.sup-head b{display:block;font-size:14.5px;font-weight:600;line-height:1.25}
.sup-head span{display:block;font-size:12px;color:var(--mut);line-height:1.3}
.sup-x{margin-left:auto;width:30px;height:30px;flex:0 0 auto;
  border:0;border-radius:8px;cursor:pointer;padding:0;
  background:transparent;color:var(--txt-2);font-size:19px;line-height:1;
  display:grid;place-items:center}
.sup-x:hover{background:color-mix(in srgb,var(--txt) 9%,transparent);color:var(--txt)}

.sup-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:14px;display:flex;flex-direction:column;gap:9px}

/* Реплики. Свои — по правому краю акцентом, ответы поддержки — по левому
   на подложке: разговор должен читаться с одного взгляда, без подписей. */
.sup-msg{max-width:82%;padding:9px 12px;border-radius:13px;
  font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.sup-msg.me{align-self:flex-end;background:var(--acc);color:var(--acc-ink);
  border-bottom-right-radius:5px}
.sup-msg.op{align-self:flex-start;border-bottom-left-radius:5px;
  background:color-mix(in srgb,var(--txt) 8%,transparent);color:var(--txt)}
.sup-msg.sys{align-self:stretch;max-width:none;text-align:center;
  background:transparent;color:var(--mut);font-size:12.5px;padding:2px 0}
.sup-who{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--acc-text);margin-bottom:3px}

.sup-foot{flex:0 0 auto;display:flex;gap:8px;align-items:flex-end;
  padding:10px 11px;border-top:1px solid var(--line)}
.sup-in{flex:1 1 auto;resize:none;min-height:38px;max-height:120px;
  padding:9px 11px;border-radius:10px;font:inherit;font-size:14px;
  line-height:1.45;color:var(--txt);
  background:var(--bg);border:1px solid var(--line)}
.sup-in:focus{outline:0;border-color:var(--acc)}
.sup-in::placeholder{color:var(--mut)}
.sup-send{flex:0 0 auto;width:38px;height:38px;border:0;border-radius:10px;
  cursor:pointer;padding:0;display:grid;place-items:center;
  background:var(--acc);color:var(--acc-ink);transition:opacity .15s ease}
.sup-send svg{fill:currentColor;display:block}
.sup-send:disabled{opacity:.4;cursor:default}
.sup-err{padding:0 14px 10px;font-size:12.5px;color:#e5484d;display:none}
.sup.has-err .sup-err{display:block}

@media(max-width:560px){
  /* На телефоне окно занимает экран: разговор в конверте 352 px посреди
     мелкого экрана неудобно читать и легко закрыть промахом. */
  .sup-win{position:fixed;inset:0;width:auto;max-height:none;
    border:0;border-radius:0}
  .sup.is-open .sup-btn{display:none}
  .sup-body{padding:14px 14px 6px}
  .sup-foot{padding-bottom:max(10px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  .sup-btn{transition:none}
  .sup-btn:hover{transform:none}
}