/* =============================================================================
   chat.css — окно ИИ-помощника «Андрей» в правом нижнем углу сайта.
   Собран 1:1 с согласованного эталона МОКАПЫ/ИИ_помощник_чат.html (одобрен
   Александром 11.08.2026). Все классы с префиксом pn- — чтобы не столкнуться
   с классами сайта (.msg, .chip, .note, .field уже заняты).
   Токены (--accent, --line, --bg-1 …) берутся из style.css, тут не дублируются.
   ========================================================================== */

/* --- кнопка-лаунчер в углу ------------------------------------------------ */
.pn-launcher{position:fixed;right:24px;bottom:24px;z-index:900;
  display:flex;align-items:flex-end;gap:12px}
.pn-launcher__hint{background:var(--card,#fff);border:1px solid var(--line,#E4E5E8);
  border-radius:12px;box-shadow:var(--sh2,0 2px 10px rgba(20,22,28,.10));padding:12px;
  max-width:236px;font-size:13px;line-height:1.4;color:var(--text,#3A3F4A);position:relative}
.pn-launcher__hint b{color:var(--head,#1E1F22);font-weight:700}
.pn-launcher__hint-x{position:absolute;top:8px;right:8px;width:16px;height:16px;
  border:0;background:none;padding:0;color:var(--muted,#5B606C);font-size:12px;
  line-height:16px;text-align:center;cursor:pointer}
.pn-launcher__btn{width:56px;height:56px;border-radius:50%;background:var(--accent,#E31E24);
  border:0;padding:0;cursor:pointer;box-shadow:var(--sh2,0 2px 10px rgba(20,22,28,.10));
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;position:relative;
  transition:transform .18s ease,box-shadow .18s ease}
.pn-launcher__btn:hover{transform:translateY(-2px);box-shadow:var(--sh3,0 12px 32px rgba(20,22,28,.18))}
.pn-launcher__btn:focus-visible{outline:2px solid var(--head,#1E1F22);outline-offset:3px}
.pn-launcher__btn svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.pn-launcher__dot{position:absolute;top:0;right:0;width:12px;height:12px;border-radius:50%;
  background:var(--ok,#3B6D11);border:2px solid #fff}
.pn-launcher[hidden]{display:none}

/* --- окно чата ------------------------------------------------------------ */
.pn-chat{position:fixed;right:24px;bottom:24px;z-index:901;
  width:380px;height:560px;max-height:calc(100vh - 48px);
  background:var(--card,#fff);border:1px solid var(--line,#E4E5E8);border-radius:16px;
  box-shadow:var(--sh3,0 12px 32px rgba(20,22,28,.18));
  display:flex;flex-direction:column;overflow:hidden;
  font-size:16px;line-height:1.5}
.pn-chat[hidden]{display:none}

.pn-chat__head{background:var(--dark,#131313);padding:12px 16px;display:flex;
  align-items:center;gap:12px;flex:0 0 auto}
.pn-chat__ava{width:36px;height:36px;border-radius:50%;background:var(--accent,#E31E24);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pn-chat__ava svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.pn-chat__who{flex:1 1 auto;min-width:0}
.pn-chat__name{color:#fff;font-size:16px;font-weight:700;line-height:1.2}
.pn-chat__state{color:rgba(255,255,255,.75);font-size:12px;font-weight:500;margin-top:4px;
  display:flex;align-items:center;gap:4px}
.pn-chat__state i{width:6px;height:6px;border-radius:50%;background:var(--ok-bg,#EAF3DE);
  display:block;flex:0 0 auto}
.pn-chat__x{width:32px;height:32px;border-radius:8px;border:0;background:none;padding:0;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.75);flex:0 0 auto}
.pn-chat__x:hover{background:var(--dark-line,#242424);color:#fff}
.pn-chat__x:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.pn-chat__x svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* --- лента сообщений ------------------------------------------------------ */
.pn-chat__body{flex:1 1 auto;background:var(--bg-1,#F5F7FA);padding:16px;overflow-y:auto;
  display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.pn-msg{max-width:86%;font-size:14px;line-height:1.5;border-radius:12px;padding:12px;
  white-space:pre-wrap;word-wrap:break-word}
.pn-msg--bot{background:var(--card,#fff);border:1px solid var(--line,#E4E5E8);
  box-shadow:var(--sh1,0 1px 2px rgba(20,22,28,.06));color:var(--text,#3A3F4A);
  align-self:flex-start;border-bottom-left-radius:4px}
.pn-msg--me{background:var(--line,#E4E5E8);color:var(--head,#1E1F22);align-self:flex-end;
  border-bottom-right-radius:4px;font-weight:500}
.pn-msg b{color:var(--head,#1E1F22);font-weight:700}
.pn-msg--me b{color:var(--head,#1E1F22)}
.pn-msg ol,.pn-msg ul{margin:8px 0 0 16px;padding:0}
.pn-msg li{margin-bottom:4px}

/* быстрые вопросы */
.pn-chips{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start}
.pn-chip{background:var(--card,#fff);border:1px solid var(--line-2,#D6D8DD);border-radius:12px;
  padding:8px 12px;font-size:13px;font-weight:600;color:var(--head,#1E1F22);cursor:pointer;
  box-shadow:var(--sh1,0 1px 2px rgba(20,22,28,.06));font-family:inherit;
  transition:border-color .18s ease,transform .18s ease}
.pn-chip:hover{border-color:var(--head,#1E1F22);transform:translateY(-1px)}
.pn-chip:focus-visible{outline:2px solid var(--head,#1E1F22);outline-offset:2px}

/* действия внутри ответа */
.pn-acts{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.pn-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;
  padding:12px 16px;font-size:14px;font-weight:700;border:1px solid transparent;text-align:center;
  cursor:pointer;font-family:inherit;text-decoration:none;transition:transform .18s ease,filter .18s ease}
.pn-b:hover{transform:translateY(-1px)}
.pn-b:focus-visible{outline:2px solid var(--head,#1E1F22);outline-offset:2px}
.pn-b--red{background:var(--accent,#E31E24);color:#fff;box-shadow:var(--sh1,0 1px 2px rgba(20,22,28,.06))}
.pn-b--red:hover{background:var(--accent-2,#B5151A)}
.pn-b--ghost{background:var(--card,#fff);color:var(--head,#1E1F22);border-color:var(--line-2,#D6D8DD);
  box-shadow:var(--sh1,0 1px 2px rgba(20,22,28,.06))}
.pn-b--full{width:100%}
.pn-b svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* индикатор набора */
.pn-typing{display:flex;gap:4px;align-items:center;background:var(--card,#fff);
  border:1px solid var(--line,#E4E5E8);border-radius:12px;border-bottom-left-radius:4px;
  padding:12px;align-self:flex-start;box-shadow:var(--sh1,0 1px 2px rgba(20,22,28,.06))}
.pn-typing i{width:6px;height:6px;border-radius:50%;background:var(--faint,#8A8F9C);display:block;
  animation:pn-blink 1.2s infinite ease-in-out}
.pn-typing i:nth-child(2){animation-delay:.18s}
.pn-typing i:nth-child(3){animation-delay:.36s}
@keyframes pn-blink{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* --- поле ввода ----------------------------------------------------------- */
.pn-chat__foot{flex:0 0 auto;background:var(--card,#fff);border-top:1px solid var(--line,#E4E5E8);
  padding:12px 16px}
.pn-field{display:flex;align-items:center;gap:8px}
.pn-field__in{flex:1 1 auto;height:40px;border:1px solid var(--line-2,#D6D8DD);border-radius:12px;
  background:var(--card,#fff);padding:0 12px;font-size:14px;color:var(--head,#1E1F22);
  font-family:inherit}
.pn-field__in::placeholder{color:var(--muted,#5B606C)}
.pn-field__in:focus{outline:2px solid var(--head,#1E1F22);outline-offset:-1px}
.pn-field__send{width:40px;height:40px;border-radius:12px;background:var(--accent,#E31E24);
  border:0;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;box-shadow:var(--sh1,0 1px 2px rgba(20,22,28,.06))}
.pn-field__send:hover{background:var(--accent-2,#B5151A)}
.pn-field__send:focus-visible{outline:2px solid var(--head,#1E1F22);outline-offset:2px}
.pn-field__send[disabled]{background:var(--line-2,#D6D8DD);cursor:default}
.pn-field__send svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.pn-legal{font-size:12px;line-height:1.4;color:var(--muted,#5B606C);margin-top:8px}
.pn-legal a{color:var(--muted,#5B606C);text-decoration:underline}

/* --- форма заявки внутри окна --------------------------------------------- */
.pn-lead{background:var(--card,#fff);border:1px solid var(--line,#E4E5E8);border-radius:12px;
  box-shadow:var(--sh1,0 1px 2px rgba(20,22,28,.06));padding:12px;align-self:flex-start;width:86%}
.pn-lead__h{font-size:14px;font-weight:700;color:var(--head,#1E1F22);margin-bottom:12px}
.pn-lead__lab{display:block;font-size:12px;font-weight:600;color:var(--muted,#5B606C);margin-bottom:4px}
.pn-lead__in{width:100%;height:40px;border:1px solid var(--line-2,#D6D8DD);border-radius:12px;
  padding:0 12px;font-size:14px;color:var(--head,#1E1F22);margin-bottom:12px;
  background:var(--card,#fff);font-family:inherit;font-weight:600}
.pn-lead__in:focus{outline:2px solid var(--head,#1E1F22);outline-offset:-1px}
.pn-check{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.4;
  color:var(--muted,#5B606C);margin-bottom:12px;cursor:pointer}
.pn-check input{width:16px;height:16px;flex:0 0 auto;margin:0;accent-color:var(--accent,#E31E24)}
.pn-check a{color:var(--muted,#5B606C);text-decoration:underline}
.pn-err{font-size:12px;line-height:1.4;color:var(--accent,#E31E24);font-weight:600;margin-bottom:8px}

/* --- плашки-статусы -------------------------------------------------------- */
.pn-note{display:flex;gap:8px;align-items:flex-start;border-radius:12px;padding:12px;
  font-size:13px;line-height:1.4;align-self:flex-start;max-width:86%}
.pn-note--ok{background:var(--ok-bg,#EAF3DE);color:var(--ok,#3B6D11)}
.pn-note--info{background:var(--info-bg,#E6F1FB);color:var(--info,#185FA5)}
.pn-note--warn{background:var(--warn-bg,#FAEEDA);color:var(--warn,#854F0B)}
.pn-note b{font-weight:700;color:inherit}
.pn-note svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* --- телефон: окно во весь экран ------------------------------------------ */
@media (max-width:640px){
  .pn-chat{right:0;bottom:0;left:0;top:0;width:auto;height:auto;max-height:none;
    border-radius:0;border:0}
  .pn-launcher{right:16px;bottom:16px}
  .pn-launcher__hint{display:none}
  .pn-lead{width:100%}
}

/* уважение к системной настройке «меньше движения» */
@media (prefers-reduced-motion:reduce){
  .pn-launcher__btn,.pn-chip,.pn-b{transition:none}
  .pn-launcher__btn:hover,.pn-chip:hover,.pn-b:hover{transform:none}
  .pn-typing i{animation:none;opacity:.6}
}