/* Подарки Хэллоуина 2026: видны всем, кто встречает их в чатах
   (реакции, стикеры, карточка чата, статус), обои — только владельцу. */

/* ---------- Реакции ---------- */
.hw-react-img {
  display: inline-block;
  vertical-align: -4px;
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.react-chip .hw-react-img { margin-right: 1px; }
.react-picker-list .hw-react-sep {
  flex: 0 0 100%;
  height: 1px;
  margin: 2px 4px;
  background: linear-gradient(90deg, transparent, rgba(242, 113, 28, .55), transparent);
}
.react-pick.hw-react-pick { padding: 3px; line-height: 0; }
.react-pick.hw-react-pick .hw-react-img { width: 26px; height: 26px; vertical-align: 0; transition: transform .15s ease; }
.react-pick.hw-react-pick:hover .hw-react-img { transform: scale(1.18) translateY(-2px); }

/* ---------- Карточки чата (видят собеседники) ----------
   «Ночь со скелетом» — ночное небо, волна холмов, скелет с дудкой
   «Паутина» — серебряная паутина с паучком */
html .messenger-row .messenger-item.chat-card-hw,
html:not(.dark) .messenger-row .messenger-item.chat-card-hw,
html.dark .messenger-row .messenger-item.chat-card-hw,
html .messenger-row .messenger-item.chat-card-hw:hover,
html .messenger-row .messenger-item.chat-card-hw.active {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: #fde7d3 !important;
  position: relative;
  overflow: hidden;
}
html .messenger-row .messenger-item.chat-card-hw-night,
html:not(.dark) .messenger-row .messenger-item.chat-card-hw-night,
html.dark .messenger-row .messenger-item.chat-card-hw-night,
html .messenger-row .messenger-item.chat-card-hw-night:hover,
html .messenger-row .messenger-item.chat-card-hw-night.active,
.hw-card-preview.hw-cardbg-night {
  background: #1d0f2e url("art/card-night.svg?v=2") right center / cover no-repeat !important;
  border-color: rgba(242, 113, 28, .75) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 178, 122, .16), 0 0 22px rgba(242, 113, 28, .18) !important;
}
html .messenger-row .messenger-item.chat-card-hw-web,
html:not(.dark) .messenger-row .messenger-item.chat-card-hw-web,
html.dark .messenger-row .messenger-item.chat-card-hw-web,
html .messenger-row .messenger-item.chat-card-hw-web:hover,
html .messenger-row .messenger-item.chat-card-hw-web.active,
.hw-card-preview.hw-cardbg-web {
  background: #14111c url("art/card-web.svg?v=2") right center / cover no-repeat !important;
  border-color: rgba(201, 182, 232, .6) !important;
  box-shadow: inset 0 0 0 1px rgba(230, 224, 242, .12), 0 0 20px rgba(167, 139, 250, .16) !important;
}
html .messenger-row .messenger-item.chat-card-hw.active {
  box-shadow: inset 0 0 0 2px rgba(255, 178, 122, .6) !important;
}
html .messenger-row .messenger-item.chat-card-hw .messenger-item-name,
html .messenger-row .messenger-item.chat-card-hw .profile-display-name {
  color: #fff6ec !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
html .messenger-row .messenger-item.chat-card-hw .muted,
html .messenger-row .messenger-item.chat-card-hw .messenger-item-preview {
  color: rgba(253, 236, 220, .78) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
html .messenger-row .messenger-item.chat-card-hw-web .messenger-item-preview { color: rgba(236, 232, 246, .78) !important; }

/* Превью в «Сундуке подарков» */
.hw-card-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid transparent;
  color: #fff6ec;
}
.hw-card-preview-av {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #FFB27A;
  background: rgba(20, 10, 30, .75);
  box-shadow: 0 0 0 1px rgba(255, 178, 122, .35);
}
.hw-card-preview-text { display: flex; flex-direction: column; min-width: 0; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.hw-card-preview-text strong { font-size: .88rem; }
.hw-card-preview-text span { font-size: .74rem; opacity: .8; }

/* ---------- Статус «Охотник за багами» ---------- */
.profile-hw-status { margin: 6px 0 0; display: flex; justify-content: center; }
.hw-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  color: #9A3412;
  background: linear-gradient(135deg, #fff1e4, #ffe2c7);
  border: 1px solid #f6c39b;
  box-shadow: 0 4px 14px rgba(242, 113, 28, .18);
}
html.dark .hw-status {
  color: #FFC59A;
  background: linear-gradient(135deg, rgba(242, 113, 28, .2), rgba(124, 58, 237, .16));
  border-color: rgba(242, 113, 28, .45);
}
.hw-status-bug {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1b1030;
  overflow: hidden;
}
.hw-status-bug img { animation: hw-bug-walk 1.6s ease-in-out infinite; }
@keyframes hw-bug-walk {
  0%, 100% { transform: translate(-3px, 0) rotate(-8deg); }
  50% { transform: translate(3px, -1px) rotate(8deg); }
}

/* ---------- Обои «Помехи» и тема «Ведьмин котёл» (только у владельца) ---------- */
.messenger-chat.hw-wall { position: relative; }
.messenger-chat.hw-wall #msg-list,
.messenger-chat.hw-wall .messenger-msgs {
  background: transparent !important;
  position: relative;
  z-index: 1;
}
.hw-wall-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
/* Помехи */
.messenger-chat.hw-wall-static {
  background-color: #141218 !important;
  background-image: url("art/wall-static.svg") !important;
  background-size: 180px 180px !important;
  animation: hw-static-jitter .34s steps(3) infinite;
}
.hw-wall-fx-static::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 2px, transparent 2px 4px),
    radial-gradient(120% 80% at 50% 45%, transparent 40%, rgba(0, 0, 0, .7)),
    linear-gradient(90deg, rgba(255, 0, 60, .05), transparent 30%, transparent 70%, rgba(0, 200, 255, .05));
}
.hw-wall-fx-static::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 150px;
  background: linear-gradient(rgba(10, 9, 14, .85), rgba(10, 9, 14, 0));
}
.hw-wall-roll {
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(transparent, rgba(255, 255, 255, .07), transparent);
  animation: hw-static-roll 6s linear infinite;
}
.hw-wall-ghost {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 220px;
  height: 240px;
  transform: translate(-50%, -50%);
  background: url("art/ghost.svg") center / contain no-repeat;
  opacity: .08;
  filter: grayscale(1) blur(1px);
  animation: hw-ghost-flicker 5s steps(1) infinite;
}
@keyframes hw-static-jitter {
  0% { background-position: 0 0; }
  33% { background-position: -47px 31px; }
  66% { background-position: 29px -63px; }
  100% { background-position: 0 0; }
}
@keyframes hw-static-roll { from { top: -60px; } to { top: 100%; } }
@keyframes hw-ghost-flicker {
  0%, 100% { opacity: .07; }
  41% { opacity: .14; }
  43% { opacity: .03; }
  70% { opacity: .1; }
}
.messenger-chat.hw-wall-static .msg.other .bubble {
  background: rgba(24, 22, 30, .86) !important;
  border-color: rgba(255, 255, 255, .1) !important;
  color: #f1eef6 !important;
}
.messenger-chat.hw-wall-static .msg.mine .bubble {
  background: linear-gradient(160deg, #ece9f2, #b9b4c6) !important;
  border-color: rgba(255, 255, 255, .5) !important;
  color: #141118 !important;
}
.messenger-chat.hw-wall-static .msg.mine .bubble .msg-meta,
.messenger-chat.hw-wall-static .msg.mine .bubble .msg-act { color: #3a3446 !important; }

/* Ведьмин котёл */
.messenger-chat.hw-wall-cauldron {
  background: radial-gradient(120% 60% at 50% 110%, #2f6b1f 0, #173d16 32%, #120f1f 72%) !important;
}
.hw-wall-fx-cauldron i {
  position: absolute;
  bottom: -30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(220, 255, 170, .55), rgba(132, 204, 22, .15) 60%, transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(190, 242, 100, .25);
  animation: hw-bubble-up 7s linear infinite;
}
.hw-wall-fx-cauldron i:nth-child(2n) { animation-duration: 9s; }
.hw-wall-fx-cauldron i:nth-child(3n) { animation-duration: 11s; }
@keyframes hw-bubble-up {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translateY(-45vh) translateX(10px); }
  90% { opacity: .8; }
  100% { transform: translateY(-90vh) translateX(-6px); opacity: 0; }
}
.hw-wall-rim {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -70px;
  height: 140px;
  background:
    radial-gradient(50% 26% at 50% 34%, rgba(217, 249, 157, .35), transparent 70%),
    radial-gradient(50% 30% at 50% 36%, #a3e635, #3f6212 80%, transparent 82%);
  opacity: .75;
  filter: blur(.5px);
}
.messenger-chat.hw-wall-cauldron .msg.other .bubble {
  background: rgba(18, 30, 18, .84) !important;
  border-color: rgba(163, 230, 53, .22) !important;
  color: #f2fbe6 !important;
}
.messenger-chat.hw-wall-cauldron .msg.mine .bubble {
  background: linear-gradient(160deg, #84cc16, #3f6212) !important;
  border-color: rgba(217, 249, 157, .5) !important;
  color: #fbfff0 !important;
  box-shadow: 0 0 18px rgba(132, 204, 22, .25) !important;
}
.messenger-chat.hw-wall-cauldron .composer-send,
.messenger-chat.hw-wall-cauldron .chat-chip-send {
  background: linear-gradient(160deg, #a3e635, #4d7c0f) !important;
  border-color: transparent !important;
}
.messenger-chat.hw-wall-cauldron .react-chip.mine { border-color: #a3e635 !important; }

/* Меню выбора хэллоуин-обоев */
.hw-wall-menu summary img { vertical-align: -3px; }
.hw-wall-opts { display: grid; gap: 6px; padding: 6px 4px 4px; }
.hw-wall-opts form { margin: 0; }
.hw-wall-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid var(--klyro-border, rgba(255, 255, 255, .1));
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  text-align: left;
}
.hw-wall-opt.is-on { border-color: #F2711C; box-shadow: 0 0 0 1px #F2711C inset; }
.hw-wall-swatch {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex: none;
  background: var(--klyro-surface, #222);
  border: 1px solid rgba(255, 255, 255, .12);
}
.hw-wall-swatch-static { background: #141218 url("art/wall-static.svg") 0 0 / 60px 60px; }
.hw-wall-swatch-cauldron { background: radial-gradient(120% 70% at 50% 120%, #84cc16, #173d16 50%, #120f1f); }
.hw-wall-note { font-size: .75rem; opacity: .6; margin: 2px 4px 0; line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
  .messenger-chat.hw-wall-static, .hw-wall-roll, .hw-wall-ghost, .hw-wall-fx-cauldron i,
  .hw-status-bug img { animation: none !important; }
}