/* «Злой режим» AI-тьютора — визуальная оболочка (ТЗ Степана, блок Evil Mode).
   Тёмный скин НАМЕРЕННО ограничен интерфейсом ИИ: чат-панель тьютора и
   голосовой оверлей. Кабинет вокруг остаётся светлым — это исключение из
   общего правила «только светлая тема», а не смена темы платформы.

   Механика: панель и оверлей сверстаны на переменных (--surface, --text,
   --border, --accent…), поэтому весь скин — это переопределение токенов на
   двух контейнерах. Снятие класса с body возвращает всё как было. */

:root {
  --evil-accent: #e2452a;         /* красно-оранжевый вместо зелёного */
  --evil-accent-hot: #ff7a29;
  --evil-accent-deep: #b91c1c;
  --evil-accent-soft: rgba(226, 69, 42, 0.16);
  --evil-bg: #0b0c0e;             /* почти чёрный */
  --evil-surface: #17191d;        /* тёмно-серые элементы */
  --evil-surface-2: #212429;
  --evil-text: #f3f4f6;
  --evil-text-dim: #a1a1aa;
  --evil-border: rgba(255, 255, 255, 0.12);
}

/* ── Кнопка режима в шапке чат-панели ── */
#cabinetTutorEvilMode {
  font-size: 15px;
  line-height: 1;
  filter: grayscale(1);
  opacity: 0.55;
}
#cabinetTutorEvilMode:hover {
  filter: grayscale(0.2);
  opacity: 1;
  background: var(--evil-accent-soft);
}
#cabinetTutorEvilMode.is-on {
  filter: none;
  opacity: 1;
  background: var(--evil-accent-soft);
  box-shadow: inset 0 0 0 1px rgba(226, 69, 42, 0.5);
}

/* ── Тёмный скин: только панель ИИ и голосовой оверлей ── */
body.evil-mode-on .rag-panel,
body.evil-mode-on .voice-mode-overlay {
  --bg: var(--evil-bg);
  --surface: var(--evil-surface);
  --text: var(--evil-text);
  --text-secondary: var(--evil-text-dim);
  --border: var(--evil-border);
  --accent: var(--evil-accent);
  --accent-hover: var(--evil-accent-deep);
  --accent-soft: var(--evil-accent-soft);
  --circle-track: rgba(255, 255, 255, 0.08);
}

