<template>
  <div class="pwa-safe-wrapper">
    <router-view />
  </div>
  <!-- Глобальные toast-уведомления -->
  <ToastContainer />
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { initMobileClass } from './composables/useMobile'
import ToastContainer from './components/ui/ToastContainer.vue'

let cleanup = null

onMounted(() => {
  cleanup = initMobileClass()
})

onUnmounted(() => {
  if (cleanup) cleanup()
})
</script>

<style>
/* Сброс стилей */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Отключаем 300ms задержку на тапах для всех кликабельных элементов */
button,
a,
[role="button"],
input,
select,
textarea,
label {
  touch-action: manipulation;
}

/* CSS переменные (цветовая палитра) */
:root {
  --bg-body: #111113;
  --bg-gradient: 
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(86, 86, 99, 0.212), transparent)
    var(--bg-body);
  --bg-sidebar: #161618;
  --bg-main: #111113;
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-card-hover: rgba(255, 255, 255, 0.07);
  --bg-input: rgba(255, 255, 255, 0.04);
  --bg-secondary: #1a1a1f;
  --accent: #00d4aa;
  --accent-soft: rgba(0, 212, 170, 0.12);
  --blue: #60a5fa;
  --orange: #fbbf24;
  --pink: #f472b6;
  --red: #f87171;
  --green: #34d399;
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1a6;
  --text-muted: #6b6b70;
}

/* Базовые стили body */
body {
  font-family: 'Outfit', -apple-system, sans-serif;
  background: var(--bg-body);
  color: var(--text-primary);
  min-height: 100vh;
}

/* Градиент на #app — виден везде включая fixed элементы */
#app {
  min-height: 100vh;
  background: var(--bg-gradient);
}

/* Мобильный режим */
body.is-mobile {
  overflow: hidden;
  /* Блокируем overscroll (pull-to-refresh), но разрешаем touch внутри приложения */
  overscroll-behavior: none;
}

body.is-mobile #app {
  height: 100dvh;
  overflow: hidden;
  /* Убираем градиент на мобильных - сплошной цвет */
  background: var(--bg-body);
}

/* Safe area для iPhone (notch и home indicator) */
:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* ========== PWA Safe Area Wrapper ========== */
/* Обёртка для iOS PWA - решает проблему safe area глобально */
.pwa-safe-wrapper {
  min-height: 100vh;
  background: var(--bg-gradient);
}

/* На мобильных: wrapper становится containing block для всех fixed элементов */
body.is-mobile .pwa-safe-wrapper {
  position: fixed;
  top: var(--safe-area-top);
  left: 0;
  right: 0;
  bottom: 0;
  min-height: auto;
  height: calc(100dvh - var(--safe-area-top));
  overflow: hidden;
  /* transform создаёт containing block - fixed элементы внутри 
     теперь позиционируются относительно wrapper, а не viewport */
  transform: translateZ(0);
  /* Убираем градиент на мобильных - сплошной цвет */
  background: var(--bg-body);
}

/* Полоска под статус-баром iPhone */
@supports (padding-top: env(safe-area-inset-top)) {
  body.is-mobile::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--safe-area-top);
    /* Сплошной цвет вместо градиента */
    background: var(--bg-body);
    z-index: 99999;
    pointer-events: none;
  }
}

/* Блокировка скролла когда панель открыта */
/* Убрали position: fixed - он конфликтует с pwa-safe-wrapper */
body.panel-open {
  overflow: hidden !important;
  /* Используем overscroll-behavior вместо touch-action: none для PWA совместимости */
  overscroll-behavior: none !important;
}

/* ========== PWA режим: исправление "залипания" свайпа ========== */
/* iOS PWA не понимает когда заканчивается вертикальный жест */
/* Эти правила помогают браузеру корректно определять направление скролла */
@media (display-mode: standalone), (display-mode: fullscreen) {
  html, body {
    /* Отключаем overscroll bounce на уровне документа */
    overscroll-behavior: none;
    /* Отключаем выделение текста на всём документе при касании */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  
  /* Горизонтальные скролл-контейнеры */
  .columns,
  .mobile-cards {
    /* Изолируем overscroll внутри контейнера */
    overscroll-behavior: contain;
  }
  
  /* Вертикальные скролл-контейнеры */
  .cards,
  .archive-list {
    overscroll-behavior: contain;
  }
  
  /* Скрываем скроллбар на мобильных */
  .cards,
  .archive-list,
  .columns,
  .mobile-cards {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .cards::-webkit-scrollbar,
  .archive-list::-webkit-scrollbar,
  .columns::-webkit-scrollbar,
  .mobile-cards::-webkit-scrollbar {
    display: none;
  }
}
</style>
