/* AIRo Daily Mission System — стили (попап «честный прогресс» + glow на FAB + locked-state) */

/* ──────────── Honesty popup на media-food-battle.html ──────────── */

.airo-mission-honesty-modal {
  position: fixed;
  inset: 0;
  z-index: 24000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
    max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.airo-mission-honesty-modal[hidden] {
  display: none !important;
}

.airo-mission-honesty-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.airo-mission-honesty-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 14, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto;
}

.airo-mission-honesty-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(440px, calc(100vw - 28px));
  box-sizing: border-box;
  color: #f1f5f9;
  /* Premium clean futurism: darker edges + center cyan/purple soft glow. */
  background:
    radial-gradient(circle at 50% 28%, hsla(199, 92%, 65%, 0.22), transparent 58%),
    radial-gradient(circle at 50% 78%, hsla(249, 85%, 62%, 0.16), transparent 62%),
    radial-gradient(circle at 8% 8%, rgba(2, 6, 14, 0.85), transparent 55%),
    radial-gradient(circle at 92% 92%, rgba(2, 6, 14, 0.85), transparent 55%),
    rgba(7, 12, 24, 0.8);
  border: 1px solid rgba(158, 255, 255, 0.22);
  border-radius: 0;
  /* 3D convex frame:
   *   inset highlight  — верх/лево (свет);
   *   inset shadow     — низ/право (тень);
   *   outer cyan ring  — тонкая неоновая обводка;
   *   outer drop       — мягкая тень + лёгкое cyan-сияние снизу. */
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.22),
    inset 2px 2px 10px rgba(255, 255, 255, 0.06),
    inset -1px -1px 0 rgba(0, 0, 0, 0.55),
    inset -2px -2px 14px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(56, 189, 248, 0.18),
    0 24px 70px rgba(0, 0, 0, 0.85),
    0 8px 24px rgba(56, 189, 248, 0.14);
  padding: clamp(20px, 4.5vw, 30px);
  font-family: Roboto, system-ui, sans-serif;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

/* Top & bottom bevel-lines — усиление 3D-эффекта рамки. */
.airo-mission-honesty-modal__dialog::before,
.airo-mission-honesty-modal__dialog::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
}

.airo-mission-honesty-modal__dialog::before {
  top: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    rgba(158, 255, 255, 0.45),
    rgba(255, 255, 255, 0.35),
    transparent
  );
}

.airo-mission-honesty-modal__dialog::after {
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.6),
    transparent
  );
}

/* Крестик: subtle, thinner, less padding. */
.airo-mission-honesty-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 0;
  background: rgba(2, 6, 14, 0.45);
  color: rgba(224, 242, 254, 0.78);
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease,
    box-shadow 0.15s ease;
}

.airo-mission-honesty-modal__close:hover {
  border-color: rgba(158, 255, 255, 0.6);
  color: #e0f7ff;
  background: rgba(2, 6, 14, 0.55);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.35);
}

.airo-mission-honesty-modal__close svg {
  width: 10px;
  height: 10px;
}

/* Body: воздух между блоками. */
.airo-mission-honesty-modal__body {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding-top: 4px;
}

