feat(mobile): implement iOS Safari responsive layout, bottom tab bar, and mobile bottom sheet

TODO.md

@@ -63,40 +63,35 @@
 ---
 
 ### 4. 📱 Мобильная оптимизация и адаптивная верстка (iPhone 12 / iOS Safari)
-- [ ] **Системный фундамент iOS и сброс ограничений (Core Foundation)**:
-  - Метатег `viewport`: добавить `viewport-fit=cover` для поддержки челки и нижней панели iPhone.
-  - Устранение бага принудительного авто-зума: установить `font-size: 16px` для `<input>`, `<textarea>`, `<select>` на экранах `≤ 768px` (сохраняя компактные внутренние отступы).
-  - Замена `100vh` на динамические единицы `100dvh` (Dynamic Viewport Height) для модальных окон, оверлеев и экрана авторизации.
-  - Добавление безопасных отступов `env(safe-area-inset-top)` и `env(safe-area-inset-bottom)`.
-  - Предотвращение горизонтального скролла (`overflow-x: hidden` на уровне контейнера приложения).
-- [ ] **Мобильная навигация: переход к нативному паттерну (App Header + Bottom Tab Bar)**:
-  - Компактная верхняя шапка: логотип `📖 Notes`, переключатель темы `🌓`, кнопка вызова профиля/действий.
+- [x] **Системный фундамент iOS и сброс ограничений (Core Foundation)**:
+  - Метатег `viewport`: добавлен `viewport-fit=cover` для поддержки выреза (notch) и нижней панели iPhone.
+  - Устранение бага принудительного авто-зума: установлен `font-size: 16px` для `<input>`, `<textarea>`, `<select>` на экранах `≤ 768px`.
+  - Внедрены динамические единицы `100dvh` (Dynamic Viewport Height) и безопасные отступы `env(safe-area-inset-top)` / `env(safe-area-inset-bottom)`.
+  - Защита от горизонтального сдвига (`overflow-x: hidden` на `html`, `body` и `#app-shell`).
+- [x] **Мобильная навигация: переход к нативному паттерну (App Header + Bottom Tab Bar)**:
+  - Компактная верхняя шапка для смартфонов: логотип `📖 Notes`, переключатель темы `🌓`, кнопка вызова профиля `⚙️`.
   - Фиксированная нижняя панель вкладок (Bottom Tab Bar) с нативным iOS UX:
     1. 🔍 **Словарь** (Поиск и словарь)
     2. 🎓 **Тренажёр** (SRS с бейджем количества повторений)
     3. 📚 **Читалка** (Библиотека книг)
     4. 📊 **Прогресс** (Статистика и стрик)
     5. ⚙️ **Меню** (Смена пароля, экспорт, выход)
-  - Сохранение текущей десктопной строки без изменений на больших экранах (`> 768px`).
-- [ ] **Адаптация экрана словаря и карточек (Dictionary & Cards View)**:
-  - Поле поиска/перевода на полную ширину экрана с удобной сенсорной кнопкой «Перевести».
+  - Полное сохранение десктопного `navbar` без изменений на больших экранах (`> 768px`).
+- [x] **Адаптация экрана словаря и карточек (Dictionary & Cards View)**:
+  - Поле поиска/перевода на полную ширину экрана с кнопкой «Перевести».
   - Скрытие неактуальных десктопных подсказок горячих клавиш (`<kbd>Ctrl+Enter</kbd>`) на мобильных устройствах.
-  - Вертикальная раскладка полей метаданных при редактировании карточки (папка, теги, заметка).
-  - Горизонтальный скролл чипсов коллекций и тегов (`overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch`) вместо многострочного переноса.
-  - Увеличенные зоны нажатия (Touch Targets ≥ 44px) для кнопок действий над карточкой (удаление, редактирование, озвучка).
-- [ ] **Интерактивная читалка и переход к Mobile Bottom Sheet**:
-  - Трансформация всплывающего попапа перевода (`reader-word-popup`) в нативную выдвижную нижнюю шторку (Bottom Sheet) на смартфонах:
-    - Заголовок с термином, транскрипцией и бейджем `⭐ В библиотеке`.
-    - Блок перевода и контекстной цитаты книги.
-    - Большая кнопка «💾 Добавить в словарь» под большой палец.
-    - Исключение вылетов за границы экрана и перекрытия текста пальцем.
+  - Вертикальная раскладка полей метаданных при редактировании карточки.
+  - Горизонтальный скролл чипсов коллекций и тегов (`overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch`).
+  - Увеличенные зоны нажатия (Touch Targets ≥ 44px) для кнопок действий над карточкой.
+- [x] **Интерактивная читалка и переход к Mobile Bottom Sheet**:
+  - Трансформация всплывающего попапа перевода (`reader-word-popup`) в нативную выдвижную нижнюю шторку (Bottom Sheet) на смартфонах с ручкой перетаскивания `sheet-drag-handle`.
   - Двухстрочный адаптивный тулбар читалки (навигация по главам + размер шрифта `A-/A+` и подсветка).
   - Сетка библиотеки `bookshelf-grid` в одну колонку на экранах `≤ 640px`.
-- [ ] **Тренажёр интервальных повторений (SRS Trainer)**:
+- [x] **Тренажёр интервальных повторений (SRS Trainer)**:
   - Ограничение высоты карточки SRS (`max-height: 48dvh`), чтобы карточка и кнопки оценки гарантированно помещались без вертикального скролла на 390px.
-  - Кнопки оценки (Снова / Трудно / Хорошо / Легко) в сетку 2×2 с высотой от 50px и четкими цветовыми акцентами.
+  - Кнопки оценки (Снова / Трудно / Хорошо / Легко) в сетку 2×2 с высотой от 48px и четкими цветовыми акцентами.
   - Вертикальный список вариантов в режиме квиза (4 варианта) на всю ширину экрана.
-- [ ] **Модальные окна (Статистика, Пароль, Экспорт)**:
+- [x] **Модальные окна (Статистика, Пароль, Экспорт)**:
   - Метрики статистики в сетку 2×2 вместо сжатых 4 колонок.
   - Плавный горизонтальный скролл календаря активности (Heatmap).
   - Разворачивание модальных окон в адаптивный мобильный слой с удобной кнопкой закрытия.