/* ==========================================================================
   Виджет «Личный AI-наставник по профессиям» — боковой живой чат.
   Отдельный файл, чтобы не задевать основной style.css рабочего сайта.
   ========================================================================== */

:root {
  --chat-navy: #12162e;
  --chat-navy-2: #1b2145;
  --chat-amber: #f9bd2e;
  --chat-user: #2b3566;
  --chat-radius: 16px;
}

/* Плавающая кнопка запуска чата */
#pn-chat-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 9998;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--chat-amber), #ffd36b);
  color: var(--chat-navy); font-weight: 700; font-size: 15px;
  border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
#pn-chat-fab:hover { transform: translateY(-2px); }
#pn-chat-fab .pn-dot { width: 9px; height: 9px; border-radius: 50%;
  background: #1db954; box-shadow: 0 0 0 0 rgba(29,185,84,.6);
  animation: pn-pulse 2s infinite; }
@keyframes pn-pulse {
  0% { box-shadow: 0 0 0 0 rgba(29,185,84,.6); }
  70% { box-shadow: 0 0 0 8px rgba(29,185,84,0); }
  100% { box-shadow: 0 0 0 0 rgba(29,185,84,0); }
}

/* Панель чата — «длинное окошко» справа во всю высоту */
#pn-chat {
  position: fixed; top: 0; right: 0; z-index: 9999;
  width: 380px; max-width: 100vw; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--chat-navy); color: #fff;
  box-shadow: -12px 0 40px rgba(0,0,0,.35);
  transform: translateX(100%); transition: transform .28s ease;
}
#pn-chat.open { transform: translateX(0); }

#pn-chat header {
  padding: 16px 18px; background: var(--chat-navy-2);
  display: flex; align-items: center; gap: 12px;
}
#pn-chat header .pn-ava {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px;
  background: linear-gradient(135deg, var(--chat-amber), #ffd36b);
  display: grid; place-items: center; font-size: 20px;
}
#pn-chat header .pn-title { font-weight: 700; font-size: 15px; line-height: 1.2; }
#pn-chat header .pn-sub { font-size: 12px; opacity: .7; }
#pn-chat header .pn-close {
  margin-left: auto; background: none; border: none; color: #fff;
  font-size: 22px; cursor: pointer; opacity: .7;
}
#pn-chat header .pn-close:hover { opacity: 1; }

#pn-chat-log {
  flex: 1; overflow-y: auto; padding: 16px; display: flex;
  flex-direction: column; gap: 10px;
}
.pn-msg { max-width: 85%; padding: 10px 14px; border-radius: var(--chat-radius);
  font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.pn-msg.user { align-self: flex-end; background: var(--chat-user);
  border-bottom-right-radius: 4px; }
.pn-msg.assistant, .pn-msg.admin {
  align-self: flex-start; background: var(--chat-navy-2);
  border-bottom-left-radius: 4px; }
.pn-msg.admin { border: 1px solid var(--chat-amber); }
.pn-msg.needs-admin { opacity: .95; font-style: italic; }
.pn-msg .pn-badge { display: block; font-size: 11px; color: var(--chat-amber);
  font-weight: 700; margin-bottom: 4px; }

/* «Печатает…» — три прыгающие точки */
.pn-typing { align-self: flex-start; background: var(--chat-navy-2);
  padding: 12px 16px; border-radius: var(--chat-radius);
  border-bottom-left-radius: 4px; display: inline-flex; gap: 4px; }
.pn-typing span { width: 7px; height: 7px; border-radius: 50%;
  background: #fff; opacity: .5; animation: pn-bounce 1.2s infinite; }
.pn-typing span:nth-child(2) { animation-delay: .2s; }
.pn-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes pn-bounce { 0%,60%,100% { transform: translateY(0); opacity:.4; }
  30% { transform: translateY(-5px); opacity: 1; } }

#pn-chat-form { padding: 12px; background: var(--chat-navy-2);
  display: flex; gap: 8px; align-items: flex-end; }
#pn-chat-input { flex: 1; resize: none; border: none; border-radius: 12px;
  padding: 10px 12px; font-size: 14px; font-family: inherit; max-height: 120px;
  background: #0d1122; color: #fff; }
#pn-chat-input:focus { outline: 2px solid var(--chat-amber); }
#pn-chat-send { border: none; cursor: pointer; border-radius: 12px;
  padding: 0 16px; height: 40px; font-weight: 700; color: var(--chat-navy);
  background: var(--chat-amber); }
#pn-chat-send:disabled { opacity: .5; cursor: default; }

#pn-chat-foot { padding: 6px 12px 12px; background: var(--chat-navy-2);
  font-size: 11px; opacity: .65; display: flex; justify-content: space-between; }
#pn-chat-foot a { color: var(--chat-amber); cursor: pointer; text-decoration: none; }

@media (max-width: 480px) {
  #pn-chat { width: 100vw; }
}