/* Intro-абзацы (АэроЭнергия — это честный прогресс / Старайся...). */
.airo-mission-honesty-modal__intro {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.airo-mission-honesty-modal__text {
  margin: 0;
  font-size: clamp(0.92rem, 2.2vw, 1rem);
  line-height: 1.55;
  color: #f1f5f9;
}

/* AIRoEnergy / AIRoЭнергия — cyan neon. Регистр сохраняется (нет text-transform).
 * Делим на две части:
 *   __neon-strong («AIRo») — жирно, как у «AIRo Missions».
 *   __neon-soft   («Энергия» / «Energy») — обычный вес,
 *      чтобы кириллица не размывалась под cyan-glow. */
.airo-mission-honesty-modal__neon {
  display: inline;
  font-family: 'Orbitron', 'Russo One', 'Syne', system-ui, sans-serif;
  color: #c7faff;
  text-shadow:
    0 0 3px rgba(158, 255, 255, 0.45),
    0 0 8px rgba(56, 189, 248, 0.22);
}

.airo-mission-honesty-modal__neon-strong {
  display: inline;
  font-family: inherit;
  color: inherit;
  text-shadow: inherit;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.airo-mission-honesty-modal__neon-soft {
  display: inline;
  font-family: inherit;
  color: inherit;
  text-shadow: inherit;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ──────────── Reminder block — «Аллах, Субханаху уа Та'аля...» ────────────
 * Отдельный futuristic glass block:
 *   - subtle neon border;
 *   - лёгкий inner glow;
 *   - premium AIRoWorld style, НЕ яркий;
 *   - НЕ full width, аккуратный padding;
 *   - ощущение важного AI reminder.
 */
.airo-mission-honesty-modal__reminder {
  position: relative;
  align-self: center;
  max-width: min(92%, 360px);
  margin: 0.15rem 0 0.1rem;
  padding: 14px 20px;
  font-family: 'Inter', 'Poppins', Roboto, system-ui, sans-serif;
  font-size: clamp(0.88rem, 2.1vw, 0.96rem);
  line-height: 1.55;
  font-style: normal;
  letter-spacing: 0.01em;
  text-align: center;
  color: #0e1312;
  /* Градиент как у кнопки «Закладка» (hover), но первая остановка ушла
   * за рамку (-15%), а средний оттенок поднят к 30% — левый верхний угол
   * больше не «выбивается» светлым пятном. */
  background: linear-gradient(152deg, #a3c4ba -15%, #7aa89c 30%, #456c64 100%);
  border: 1px solid rgba(24, 40, 36, 0.45);
  border-radius: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: default;
  user-select: none;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

/* hover — лёгкое неоновое свечение по периметру; заливка не меняется. */
.airo-mission-honesty-modal__reminder:hover,
.airo-mission-honesty-modal__reminder:focus,
.airo-mission-honesty-modal__reminder:active {
  background: linear-gradient(152deg, #a3c4ba -15%, #7aa89c 30%, #456c64 100%);
  color: #0e1312;
  border-color: rgba(0, 229, 200, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(0, 229, 200, 0.18),
    0 0 12px rgba(0, 229, 200, 0.22),
    0 0 22px rgba(56, 189, 248, 0.14);
}

/* ──────────── Footer — bullet-строки внизу попапа ──────────── */
.airo-mission-honesty-modal__footer {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.airo-mission-honesty-modal__footer-item {
  position: relative;
  padding-left: 14px;
  font-family: 'Inter', 'Poppins', Roboto, system-ui, sans-serif;
  font-size: clamp(0.74rem, 1.8vw, 0.8rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: rgba(241, 245, 249, 0.62);
}

.airo-mission-honesty-modal__footer-item::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(158, 255, 255, 0.55);
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.35);
}

/* «24 часа» — того же цвета, что и строчка; только жирнее.
 *   - НЕ выделять цветом;
 *   - НЕ glow / НЕ stroke;
 *   - только акцент через font-weight. */
.airo-mission-honesty-modal__hours {
  display: inline;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: inherit;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

/* «AIRo Missions» — cyan neon, subtle underline glow. */
.airo-mission-honesty-modal__chat-link {
  display: inline;
  font-family: 'Orbitron', 'Russo One', 'Syne', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #c7faff;
  border-bottom: 1px solid rgba(158, 255, 255, 0.4);
  padding-bottom: 1px;
  text-shadow:
    0 0 6px rgba(158, 255, 255, 0.7),
    0 0 14px rgba(56, 189, 248, 0.45);
}

@media (max-width: 380px) {
  .airo-mission-honesty-modal__reminder {
    padding: 12px 16px;
  }
  .airo-mission-honesty-modal__footer-item {
    font-size: 0.7rem;
  }
}

/* ──────────── Lock-state кнопок миссий на 24ч ──────────── */

.media-watch-mini-mission-modal .mm-layout--desktop .menu > button.item.is-locked,
.media-watch-mini-mission-modal .mm-scene--mobile .menu > button.item.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.35);
}

.media-watch-mini-mission-modal .mm-layout--desktop .menu > button.item.is-locked-active,
.media-watch-mini-mission-modal .mm-scene--mobile .menu > button.item.is-locked-active {
  opacity: 1;
  filter: none;
  color: #010818;
  background: #9effff;
  box-shadow: 0 0 22px rgba(158, 255, 255, 0.45);
  cursor: not-allowed;
}

.media-watch-mini-mission-modal .mm-card-slot > .mm-accept-btn.is-locked {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.7;
}

/* ──────────── Notification-state кнопки AIRo Missions (pending) ──────────── */
/*
 * Когда приходит AI-message:
 *   — НЕ меняем geometry / padding / size кнопки;
 *   — НЕ запускаем aggressive animation;
 *   — ВКЛЮЧАЕМ существующий hover-look кнопки как notification state
 *     (existing background gradient уже бежит; включаем blurred glow ::after,
 *     который обычно проявляется только при :hover, и немного усиливаем
 *     темп существующих анимаций — НЕ ускоряя их так, чтобы стало нервно).
 *   — ДОБАВЛЯЕМ subtle cyan halo вокруг кнопки.
 */

.airo-mission-fab.is-pending-mission {
  z-index: 22001;
  /* существующий background-shift был 8s linear infinite —
   * чуть «оживляем» в pending-state, но всё ещё спокойно. */
  animation-duration: 6s;
  box-shadow:
    0 0 14px hsla(199, 90%, 65%, 0.55),
    0 0 32px hsla(199, 90%, 55%, 0.3);
}

/* Mirror hover: тот же ::after, что показывается на :hover, видим всегда
 * пока pending. Не дублируем animation/blur — реализация уже в airo-mission-fab.css. */
.airo-mission-fab.is-pending-mission::after {
  opacity: 1;
  animation-duration: 5.5s;
}

/* Дополнительный cyan halo вокруг кнопки — мягкий, медленный pulse. */
.airo-mission-fab.is-pending-mission::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 12px;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 50%,
    hsla(199, 95%, 70%, 0.28) 0%,
    hsla(199, 95%, 60%, 0.12) 45%,
    transparent 75%
  );
  filter: blur(6px);
  animation: airo-mission-fab-pulse 2.6s ease-in-out infinite;
  z-index: -1;
  opacity: 0.85;
}

@keyframes airo-mission-fab-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.04);
  }
}

/* ──────────── Notification icon над кнопкой ──────────── */
/*
 * Маленький glowing square icon (placeholder с emoji-миссией) над FAB.
 * Не перекрывает кнопку: позиционируется fixed выше неё на gap = 12px.
 * Своя анимация: gentle pulse glow + soft float. Не aggressive.
 * Полностью независим от existing button geometry.
 * Иконки тестовые — заменяются вручную через CSS-переменную
 * `--airo-mission-fab-icon-emoji` или текстом внутри элемента.
 */

.airo-mission-fab-notif-icon {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 56px);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  border: 1px solid rgba(158, 255, 255, 0.45);
  background:
    radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.45), rgba(99, 102, 241, 0.08) 60%),
    rgba(2, 6, 14, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.45),
    0 0 12px hsla(199, 95%, 60%, 0.32);
  border-radius: 0;
  z-index: 22002;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  /* Двойная subtle анимация: лёгкий float (вертикальное движение) +
   * мягкий glow pulse. Длинные periods → ощущение «спокойной» иконки. */
  animation:
    airo-mission-fab-icon-float 4.5s ease-in-out infinite,
    airo-mission-fab-icon-pulse 3.2s ease-in-out infinite;
}

