/* ============================================================
   ВАЛЕРА · ОЖИВШИЙ АВАТАР · КОМИКС-ПУЗЫРЬ (speech bubble)
   Появляется только при body.valera-chaos (видимость рулит JS через .show).
   Стиль нулевых: выпуклая рамка, кислотный градиент, Comic Sans,
   толстый text-shadow, «хвостик», анимация «поп».
   Позиция: снизу-слева, над safe-area, max-width 70%, z-index 45 (< toast=50).
   pointer-events:none на контейнере — контент кликабелен; кликабелен сам пузырь.
   ============================================================ */

.valera-quip {
  position: fixed;
  left: 14px;
  bottom: calc(74px + var(--safe-b, 0px));
  z-index: 45;                 /* ниже toast(50), поверх HUD/контента */
  max-width: 70%;
  padding: 12px 16px;
  /* выпуклая рамка нулевых */
  border: 4px outset #ffee00;
  border-color: #aaff00 #00e5ff #cc00ff #ffee00;
  border-radius: 14px;
  /* кислотный фон-градиент */
  background: linear-gradient(135deg, #ff00ff 0%, #aaff00 50%, #00e5ff 100%);
  box-shadow: 4px 4px 0 #cc00ff, inset 2px 2px 0 #fff, 0 0 22px rgba(170, 255, 0, .45);
  /* Comic Sans / cursive */
  font-family: 'Comic Sans MS', 'Marker Felt', 'Chalkboard SE', cursive;
  font-style: italic;
  font-weight: bold;
  font-size: 15px;
  line-height: 1.25;
  color: #3a006b;
  text-shadow: 1px 1px 0 #fff, 2px 2px 0 #ffee00, 0 0 8px rgba(255, 255, 255, .6);
  /* по умолчанию скрыт — JS включает .show */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.92) rotate(-2deg);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events: none;       /* контейнер не ловит клики контента под ним */
}

.valera-quip.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1) rotate(-2deg);
  pointer-events: auto;       /* сам пузырь кликабелен → следующая реплика */
  cursor: pointer;
}

.valera-quip__text {
  display: block;
  word-break: break-word;
}

/* «хвостик» пузыря — border-трюк, смотрит вниз-влево «к персонажу» */
.valera-quip__tail {
  position: absolute;
  left: 22px;
  bottom: -16px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 18px solid #aaff00;
  filter: drop-shadow(2px 3px 0 #cc00ff);
}

/* анимация «поп» — джанк-скачок при каждой новой реплике */
@keyframes valera-quip-pop {
  0%   { transform: translateY(0) scale(.78) rotate(-2deg); }
  45%  { transform: translateY(-4px) scale(1.12) rotate(2deg); }
  70%  { transform: translateY(0) scale(.96) rotate(-3deg); }
  100% { transform: translateY(0) scale(1) rotate(-2deg); }
}
.valera-quip.pop {
  animation: valera-quip-pop .5s cubic-bezier(.18, .89, .32, 1.28);
}

/* ============================================================
   prefers-reduced-motion: без тряски/прыжков — только плавная смена.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .valera-quip {
    transform: none !important;
    transition: opacity .2s ease, visibility .2s !important;
  }
  .valera-quip.show {
    transform: none !important;
  }
  .valera-quip.pop {
    animation: none !important;
  }
}