body.evil-mode-on .rag-panel {
  background: var(--evil-bg);
  color: var(--evil-text);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.55), inset 0 2px 0 0 var(--evil-accent);
}
body.evil-mode-on .rag-panel-header { color: var(--evil-text); }
body.evil-mode-on .rag-panel-subheader::after {
  content: ' · EVIL MODE';
  color: var(--evil-accent-hot);
  font-weight: 700;
  letter-spacing: 0.04em;
}
body.evil-mode-on .rag-chat-input-wrap,
body.evil-mode-on .rag-chat-input-wrap textarea,
body.evil-mode-on .rag-chat-mic,
body.evil-mode-on .rag-chat-attach,
body.evil-mode-on .rag-chat-mode,
body.evil-mode-on .rag-chat-stop,
body.evil-mode-on .rag-scroll-to-bottom {
  background: var(--evil-surface);
  color: var(--evil-text);
}
body.evil-mode-on .rag-chat-input-wrap textarea::placeholder { color: #6b7280; }
/* Пузыри: у AI — тёмно-серый, у пользователя — красноватая подложка. */
body.evil-mode-on .rag-msg-bubble { border-color: rgba(255, 255, 255, 0.08); }
body.evil-mode-on .rag-msg-ai .rag-msg-bubble { background: var(--evil-surface); }
body.evil-mode-on .rag-msg-user .rag-msg-bubble {
  background: rgba(226, 69, 42, 0.18);
  border-color: rgba(226, 69, 42, 0.45);
  color: var(--evil-text);
}
/* Виджеты и карточки внутри чата свёрстаны на белом — гасим подложку,
   иначе посреди чёрной панели висят белые прямоугольники. */
body.evil-mode-on .rag-msg-bubble [style*="background: #fff"],
body.evil-mode-on .rag-msg-bubble [style*="background:#fff"],
body.evil-mode-on .rag-panel .ai-chat-answer pre,
body.evil-mode-on .rag-panel .ai-chat-answer code,
body.evil-mode-on .rag-panel .ai-chat-answer table,
body.evil-mode-on .rag-panel .ai-chat-answer th,
body.evil-mode-on .rag-panel .ai-chat-answer td {
  background: var(--evil-surface-2) !important;
  color: var(--evil-text) !important;
  border-color: var(--evil-border) !important;
}
body.evil-mode-on .rag-panel a { color: var(--evil-accent-hot); }

/* Служебная строка о переключении в ленте сообщений */
.evil-mode-note {
  margin: 10px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--evil-accent);
  background: var(--evil-accent-soft);
  border-radius: 0 8px 8px 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* ── Анимация перехода + «EVIL MODE ON» ── */
body.evil-mode-on .rag-panel.evil-igniting { animation: evil-panel-ignite 0.5s ease; }
@keyframes evil-panel-ignite {
  0%   { filter: brightness(2.2) saturate(0); }
  35%  { filter: brightness(0.5) saturate(1.6); }
  100% { filter: none; }
}
.evil-flash {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  /* Непрозрачная подложка: сквозь полупрозрачную читался текст чата и
     заставка выглядела как артефакт, а не как переход. */
  background: radial-gradient(circle at 50% 45%, rgba(226, 69, 42, 0.32), rgba(8, 8, 10, 0.97) 60%), #0b0c0e;
  animation: evil-flash-out 1.7s ease forwards;
  pointer-events: none;
}
.evil-flash-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #ff8a3d;
  text-shadow: 0 0 18px rgba(226, 69, 42, 0.8);
  animation: evil-flash-kick 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.evil-flash-sub {
  font-size: 0.875rem;
  color: #e5e7eb;
  opacity: 0.9;
}
@keyframes evil-flash-kick {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes evil-flash-out {
  0%, 62% { opacity: 1; }
  100%    { opacity: 0; }
}

/* ── Чат-остров (то, что реально видят студенты с 11.08) ──
   Остров живёт на своих токенах (--color-*), поэтому скин — это их
   переопределение на самой панели. Правила НЕслоёные: у Tailwind утилиты
   лежат в @layer utilities и проигрывают по каскаду, что нам и нужно. */
.v1-tutor-panel.v1-evil {
  --color-ink: var(--evil-text);
  --color-ink-soft: var(--evil-text-dim);
  --color-line: var(--evil-border);
  --color-surface: var(--evil-surface);
  --color-canvas: var(--evil-bg);
  --color-accent: var(--evil-accent);
  --color-accent-soft: var(--evil-accent-soft);
  background: var(--evil-bg);
  color: var(--evil-text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), inset 0 2px 0 0 var(--evil-accent);
}
.v1-tutor-panel.v1-evil .v1-msg-ai {
  background: var(--evil-surface) !important;
  color: var(--evil-text);
}
.v1-tutor-panel.v1-evil .v1-msg-user {
  background: var(--evil-accent) !important;
  color: #fff;
}
.v1-tutor-panel.v1-evil textarea::placeholder { color: #6b7280; }
.v1-tutor-panel.v1-evil a { color: var(--evil-accent-hot); }
.v1-tutor-panel.v1-evil pre,
.v1-tutor-panel.v1-evil code,
.v1-tutor-panel.v1-evil table,
.v1-tutor-panel.v1-evil th,
.v1-tutor-panel.v1-evil td {
  background: var(--evil-surface-2) !important;
  color: var(--evil-text) !important;
  border-color: var(--evil-border) !important;
}
.v1-tutor-panel.v1-evil .v1-evil-toggle {
  background: var(--evil-accent-soft);
  box-shadow: inset 0 0 0 1px rgba(226, 69, 42, 0.5);
}
.v1-tutor-panel.v1-evil-igniting { animation: evil-panel-ignite 0.5s ease; }

/* ── Голосовой оверлей ── */
body.evil-mode-on .voice-mode-panel {
  background: var(--evil-bg);
  color: var(--evil-text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 1px var(--evil-border);
}
body.evil-mode-on .voice-mode-panel::before {
  content: '🔥 EVIL MODE';
  align-self: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(226, 69, 42, 0.18);
  color: #ff8a3d;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
body.evil-mode-on .voice-mode-status,
body.evil-mode-on .voice-mode-line { color: var(--evil-text-dim); }
body.evil-mode-on .voice-mode-voice-toggle,
body.evil-mode-on .voice-mode-voice-chip,
body.evil-mode-on .voice-mode-voice-picker,
body.evil-mode-on .voice-mode-widget,
body.evil-mode-on .voice-mode-transcript,
body.evil-mode-on .voice-mode-btn-secondary {
  background: var(--evil-surface);
  color: var(--evil-text);
  border-color: var(--evil-border);
}
body.evil-mode-on .voice-mode-voice-chip.is-active {
  background: var(--evil-accent);
  color: #fff;
  border-color: var(--evil-accent);
}

/* ── Центральный элемент: мультяшное пламя вместо зелёного круга ── */
.evil-flame { display: none; }
body.evil-mode-on .voice-mode-orb-core,
body.evil-mode-on .voice-mode-orb-pulse { display: none; }
body.evil-mode-on .evil-flame {
  display: block;
  width: 78px;
  height: 100px;
  transform-origin: 50% 100%;
  animation: evil-flame-idle 1.9s ease-in-out infinite;
  filter: drop-shadow(0 0 16px rgba(226, 69, 42, 0.55))
          drop-shadow(0 0 34px rgba(255, 122, 41, 0.28));
}
.evil-flame svg { width: 100%; height: 100%; display: block; overflow: visible; }
.evil-flame-outer { fill: var(--evil-accent); }
.evil-flame-mid { fill: var(--evil-accent-hot); }
.evil-flame-core {
  fill: #ffd166;
  transform-origin: 50% 100%;
  animation: evil-flame-core 1.3s ease-in-out infinite;
}
/* Ожидание — спокойное пламя, лёгкое дыхание. */
@keyframes evil-flame-idle {
  0%, 100% { transform: scale(1, 1) skewX(0deg); }
  25%      { transform: scale(0.97, 1.04) skewX(1.5deg); }
  50%      { transform: scale(1.02, 0.98) skewX(0deg); }
  75%      { transform: scale(0.98, 1.03) skewX(-1.5deg); }
}
@keyframes evil-flame-core {
  0%, 100% { transform: scaleY(1); opacity: 0.95; }
  50%      { transform: scaleY(0.86); opacity: 1; }
}
/* ИИ формирует ответ — больше и активнее; по .stopped возвращается само. */
body.evil-mode-on .voice-mode-orb.is-speaking .evil-flame {
  animation-duration: 0.62s;
  transform: scale(1.16);
  filter: drop-shadow(0 0 22px rgba(226, 69, 42, 0.75))
          drop-shadow(0 0 46px rgba(255, 122, 41, 0.4));
}
body.evil-mode-on .voice-mode-orb.is-speaking .evil-flame-core { animation-duration: 0.44s; }
@media (prefers-reduced-motion: reduce) {
  .evil-flame, .evil-flame-core, .evil-flash, .evil-flash-title { animation: none !important; }
}