.airo-mission-fab-notif-icon__emoji {
  filter: drop-shadow(0 0 6px hsla(199, 95%, 70%, 0.55));
}

@keyframes airo-mission-fab-icon-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@keyframes airo-mission-fab-icon-pulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 4px 14px rgba(0, 0, 0, 0.45),
      0 0 12px hsla(199, 95%, 60%, 0.32);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      0 6px 18px rgba(0, 0, 0, 0.5),
      0 0 22px hsla(199, 95%, 65%, 0.6);
  }
}

@media (max-width: 600px) {
  .airo-mission-fab-notif-icon {
    right: max(0.85rem, env(safe-area-inset-right));
    bottom: calc(max(0.85rem, env(safe-area-inset-bottom)) + 50px);
    width: 30px;
    height: 30px;
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .airo-mission-fab.is-pending-mission::before,
  .airo-mission-fab-notif-icon {
    animation: none;
  }
}

/* ──────────── AI Mission Card в чате AIRo Missions ──────────── */
/*
 * Используется как замена обычного AI-bubble, когда чат отображает
 * mission-сообщение. Базовый класс .atcm-msg уже даёт glass-card
 * фон и neon-рамку; здесь мы перенастраиваем внутренний layout
 * (icon row, title, text, action, status).
 */

.atcm-msg.atcm-mission-card {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 12px 14px 10px;
  background:
    radial-gradient(circle at 30% 20%, rgba(56, 189, 248, 0.16), transparent 60%),
    radial-gradient(circle at 80% 100%, rgba(99, 102, 241, 0.12), transparent 65%),
    rgba(2, 6, 14, 0.55);
}

.atcm-msg.atcm-mission-card > .atcm-ai-badge,
.atcm-msg.atcm-mission-card > .atcm-user-badge {
  display: none !important;
}

.atcm-mission-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.atcm-mission-card__icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
  flex-shrink: 0;
  border: 1px solid rgba(158, 255, 255, 0.45);
  background:
    radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.45), rgba(99, 102, 241, 0.08) 60%),
    rgba(2, 6, 14, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 10px hsla(199, 95%, 60%, 0.35);
  border-radius: 0;
  user-select: none;
}

