/* referalo — PC iPhone mockup frame
 * Показывается только при window.innerWidth >= 1024px (управляется iphone-frame.js).
 * Не трогает embed-режим (/app/embed/*).
 */

/* ─── Фон страницы ──────────────────────────────────────────────────────────── */

body.pc-frame {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  overflow-x: hidden;
}

/* Декоративный блик */
body.pc-frame::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, rgba(59,130,246,0.1) 0%, transparent 50%);
  z-index: 0;
  pointer-events: none;
}

/* ─── Обёртка iPhone (создаётся JS) ────────────────────────────────────────── */

body.pc-frame .iphone-content {
  width: 390px;
  height: 844px;
  flex-shrink: 0;

  /* iPhone-форм-фактор */
  border-radius: 47px;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 0 12px #1A1A1A,
    0 0 0 14px #2A2A2A;

  /* Внутренний контент */
  background: var(--bg, #fff);
  overflow: hidden;
  position: relative;
  z-index: 1;

  /* Flex-колонка: header → content → nav */
  display: flex;
  flex-direction: column;
}

/* Динамический остров */
body.pc-frame .iphone-content::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 35px;
  background: #000;
  border-radius: 20px;
  z-index: 1000;
  pointer-events: none;
}

/* ─── Стандартная вёрстка (partner, management, chat, …) ───────────────────── */

/* Шапка: прибиваем к верху flex, убираем sticky (внутри overflow:hidden sticky не работает) */
body.pc-frame .iphone-content .page-header {
  flex-shrink: 0;
  position: relative;
  /* Отступ для динамического острова */
  padding-top: calc(var(--space-3, 12px) + 35px) !important;
}

/* Контент: занимает оставшееся место и скроллится внутри */
body.pc-frame .iphone-content .page-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Padding-bottom уже учитывает высоту nav */
}

/* Скрыть нативный скроллбар */
body.pc-frame .iphone-content .page-content::-webkit-scrollbar { display: none; }
body.pc-frame .iphone-content .page-content { scrollbar-width: none; }

/* Bottom nav: из fixed → relative (прибивается к низу flex-контейнера) */
body.pc-frame .iphone-content .bottom-nav {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  flex-shrink: 0;
  width: 100%;
  /* Убираем safe-area padding — не нужно на PC */
  padding-bottom: 0 !important;
}

/* ─── owner-mobile.html (.om-* вёрстка) ────────────────────────────────────── */

body.pc-frame .iphone-content .om-bottom-nav {
  position: relative !important;
  flex-shrink: 0;
  width: 100%;
}

/* Основной скроллируемый контент owner-mobile */
body.pc-frame .iphone-content .om-main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.pc-frame .iphone-content .om-main::-webkit-scrollbar { display: none; }

/* Шапка owner */
body.pc-frame .iphone-content .om-header {
  flex-shrink: 0;
  padding-top: calc(var(--space-3, 12px) + 35px) !important;
}

/* ─── login.html ────────────────────────────────────────────────────────────── */

body.pc-frame .iphone-content .login-container {
  overflow-y: auto;
  max-height: 844px;
  scrollbar-width: none;
}
body.pc-frame .iphone-content .login-container::-webkit-scrollbar { display: none; }

body.pc-frame .iphone-content .login-page {
  min-height: 844px;
}

/* ─── Подпись снизу ─────────────────────────────────────────────────────────── */

.pc-hint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(calc(-50% + 220px)); /* чуть правее центра рамки */
  color: #94A3B8;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
  user-select: none;
}