/* ===== Панда — AI-консультант: виджет чата + промо-блоки ===== */

/* --- Плавающая кнопка (слева снизу, не конфликтует с «Напишите нам» справа) --- */
.panda-fab {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  background: var(--bg-card, #fff);
  border: 1.5px solid rgba(0, 178, 45, 0.35);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  font-family: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.panda-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 178, 45, 0.25); }
.panda-fab__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: #E8F7EC url('/logo_sq.png') center/78% no-repeat;
  flex-shrink: 0;
  position: relative;
}
.panda-fab__avatar::after {
  content: ''; position: absolute; right: 0; bottom: 2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #00B22D; border: 2px solid #fff;
}
.panda-fab__text { text-align: left; line-height: 1.15; }
.panda-fab__title { font-weight: 800; font-size: .95rem; color: var(--text-primary, #111827); }
.panda-fab__sub { font-size: .72rem; color: var(--text-secondary, #4B5563); }
.panda-fab--hidden { display: none; }
@media (max-width: 640px) {
  .panda-fab { padding: 6px; }
  .panda-fab__text { display: none; }
}

/* --- Панель чата --- */
.panda-panel {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 9995;
  width: 390px;
  max-width: calc(100vw - 40px);
  height: 620px;
  max-height: calc(100dvh - 40px);
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-body, 'DM Sans', sans-serif);
}
.panda-panel.is-open { display: flex; animation: panda-pop .22s ease; }
@keyframes panda-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .panda-panel { left: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
}

.panda-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #0E1B12, #16341F);
  color: #fff;
}
.panda-head__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff url('/logo_sq.png') center/80% no-repeat;
  flex: 0 0 40px;
}
.panda-head__name { font-weight: 800; font-size: 1rem; font-family: var(--font-display, 'Outfit', sans-serif); }
.panda-head__status { font-size: .74rem; opacity: .85; display: flex; align-items: center; gap: 5px; }
.panda-head__status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #34D399; flex: 0 0 7px; }
.panda-head__close {
  margin-left: auto; background: rgba(255,255,255,.12); border: none; color: #fff;
  width: 32px; height: 32px; border-radius: 8px; font-size: 18px; cursor: pointer; line-height: 1;
  flex: 0 0 32px;
}
.panda-head__close:hover { background: rgba(255,255,255,.25); }

.panda-msgs {
  flex: 1; overflow-y: auto; padding: 16px 14px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bg-secondary, #F9FAFB);
}
.panda-msg { display: flex; gap: 8px; max-width: 88%; }
.panda-msg--user { align-self: flex-end; flex-direction: row-reverse; }
.panda-msg__avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  background: #E8F7EC url('/logo_sq.png') center/78% no-repeat;
}
.panda-msg__bubble {
  padding: 10px 14px; border-radius: 14px; font-size: .92rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
  background: var(--bg-card, #fff); color: var(--text-primary, #111827);
  border: 1px solid var(--border, #E5E7EB);
  border-top-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.panda-msg--user .panda-msg__bubble {
  background: #00B22D; color: #fff; border: none;
  border-top-left-radius: 14px; border-top-right-radius: 4px;
}
.panda-msg__bubble a { color: #008a24; font-weight: 600; }
.panda-msg--user .panda-msg__bubble a { color: #fff; }
.panda-msg__bubble ul { margin: 4px 0; padding-left: 18px; white-space: normal; }
.panda-msg__bubble li { margin: 2px 0; }

.panda-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.panda-typing i {
  width: 7px; height: 7px; border-radius: 50%; background: #9CA3AF;
  animation: panda-blink 1.2s infinite;
}
.panda-typing i:nth-child(2) { animation-delay: .2s; }
.panda-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes panda-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.panda-event {
  align-self: center; font-size: .78rem; color: var(--text-secondary, #4B5563);
  background: var(--accent-light, rgba(0,178,45,.08)); border-radius: 999px; padding: 4px 12px;
}

.panda-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 2px; }
.panda-chip {
  border: 1.5px solid rgba(0,178,45,.35); background: var(--bg-card, #fff);
  color: var(--text-primary, #111827); border-radius: 999px; padding: 7px 13px;
  font-size: .82rem; cursor: pointer; font-family: inherit;
  transition: background .15s;
}
.panda-chip:hover { background: var(--accent-light, rgba(0,178,45,.08)); }

.panda-input {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 12px; border-top: 1px solid var(--border, #E5E7EB);
  background: var(--bg-primary, #fff);
}
.panda-input textarea {
  flex: 1; resize: none; border: 1.5px solid var(--border, #E5E7EB);
  border-radius: 12px; padding: 10px 12px; font-size: .92rem; font-family: inherit;
  max-height: 110px; outline: none; background: var(--bg-tertiary, #F3F4F6);
}
.panda-input textarea:focus { border-color: #00B22D; background: #fff; }
.panda-send {
  width: 42px; height: 42px; min-width: 42px; min-height: 42px; max-height: 42px; border-radius: 12px; border: none; cursor: pointer;
  background: #00B22D; color: #fff; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s;
}
.panda-send:hover { background: #009626; }
.panda-send:disabled { opacity: .5; cursor: default; }
.panda-foot {
  text-align: center; font-size: .68rem; color: var(--text-tertiary, #9CA3AF);
  padding: 0 12px 8px; background: var(--bg-primary, #fff);
}

/* --- Промо-блок на главной --- */
.panda-hero {
  margin: clamp(28px, 5vw, 56px) auto;
  max-width: 1200px;
  padding: 0 20px;
}
.panda-hero__card {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 36px);
  background: linear-gradient(120deg, #0E1B12, #17381F 60%, #1D4A28);
  border-radius: 20px; padding: clamp(20px, 4vw, 40px);
  color: #fff; overflow: hidden; position: relative;
}
.panda-hero__avatar {
  width: clamp(72px, 9vw, 110px); height: clamp(72px, 9vw, 110px);
  border-radius: 50%; background: #fff url('/logo_sq.png') center/80% no-repeat;
  flex-shrink: 0; box-shadow: 0 0 0 8px rgba(255,255,255,.08);
}
.panda-hero__title {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: clamp(1.15rem, 2.6vw, 1.7rem); font-weight: 800; margin: 0 0 6px;
}
.panda-hero__sub { margin: 0 0 14px; opacity: .85; font-size: clamp(.85rem, 1.6vw, 1rem); line-height: 1.45; }
.panda-hero__cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: #00B22D; color: #fff; border: none; cursor: pointer;
  padding: 12px 22px; border-radius: 12px; font-weight: 700; font-size: .95rem;
  font-family: inherit; transition: background .15s, transform .15s;
}
.panda-hero__cta:hover { background: #00c934; transform: translateY(-1px); }
.panda-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.panda-hero__chip {
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08);
  color: #fff; border-radius: 999px; padding: 6px 13px; font-size: .8rem;
  cursor: pointer; font-family: inherit; transition: background .15s;
}
.panda-hero__chip:hover { background: rgba(255,255,255,.2); }
@media (max-width: 640px) {
  .panda-hero__card { flex-direction: column; text-align: center; }
  .panda-hero__chips { justify-content: center; }
}

/* --- Промо-блок на страницах товаров --- */
.panda-inline {
  display: flex; align-items: center; gap: 16px;
  background: var(--accent-light, rgba(0,178,45,.06));
  border: 1.5px dashed rgba(0,178,45,.4);
  border-radius: 16px; padding: 16px 20px;
  margin: 28px auto; max-width: 1200px;
}
.panda-inline__avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: #fff url('/logo_sq.png') center/78% no-repeat;
  border: 1px solid var(--border, #E5E7EB);
}
.panda-inline__text { flex: 1; min-width: 0; }
.panda-inline__title { font-weight: 800; margin: 0 0 2px; font-size: .98rem; color: var(--text-primary, #111827); }
.panda-inline__sub { margin: 0; font-size: .85rem; color: var(--text-secondary, #4B5563); line-height: 1.4; }
.panda-inline__btn {
  flex-shrink: 0; background: #00B22D; color: #fff; border: none; cursor: pointer;
  padding: 10px 18px; border-radius: 10px; font-weight: 700; font-size: .88rem;
  font-family: inherit; transition: background .15s;
}
.panda-inline__btn:hover { background: #009626; }
@media (max-width: 640px) {
  .panda-inline { flex-direction: column; text-align: center; margin-left: 16px; margin-right: 16px; }
}

/* Большое окно во время диалога */
.panda-panel { transition: width .25s ease, height .25s ease; }
.panda-panel--big {
  width: 480px;
  height: 760px;
}
@media (max-width: 640px) {
  .panda-panel--big { width: 100vw; height: 100dvh; }
}

/* Фото товара в сообщении */
.panda-msg__img {
  display: block;
  max-width: 100%;
  max-height: 190px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 12px;
  padding: 6px;
  margin: 8px 0 4px;
}

/* Кнопки «обновить подсказки» */
.panda-chip--refresh {
  border-style: dashed;
  color: var(--text-secondary, #4B5563);
  background: transparent;
}
.panda-hero__chip--refresh { border-style: dashed; opacity: .85; }
.panda-chips--start { max-height: 260px; overflow-y: auto; }

/* Привлечение внимания: покачивание кнопки */
@keyframes panda-wiggle {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-7deg) scale(1.04); }
  30% { transform: rotate(6deg) scale(1.05); }
  45% { transform: rotate(-5deg); }
  60% { transform: rotate(4deg); }
  75% { transform: rotate(-2deg); }
}
.panda-fab--wiggle { animation: panda-wiggle .9s ease; }
.panda-fab--wiggle .panda-fab__avatar::after { animation: panda-ping 0.9s ease; }
@keyframes panda-ping {
  0% { box-shadow: 0 0 0 0 rgba(0, 178, 45, .5); }
  100% { box-shadow: 0 0 0 12px rgba(0, 178, 45, 0); }
}

/* Проактивный пузырь-приветствие */
.panda-teaser {
  position: fixed;
  left: 20px;
  bottom: 88px;
  z-index: 9991;
  max-width: 280px;
  background: var(--bg-card, #fff);
  border: 1.5px solid rgba(0, 178, 45, .35);
  border-radius: 16px 16px 16px 4px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  padding: 14px 34px 14px 16px;
  font-size: .92rem;
  line-height: 1.45;
  color: var(--text-primary, #111827);
  cursor: pointer;
  animation: panda-teaser-in .35s ease;
  font-family: var(--font-body, 'DM Sans', sans-serif);
}
@keyframes panda-teaser-in {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to { opacity: 1; transform: none; }
}
.panda-teaser b { color: #00B22D; }
.panda-teaser__close {
  position: absolute;
  top: 6px; right: 6px;
  width: 24px; height: 24px;
  border: none; background: none;
  color: var(--text-tertiary, #9CA3AF);
  font-size: 16px; line-height: 1; cursor: pointer; border-radius: 6px;
}
.panda-teaser__close:hover { background: var(--bg-tertiary, #F3F4F6); color: var(--text-primary, #111827); }
@media (max-width: 640px) {
  .panda-teaser { max-width: calc(100vw - 90px); }
}

/* Фото в чате */
.panda-attach {
  width: 40px; height: 42px; flex-shrink: 0;
  border: none; background: none; cursor: pointer;
  color: var(--text-tertiary, #9CA3AF); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.panda-attach:hover { color: #00B22D; background: var(--accent-light, rgba(0,178,45,.08)); }
.panda-attach-preview {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-top: 1px solid var(--border, #E5E7EB);
  background: var(--accent-light, rgba(0,178,45,.06)); font-size: .8rem;
  color: var(--text-secondary, #4B5563);
}
.panda-attach-preview img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border, #E5E7EB); }
.panda-attach-preview__name { flex: 1; }
.panda-attach-preview__x { border: none; background: none; font-size: 18px; cursor: pointer; color: var(--text-tertiary, #9CA3AF); }
.panda-attach-preview[hidden] { display: none !important; }

.panda-chip--photo {
  background: #00B22D;
  color: #fff;
  border-color: #00B22D;
  font-weight: 700;
}
.panda-chip--photo:hover { background: #009626; }