/* =====================================================
   NeoMarket AI — "ЖИВОЙ" ЧАТ — Улучшения
   Подключить в index.html ПОСЛЕ web_app.css:
   <link rel="stylesheet" href="/web_alive.css">
   ===================================================== */

/* ── 1. FIX: Кнопки quick-reply теперь кликабельны на мобиле ── */
.ai-qr-btn {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  min-height: 36px !important;        /* достаточная зона касания */
  min-width: 44px !important;
}

.ai-chip {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  user-select: none !important;
  min-height: 32px !important;
}

/* ── 2. Сообщения появляются с анимацией ── */
@keyframes msgSlideIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes msgSlideInUser {
  from { opacity: 0; transform: translateX(12px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.ai-msg-wrap.bot  { animation: msgSlideIn 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) both; }
.ai-msg-wrap.user { animation: msgSlideInUser 0.18s cubic-bezier(0.34, 1.4, 0.64, 1) both; }

/* ── 3. Quick-reply кнопки появляются каскадом ── */
@keyframes qrFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ai-quick-replies { max-width: 100% !important; } /* раньше 86% — кнопки могли обрезаться */

.ai-qr-btn {
  animation: qrFadeUp 0.2s ease both;
  will-change: transform;
}
.ai-qr-btn:nth-child(1) { animation-delay: 0.05s; }
.ai-qr-btn:nth-child(2) { animation-delay: 0.10s; }
.ai-qr-btn:nth-child(3) { animation-delay: 0.15s; }

/* Активное состояние при нажатии */
.ai-qr-btn:active {
  transform: scale(0.94) !important;
  background: rgba(255, 215, 0, 0.22) !important;
  border-color: rgba(255, 215, 0, 0.55) !important;
}

/* ── 4. Пульсирующий зелёный огонёк «Онлайн» ── */
@keyframes statusPulse {
  0%, 100% { opacity: 1;   text-shadow: 0 0 0 rgba(34,197,94,0); }
  50%       { opacity: 0.6; text-shadow: 0 0 6px rgba(34,197,94,0.8); }
}
#ai-header-status {
  animation: statusPulse 2.5s ease-in-out infinite;
}

/* ── 5. Заголовок ИИ — живое свечение ── */
@keyframes headerGlow {
  0%, 100% { box-shadow: inset 0 -1px 0 rgba(255,215,0,0.08); }
  50%       { box-shadow: inset 0 -1px 0 rgba(255,215,0,0.22); }
}
#ai-header {
  animation: headerGlow 4s ease-in-out infinite;
}

/* ── 6. Кнопка FAB — более живая ── */
@keyframes fabFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}
#ai-fab:not(.panel-open) {
  animation: fabFloat 3.5s ease-in-out infinite !important;
}

/* ── 7. «Думает» — лучший индикатор набора ── */
.ai-msg.typing {
  background: rgba(255, 215, 0, 0.04) !important;
  border: 1px solid rgba(255, 215, 0, 0.12) !important;
}

@keyframes dotBounce {
  0%, 80%, 100% { transform: translateY(0);   opacity: 0.4; }
  40%            { transform: translateY(-6px); opacity: 1;   }
}
.ai-dots span {
  background: #FFD700 !important;
  animation: dotBounce 1.1s infinite ease-in-out;
}
.ai-dots span:nth-child(1) { animation-delay: 0s;    }
.ai-dots span:nth-child(2) { animation-delay: 0.18s; }
.ai-dots span:nth-child(3) { animation-delay: 0.36s; }

/* ── 8. Реакции на сообщения ── */
@keyframes reactionPop {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.3); }
  100% { transform: scale(1); opacity: 1; }
}

.ai-reaction-bar {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  padding-left: 2px;
  opacity: 0;
  transition: opacity 0.2s;
}
.ai-msg-wrap.bot:hover .ai-reaction-bar,
.ai-msg-wrap.bot:focus-within .ai-reaction-bar {
  opacity: 1;
}
/* На мобиле — всегда видна */
@media (hover: none) {
  .ai-reaction-bar { opacity: 1 !important; }
}

.ai-react-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 2px 7px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 3px;
  color: rgba(255,255,255,0.35);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}
.ai-react-btn:hover,
.ai-react-btn:active { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }
.ai-react-btn.active-up   { background: rgba(34,197,94,0.15);  border-color: rgba(34,197,94,0.35);  color: #4ade80; }
.ai-react-btn.active-down { background: rgba(239,68,68,0.12);  border-color: rgba(239,68,68,0.3);   color: #f87171; }
.ai-react-btn.active-up   .react-emoji,
.ai-react-btn.active-down .react-emoji { animation: reactionPop 0.3s ease; }

/* ── 9. Счётчик символов ── */
#ai-char-counter {
  font-size: 0.65rem;
  color: #7a7680;
  position: absolute;
  bottom: 14px;
  right: 52px;
  pointer-events: none;
  transition: color 0.2s;
}
#ai-char-counter.warn { color: #f59e0b; }
#ai-char-counter.over { color: #ef4444; }

/* ── 10. Подсветка первого сообщения (приветствие) ── */
.ai-msg-wrap.bot:first-child .ai-msg.bot {
  border-left: 2px solid rgba(255, 215, 0, 0.3);
}

/* ── 11. Сообщение с новой фишкой: «Проактивная подсказка» ── */
@keyframes proactivePeek {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ai-proactive-hint {
  animation: proactivePeek 0.3s ease both;
  border-left: 2px solid rgba(168, 85, 247, 0.5) !important;
  background: rgba(168, 85, 247, 0.06) !important;
}

/* ── 12. Чипы в #ai-quick появляются с задержкой ── */
@keyframes chipIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
.ai-chip {
  animation: chipIn 0.2s ease both;
}
#ai-quick .ai-chip:nth-child(1) { animation-delay: 0.02s; }
#ai-quick .ai-chip:nth-child(2) { animation-delay: 0.06s; }
#ai-quick .ai-chip:nth-child(3) { animation-delay: 0.10s; }
#ai-quick .ai-chip:nth-child(4) { animation-delay: 0.14s; }
#ai-quick .ai-chip:nth-child(5) { animation-delay: 0.18s; }
#ai-quick .ai-chip:nth-child(6) { animation-delay: 0.22s; }

/* ── 13. Кнопка копирования — более заметная ── */
.ai-copy-btn {
  opacity: 0;
}
.ai-msg-wrap:hover .ai-copy-btn,
.ai-msg-wrap:focus-within .ai-copy-btn {
  opacity: 1;
}
@media (hover: none) {
  .ai-copy-btn { opacity: 0.4 !important; }
  .ai-msg-wrap:active .ai-copy-btn { opacity: 1 !important; }
}

/* ── 14. Бейдж непрочитанных на FAB ── */
@keyframes badgePop {
  0%  { transform: scale(0); }
  70% { transform: scale(1.3); }
  100%{ transform: scale(1); }
}
#ai-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--c-bg, #0d1117);
  animation: badgePop 0.3s ease;
  pointer-events: none;
}
#ai-fab-badge.visible { display: flex; }

/* ── 15. Печатание — контекстная подсказка под инпутом ── */
@keyframes hintIn {
  from { opacity: 0; max-height: 0; }
  to   { opacity: 1; max-height: 30px; }
}
.ai-typing-hint {
  font-size: 0.68rem;
  color: #7a7680;
  padding: 0 14px 6px;
  overflow: hidden;
  animation: hintIn 0.2s ease;
}