/* css/appshell.css — правила, действующие только внутри приложения.
   Всё под [data-app]: в браузере ни одно из них не применяется. */

/* Безопасные зоны. Чёлка и домашняя полоса — не поля страницы, а физические края
   экрана: контент под ними не «почти виден», а не виден вовсе.

   Отступ сверху отдан шапке, а не body: если отодвинуть всю страницу, под чёлкой
   остаётся чёрная полоса — видно, что приложение не знает, где начинается экран.
   Шапка же просто продолжается под статус-бар, как в любом нормальном приложении. */
html[data-app] body {
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
html[data-app] .mb-header {
  padding-top: calc(14px + env(safe-area-inset-top));
  background: linear-gradient(to bottom, rgba(5,5,10,.98) 0%, rgba(5,5,10,.95) 60%, rgba(5,5,10,.82) 100%);
}
html[data-app="ios"], html[data-app="android"] { overscroll-behavior-y: none; }
html[data-app] .bottom-nav { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

/* Нижняя навигация в приложении — основная, а не мобильная адаптация: показываем
   независимо от ширины окна. На десктопной оболочке навигация в меню, там не нужна. */
html[data-app="ios"] .bottom-nav,
html[data-app="android"] .bottom-nav { display: block; }

/* ...но если оболочка нарисовала СВОЙ, системный таб-бар, веб-версия убирается:
   две одинаковые панели друг над другом — это уже не приложение, а недоразумение. */
html[data-native-tabs] .bottom-nav { display: none !important; }

/* Долгое нажатие на элементы управления в приложении вызывает системное меню
   выделения — в браузере это нормально, в приложении выглядит поломкой. */
html[data-app="ios"] .bottom-nav,
html[data-app="ios"] .mb-btn,
html[data-app="android"] .bottom-nav,
html[data-app="android"] .mb-btn {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Экран «нет связи». Своя разметка приложения: браузерная страница ошибки здесь
   недопустима — человек должен видеть, что стол и деньги на месте. */
.app-offline {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  padding: 24px calc(24px + env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 20%, #14141f 0, #050509 60%, #000 100%);
}
.app-offline.is-on { display: flex; }
.app-offline-card {
  max-width: 420px; width: 100%; text-align: center;
  padding: 28px 24px; border-radius: 18px;
  border: 1px solid rgba(232,197,105,.25); background: rgba(232,197,105,.05);
}
.app-offline-title {
  font-size: 20px; font-weight: 700; letter-spacing: .02em;
  color: #f6ecd0; margin-bottom: 10px;
}
.app-offline-text { font-size: 14px; line-height: 1.5; color: rgba(246,236,208,.75); margin-bottom: 20px; }
.app-offline-btn {
  min-height: 46px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 15px; font-weight: 650; color: #1a1608;
  background: linear-gradient(180deg, #f3e3ac 0%, #d8b45f 100%);
}

/* Раздел «скачайте приложение» на главной — внутри приложения предложение скачать
   приложение. Убираем вместе со ссылкой на него в шапке. */
html[data-app] #apps { display: none; }

/* Замок по биометрии. Шторка ставится при уходе приложения в фон — в списке
   запущенных приложений не должно быть видно стол и баланс. */
.app-biolock {
  position: fixed; inset: 0; z-index: 10000;
  display: none; align-items: center; justify-content: center;
  padding: 24px; background: radial-gradient(circle at 50% 18%, #14141f 0, #050509 60%, #000 100%);
}
.app-biolock.is-on { display: flex; }
.app-biolock-card { max-width: 380px; width: 100%; text-align: center; }
.app-biolock-mark {
  width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f3e3ac, #8a6c22 65%, #2a2109);
}
.app-biolock-title { font-size: 15px; letter-spacing: .18em; text-transform: uppercase; color: rgba(246,236,208,.6); margin-bottom: 12px; }
.app-biolock-text { font-size: 15px; line-height: 1.5; color: rgba(246,236,208,.9); margin-bottom: 22px; }
.app-biolock-btn {
  min-height: 48px; padding: 0 30px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 15px; font-weight: 650; color: #1a1608;
  background: linear-gradient(180deg, #f3e3ac 0%, #d8b45f 100%);
}