/* ==== Гид Vast Sale («Джарвис»), этап 1 ====================================
   Шар-ядро (видео jarvis.mp4, пинг-понг луп на чёрном фоне) + панель чата.
   Видео вживлено через mix-blend-mode:screen поверх тёмного диска — чёрный
   фон кадра исчезает, остаётся свечение. Панель всегда тёмная (намеренно,
   в обеих темах): это «голограмма», ей положено жить в темноте.
   Состояния шара — классы на #jvOrb: jv-think / jv-speak / jv-error.      */

#jvOrb{
  position:fixed; right:20px; bottom:20px; z-index:9998;
  width:120px; height:120px; border-radius:50%;
  padding:0; cursor:pointer; overflow:visible;
  background:none; border:none; box-shadow:none;
  /* ореол по форме облака (follow alpha), а не круг */
  filter:drop-shadow(0 0 14px rgba(255,150,60,.35));   /* огненный ореол под глобус */
  transition:filter .35s, transform .25s;
}
#jvOrb:hover{ filter:drop-shadow(0 0 22px rgba(255,160,60,.55)); transform:scale(1.05) }
#jvOrb video, #jvOrb img.jv-poster{
  width:100%; height:100%; display:block; object-fit:cover;
  pointer-events:none;
  filter:brightness(.92);
  transition:filter .35s, transform .35s;
}
/* fallback для браузеров без vp9-alpha (iOS/Safari): прежний тёмный диск,
   класс jv-disc ставит скрипт, когда загрузился mp4 вместо webm */
#jvOrb.jv-disc{
  overflow:hidden;
  background:radial-gradient(circle at 50% 40%, #16171b 0%, #0a0b0d 62%, #050607 100%);
  border:1px solid rgba(242,170,78,.4);
  box-shadow:0 6px 28px rgba(0,0,0,.5), 0 0 34px rgba(230,140,40,.25);
  filter:none;
}
#jvOrb.jv-disc video{ mix-blend-mode:screen }
/* думает: быстрее (playbackRate из JS) и ярче */
#jvOrb.jv-think video{ filter:brightness(1.18); transform:scale(1.06) }
/* говорит: пульс (точный пульс под звук придёт на этапе 2 с серверным TTS) */
#jvOrb.jv-speak video{ animation:jvPulse .9s ease-in-out infinite }
@keyframes jvPulse{
  0%,100%{ filter:brightness(.95); transform:scale(1) }
  50%    { filter:brightness(1.3); transform:scale(1.07) }
}
/* ошибка: ядро краснеет + вздрог кнопки */
#jvOrb.jv-error video{ filter:brightness(1.05) sepia(1) saturate(5) hue-rotate(-32deg) }
#jvOrb.jv-error{ animation:jvShake .4s; filter:drop-shadow(0 0 18px rgba(255,80,80,.5)) }
#jvOrb.jv-disc.jv-error{ filter:none; border-color:rgba(255,92,92,.55);
  box-shadow:0 6px 28px rgba(0,0,0,.5), 0 0 40px rgba(255,70,70,.35) }
@keyframes jvShake{
  0%,100%{ transform:translateX(0) }
  20%{ transform:translateX(-4px) } 40%{ transform:translateX(4px) }
  60%{ transform:translateX(-3px) } 80%{ transform:translateX(3px) }
}

/* ---- панель ---- */
#jvPanel{
  position:fixed; right:22px; bottom:152px; z-index:9999;
  width:min(380px, calc(100vw - 32px));
  height:min(540px, calc(100vh - 150px));
  display:none; flex-direction:column; overflow:hidden;
  background:#0e0f12f2; backdrop-filter:blur(8px);
  border:1px solid rgba(242,193,78,.22); border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  color:#e8eaed;
  font:400 14px/1.5 "Golos Text", system-ui, sans-serif;
}
#jvPanel.jv-open{ display:flex }
.jv-head{
  display:flex; align-items:center; gap:10px;
  padding:13px 14px; border-bottom:1px solid rgba(242,193,78,.14);
}
.jv-head b{ font-weight:600; color:#f2f3f5 }
.jv-head .jv-sub{ font-size:11.5px; color:#9aa0a8; margin-top:1px }
.jv-head button{
  margin-left:auto; background:none; border:1px solid rgba(255,255,255,.14);
  color:#c6cad0; border-radius:9px; padding:5px 9px; cursor:pointer; font-size:12px;
}
.jv-head button + button{ margin-left:8px }
.jv-head button:hover{ border-color:rgba(242,193,78,.5); color:#f2c14e }
.jv-head button.jv-on{ border-color:rgba(242,193,78,.55); color:#f2c14e }

.jv-msgs{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px }
.jv-m{ max-width:86%; padding:9px 12px; border-radius:13px; white-space:pre-line }
.jv-m a{ color:#f2c14e; text-decoration:underline; text-underline-offset:2px }
.jv-bot{ align-self:flex-start; background:#17181d; border:1px solid rgba(255,255,255,.07);
  border-bottom-left-radius:5px }
.jv-user{ align-self:flex-end; background:rgba(224,167,42,.16);
  border:1px solid rgba(242,193,78,.25); border-bottom-right-radius:5px }
.jv-err{ border-color:rgba(255,92,92,.4); background:rgba(120,30,30,.18) }

.jv-chips{ display:flex; flex-wrap:wrap; gap:7px; padding:0 14px 10px }
.jv-chips button{
  background:none; border:1px solid rgba(242,193,78,.3); color:#d9b65c;
  border-radius:999px; padding:5px 11px; font-size:12px; cursor:pointer;
}
.jv-chips button:hover{ background:rgba(224,167,42,.12); color:#f2c14e }

.jv-form{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid rgba(242,193,78,.14) }
.jv-form input{
  flex:1; background:#121318; color:#eceef0;
  border:1px solid rgba(255,255,255,.12); border-radius:11px; padding:10px 12px;
  font:inherit; outline:none;
}
.jv-form input:focus{ border-color:rgba(242,193,78,.5) }
.jv-form button{
  background:#e0a72a; color:#141414; border:none; border-radius:11px;
  padding:10px 15px; font:600 13px "Golos Text", sans-serif; cursor:pointer;
}
.jv-form button:hover{ background:#f2c14e }

@media (max-width:640px){
  #jvOrb{ width:88px; height:88px; right:12px; bottom:12px }
  #jvPanel{ right:10px; left:10px; width:auto; bottom:108px; height:min(480px, calc(100vh - 120px)) }
}
@media (prefers-reduced-motion:reduce){
  #jvOrb.jv-speak video{ animation:none; filter:brightness(1.15) }
  #jvOrb.jv-error{ animation:none }
}