.atcm-mission-card__icon-emoji {
  filter: drop-shadow(0 0 5px hsla(199, 95%, 70%, 0.5));
}

.atcm-mission-card__title {
  font-family: 'Orbitron', 'Syne', 'Poppins', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9effff;
  text-shadow: 0 0 6px rgba(158, 255, 255, 0.5);
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.atcm-mission-card__text {
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #e2e8f0;
  margin: 0 0 10px;
  word-break: break-word;
}

.atcm-mission-card__actions {
  margin-bottom: 8px;
}

.atcm-mission-card__reply {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', 'Syne', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e0f7ff;
  background:
    radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.45), rgba(99, 102, 241, 0.12) 60%),
    rgba(2, 6, 14, 0.55);
  border: 1px solid rgba(158, 255, 255, 0.5);
  padding: 6px 14px;
  min-height: 28px;
  border-radius: 0;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 10px rgba(56, 189, 248, 0.32);
  transition: box-shadow 0.18s ease, background 0.18s ease;
}

.atcm-mission-card__reply:hover {
  background:
    radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.6), rgba(99, 102, 241, 0.2) 60%),
    rgba(2, 6, 14, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 18px rgba(56, 189, 248, 0.55);
}

.atcm-mission-card__reply:focus-visible {
  outline: 2px solid rgba(158, 255, 255, 0.7);
  outline-offset: 2px;
}

.atcm-mission-card__status {
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #93c5fd;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  opacity: 0.92;
}

.atcm-mission-card[data-state="approved"] .atcm-mission-card__status {
  color: #6ee7b7;
}

.atcm-mission-card[data-state="denied"] .atcm-mission-card__status {
  color: #fcd34d;
}

.atcm-mission-card[data-state="waiting"] .atcm-mission-card__status {
  color: #c4b5fd;
}

/* Mobile / узкий чат — уменьшаем элементы карточки. */
@media (max-width: 600px) {
  .atcm-msg.atcm-mission-card {
    padding: 10px 12px 8px;
  }
  .atcm-mission-card__icon {
    width: 30px;
    height: 30px;
    font-size: 17px;
  }
  .atcm-mission-card__title {
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  .atcm-mission-card__text {
    font-size: 12px;
  }
  .atcm-mission-card__reply {
    font-size: 10.5px;
    padding: 5px 12px;
  }
}