/* ---------- Онлайн-консультант — виджет чата ---------- */
/* Цвета берутся из :root в style.css, отдельной палитры нет намеренно */

.va-launcher{
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--gold); color: var(--ink);
  box-shadow: var(--shadow);
  display: grid; place-items: center;
  transition: transform .15s ease;
}
.va-launcher:hover{ transform: scale(1.06); }
.va-launcher:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }
.va-launcher svg{ width: 26px; height: 26px; }
.va-launcher .va-close-ico{ display: none; }
.va-launcher.is-open .va-chat-ico{ display: none; }
.va-launcher.is-open .va-close-ico{ display: block; }

.va-badge{
  position: absolute; top: -4px; right: -4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--seal); border: 2px solid var(--paper);
}
@media (prefers-reduced-motion: no-preference){
  .va-badge{ animation: va-pulse 2.2s ease-in-out infinite; }
}
@keyframes va-pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(179,51,51,.35); }
  50%{ box-shadow: 0 0 0 5px rgba(179,51,51,0); }
}

.va-panel{
  position: fixed; right: 20px; bottom: 90px; z-index: 9999;
  width: 360px; max-width: calc(100vw - 40px);
  height: 520px; max-height: calc(100vh - 130px);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
  font-family: var(--f-body);
  opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.va-panel.is-open{ opacity: 1; transform: none; pointer-events: auto; }

.va-head{
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--line); flex: none;
}
.va-avatar{
  width: 38px; height: 38px; border-radius: 999px; flex: none;
  background: var(--ink); color: var(--gold);
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
}
.va-head-txt{ min-width: 0; }
.va-head-name{ font-weight: 700; font-size: 14.5px; color: var(--ink); line-height: 1.3; }
.va-head-status{ font-size: 12px; color: var(--slate); display: flex; align-items: center; gap: 6px; }
.va-dot{ width: 6px; height: 6px; border-radius: 50%; background: #1E8A63; flex: none; }

.va-log{
  flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px;
}
.va-row{ display: flex; gap: 8px; max-width: 90%; }
.va-row.va-bot{ align-self: flex-start; }
.va-row.va-me{ align-self: flex-end; flex-direction: row-reverse; }
.va-mini{
  width: 24px; height: 24px; border-radius: 999px; flex: none; margin-top: 2px;
  background: var(--ink); color: var(--gold);
  display: grid; place-items: center; font-size: 9px; font-weight: 700;
}
.va-row.va-me .va-mini{ background: var(--paper-dim); color: var(--slate); }
.va-bub{ padding: 10px 13px; border-radius: var(--radius); font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.va-row.va-bot .va-bub{ background: var(--paper-dim); border-top-left-radius: 4px; }
.va-row.va-me .va-bub{ background: var(--gold); border-top-right-radius: 4px; font-weight: 500; }
.va-bub p{ margin: 0 0 8px; } .va-bub p:last-child{ margin: 0; }
.va-bub ul{ margin: 6px 0 0; padding-left: 17px; } .va-bub li{ margin-bottom: 4px; }
.va-bub b{ font-weight: 700; }
.va-bub a{ color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.va-typing{ display: flex; gap: 4px; padding: 12px; }
.va-typing i{ width: 5px; height: 5px; border-radius: 50%; background: var(--slate); display: block; }
@media (prefers-reduced-motion: no-preference){
  .va-typing i{ animation: va-blink 1.1s infinite ease-in-out; }
  .va-typing i:nth-child(2){ animation-delay: .15s; }
  .va-typing i:nth-child(3){ animation-delay: .3s; }
}
@keyframes va-blink{ 0%,60%,100%{ opacity: .3; } 30%{ opacity: 1; } }

.va-chips{ display: flex; gap: 7px; flex-wrap: wrap; padding: 0 14px 10px; flex: none; }
.va-chip{
  font: inherit; font-size: 12.5px; padding: 6px 11px; border-radius: 999px; cursor: pointer;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
}
.va-chip:hover{ background: var(--gold-soft); border-color: var(--gold); }

.va-bar{ display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); flex: none; }
.va-bar input{
  flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 9px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.va-bar input::placeholder{ color: var(--slate); }
.va-send{
  font: inherit; font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: 999px; border: 0;
  cursor: pointer; color: var(--ink); background: var(--gold);
}
.va-send:hover{ filter: brightness(.94); }

.va-lead{
  background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--gold);
  border-radius: var(--radius-sm); padding: 12px; display: grid; gap: 8px; max-width: 260px;
}
.va-lead-title{ font-weight: 700; font-size: 13.5px; color: var(--ink); }
.va-lead input{
  font: inherit; font-size: 13.5px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); width: 100%;
}
.va-lead button{
  font: inherit; font-weight: 700; font-size: 13.5px; padding: 9px; border-radius: 999px; border: 0;
  cursor: pointer; color: var(--ink); background: var(--gold);
}
.va-lead button:disabled{ background: var(--paper-dim); color: var(--slate); cursor: default; }
.va-lead-fine{ font-size: 11px; color: var(--slate); line-height: 1.4; }

@media (max-width: 480px){
  .va-panel{
    right: 10px; left: 10px; bottom: 84px; width: auto;
    height: calc(100vh - 104px); max-height: none;
  }
  .va-launcher{ right: 14px; bottom: 14px; }
}