/* AIXVZ chat widget — лёгкий консультант сайта.
   Без зависимостей. Стиль совпадает с сайтом: тёмная тема, циан/фиолетовый акцент. */

.aixvz-widget, .aixvz-widget * { box-sizing: border-box; }

.aixvz-widget {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  font: 16px/1.5 Inter, Manrope, system-ui, sans-serif;
}

/* кнопка */
.aixvz-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #22D3EE, #A855F7);
  color: #04121a;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 8px 30px rgba(34, 211, 238, .45);
  transition: transform .2s, box-shadow .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aixvz-btn:hover { transform: scale(1.06); box-shadow: 0 10px 40px rgba(168, 85, 247, .5); }
.aixvz-btn.aixvz-hidden { display: none; }

/* панель */
.aixvz-panel {
  position: fixed;
  right: 22px;
  bottom: 92px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 130px);
  background: #111A2E;
  border: 1px solid rgba(34, 211, 238, .18);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.aixvz-panel.aixvz-open { display: flex; }

.aixvz-head {
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(34, 211, 238, .16), rgba(168, 85, 247, .16));
  border-bottom: 1px solid rgba(148, 163, 184, .14);
  display: flex;
  align-items: center;
  gap: 10px;
}
.aixvz-head b { color: #F8FAFC; font-size: 16px; letter-spacing: .2px; }
.aixvz-head span { color: #94A3B8; font-size: 13px; display: block; }
.aixvz-dot { width: 8px; height: 8px; border-radius: 50%; background: #10B981; box-shadow: 0 0 10px #10B981; }
.aixvz-close {
  margin-left: auto; background: transparent; border: 0; color: #94A3B8;
  font-size: 22px; cursor: pointer; line-height: 1; padding: 0 4px;
}
.aixvz-close:hover { color: #22D3EE; }

.aixvz-body {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  background: #0B1220;
}
.aixvz-msg {
  max-width: 86%; padding: 10px 13px; border-radius: 12px;
  font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word;
}
.aixvz-msg.aixvz-bot { align-self: flex-start; background: #16223c; color: #F8FAFC; border: 1px solid rgba(148,163,184,.12); }
.aixvz-msg.aixvz-user { align-self: flex-end; background: linear-gradient(135deg, #22D3EE, #0ea5e9); color: #04121a; font-weight: 500; }
.aixvz-msg.aixvz-sys { align-self: center; background: transparent; color: #94A3B8; font-size: 13px; text-align: center; }

.aixvz-typing { align-self: flex-start; color: #94A3B8; font-size: 14px; padding: 4px 2px; }
.aixvz-typing i { animation: aixvz-blink 1.2s infinite; font-style: normal; }
.aixvz-typing i:nth-child(2) { animation-delay: .2s; }
.aixvz-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes aixvz-blink { 0%, 60%, 100% { opacity: .25 } 30% { opacity: 1 } }

.aixvz-cta {
  display: none; margin: 4px 0 0; padding: 10px 14px; border-radius: 12px;
  background: linear-gradient(135deg, #22D3EE, #A855F7); color: #04121a;
  font-weight: 700; text-align: center; text-decoration: none; font-size: 15px;
}
.aixvz-cta.aixvz-show { display: block; }

.aixvz-foot { border-top: 1px solid rgba(148,163,184,.14); background: #111A2E; padding: 10px 12px; }
.aixvz-row { display: flex; gap: 8px; align-items: flex-end; }
.aixvz-input {
  flex: 1; resize: none; min-height: 42px; max-height: 96px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid rgba(148,163,184,.25);
  background: #0B1220; color: #F8FAFC; font: inherit; font-size: 15px; outline: none;
}
.aixvz-input:focus { border-color: #22D3EE; }
.aixvz-send {
  width: 42px; height: 42px; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, #22D3EE, #0ea5e9); color: #04121a; font-size: 18px;
}
.aixvz-send:disabled { opacity: .5; cursor: default; }
.aixvz-count { color: #94A3B8; font-size: 12px; text-align: right; margin-top: 4px; }
.aixvz-count.aixvz-over { color: #F59E0B; }

@media (max-width: 560px) {
  .aixvz-panel {
    right: 0; left: 0; bottom: 0; width: 100%; height: 100%;
    max-height: 100%; max-width: 100%; border-radius: 0; border: 0;
  }
  .aixvz-btn { right: 16px; bottom: 16px; }
}