/* Помощник NH-1. Стили держим отдельно от сайта: виджет переносится
   на другой сайт вместе с chat.js, не таща за собой чужую вёрстку. */

.nh{--nh-accent:#8E2F3C;--nh-ink:#2E211B;--nh-paper:#FFFCF7;--nh-hair:#E4D9C9}

/* Кнопка помощника — круг, а не плашка.

   Название лежит внутри круга в три строки. Так кнопка остаётся кругом
   при любой длине надписи и не растёт вширь, наезжая на содержание. */
.nh-open{
  position:fixed;right:22px;bottom:22px;z-index:60;
  width:118px;height:118px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font:inherit;font-size:13.5px;line-height:1.25;font-weight:500;cursor:pointer;
  background:var(--nh-accent);color:#fff;border:0;padding:0;
  box-shadow:0 8px 28px rgba(46,33,27,.24);
  transition:transform .18s,box-shadow .18s,opacity .18s;
}
.nh-label{display:block;max-width:92px;text-wrap:balance}
/* Дыхание.

   Ритм человеческий: полный цикл около четырёх секунд, вдох и выдох
   равной длины и с плавным замедлением на краях — поэтому ease-in-out,
   а не линейность, от которой движение выглядит механическим.

   Дышит сам круг: слегка набирает размер, и от него расходится мягкое
   кольцо, гаснущее к концу вдоха. Кольцо сделано тенью, а не отдельным
   элементом — тень не занимает места и ничего не сдвигает на странице.

   При наведении дыхание прекращается: человек кнопку уже нашёл,
   дальше движение только мешает целиться. */
.nh-open{animation:nh-breathe 3.9s ease-in-out infinite}
.nh-open:hover{
  transform:scale(1.06);animation:none;
  box-shadow:0 12px 34px rgba(46,33,27,.32), 0 0 0 10px rgba(142,47,60,.12);
}
@keyframes nh-breathe{
  0%,100%{transform:scale(.97);
          box-shadow:0 8px 28px rgba(46,33,27,.24), 0 0 0 0 rgba(142,47,60,.34)}
  55%    {transform:scale(1.03);
          box-shadow:0 12px 34px rgba(46,33,27,.3), 0 0 0 22px rgba(142,47,60,0)}
}
.nh-open.nh-hidden{opacity:0;pointer-events:none;transform:translateY(8px)}

.nh-panel{
  position:fixed;right:22px;bottom:22px;z-index:61;
  width:min(392px,calc(100vw - 32px));height:min(620px,calc(100dvh - 44px));
  display:flex;flex-direction:column;
  background:var(--nh-paper);border:1px solid var(--nh-hair);border-radius:20px;
  box-shadow:0 18px 60px rgba(46,33,27,.24);overflow:hidden;
  animation:nh-in .26s cubic-bezier(.22,.8,.3,1) both;
}
.nh-panel[hidden]{display:none}
@keyframes nh-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

.nh-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--nh-hair);
}
.nh-head b{font-family:"Cormorant Garamond",Georgia,serif;font-size:18px;font-weight:600;color:var(--nh-ink)}
.nh-close{background:none;border:0;cursor:pointer;font-size:24px;line-height:1;color:#9A8674;padding:2px 6px}
.nh-close:hover{color:var(--nh-ink)}

.nh-log{
  flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;
  padding:16px;scrollbar-width:thin;overscroll-behavior:contain;
}
.nh-msg{margin:0;max-width:88%;font-size:15px;line-height:1.5;white-space:pre-wrap}
.nh-bot{align-self:flex-start;color:var(--nh-ink)}
.nh-him{align-self:flex-start;color:#6B4A2E;border-left:2px solid var(--nh-accent);padding-left:10px}
.nh-me{
  align-self:flex-end;background:#F2E7D8;color:#4A382C;
  padding:9px 13px;border-radius:14px 14px 4px 14px;font-size:14.5px;
}
.nh-sys{align-self:center;text-align:center;font-size:12.5px;color:#9A8674;font-style:italic}
.nh-wait{color:#9A8674;letter-spacing:3px}

.nh-note{margin:0;padding:0 16px;min-height:1.2em;font-size:12.5px;color:#9A8674}

.nh-form{display:flex;align-items:flex-end;gap:8px;padding:12px 14px 14px;border-top:1px solid var(--nh-hair)}
.nh-input{
  flex:1;font:inherit;font-size:16px;line-height:1.4;resize:none;
  border:1px solid var(--nh-hair);border-radius:14px;padding:10px 12px;
  background:#fff;color:var(--nh-ink);max-height:120px;overflow-y:auto;
}
.nh-input:focus{outline:2px solid color-mix(in srgb,var(--nh-accent) 45%,transparent);outline-offset:1px}
.nh-send{
  font-size:18px;line-height:1;cursor:pointer;border:0;border-radius:12px;
  background:var(--nh-accent);color:#fff;width:42px;height:42px;flex:none;
}
.nh-send:hover{filter:brightness(1.08)}

@media(max-width:560px){
  .nh-open{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));
           width:102px;height:102px;font-size:12.5px}
  .nh-label{max-width:80px}
  .nh-panel{
    right:8px;left:8px;bottom:8px;width:auto;
    height:min(78dvh,620px);border-radius:18px;
  }
}
/* Кому движение на экране мешает — тому ничего не дышит. */
@media(prefers-reduced-motion:reduce){
  .nh-panel{animation:none}
  .nh-open{animation:none;transform:none}
}