/* ════════════════════════════════════════════════════════════════
   SESSION TESTS — мобильный слой (подключается последним).
   Действует только на экранах уже 768px: десктоп не меняется.
   Найдено автопроверкой всех страниц на 375px (2026-11-03):
   - поля с шрифтом < 16px → iOS зумит страницу при фокусе;
   - кнопки 17–34px высотой → промахи пальцем (норма ≥ 40–44px);
   - в чате поле ввода не сжималось и выталкивало «Отправить» за экран;
   - в тесте свёрнутая музыкальная панель закрывала кнопку «ДАЛЕЕ»;
   - нижнее меню без отступа под «полоску» iPhone.
   ════════════════════════════════════════════════════════════════ */

/* iPhone с вырезом: нижнее меню не уходит под системную полоску
   (env() работает благодаря viewport-fit=cover в index.html). */
.st-tabbar {
  height: calc(var(--st-tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
}
@supports (padding: max(0px)) {
  @media (max-width: 767px) and (orientation: landscape) {
    /* Телефон боком: контент не прячется под вырез камеры */
    .st-main {
      padding-left: max(var(--st-gap, 16px), env(safe-area-inset-left));
      padding-right: max(var(--st-gap, 16px), env(safe-area-inset-right));
    }
  }
}

/* Поле ввода в чате обязано сжиматься — иначе кнопка «Отправить» уезжает за экран. */
.chat-input-row input { min-width: 0; }
.chat-send-btn svg { display: none; width: 22px; height: 22px; }

@media (max-width: 767px) {
  /* 1. Без зума при фокусе на iOS */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  textarea,
  select {
    font-size: 16px !important;
  }

  /* 2. Зоны нажатия не меньше 40px */
  .st-chip,
  .filter-btn,
  .ctrl-btn,
  .spotify-tab,
  .theme-groups button,
  .count-opt,
  .st-btn,
  .st-btn-sm,
  .ig-back-btn,
  .ig-search-btn,
  #stPlayerClose,
  .st-player-sdk-btn,
  .qz-mini-btn,
  #musicShuffle,
  #musicRepeat,
  #bookmarkBtn {
    min-height: 40px;
  }
  .ig-back-btn,
  .ig-search-btn,
  #stPlayerClose,
  .st-player-sdk-btn,
  .qz-mini-btn,
  #musicShuffle,
  #musicRepeat,
  #musicNowExpandIdle {
    min-width: 40px;
  }
  .theme-groups button { font-size: 11px; padding-left: 14px; padding-right: 14px; }
  .count-opt { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; }
  #musicNowExpandIdle,
  #musicNowExpand { min-height: 40px; }

  /* 3. Мелкий текст, который трудно прочитать */
  .story-name { font-size: 11px; }
  .profile-badge { font-size: 11px; }

  /* 4. Чат: компактная строка ввода — иконки ближе, «Отправить» стрелкой */
  .chat-input-row { gap: 2px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
  .chat-input-row .chat-ico-btn { padding: 8px 6px; }
  .chat-input-row .chat-ico-btn svg { width: 22px; height: 22px; }
  .chat-input-row input { padding: 9px 12px; }
  .chat-send-btn { flex-shrink: 0; min-width: 44px; min-height: 40px; padding: 8px 10px !important; }
  .chat-send-btn .chat-send-text { display: none; }
  .chat-send-btn svg { display: block; }
  .chat-view-header button { min-width: 44px; min-height: 44px; }
  /* Эмодзи есть в клавиатуре телефона — кнопку прячем, полю ввода нужнее место. */
  @media (hover: none) { #chatEmojiBtn { display: none; } }

  /* 5. Тест: музыкальная панель справа на телефоне не помещается и закрывала
        кнопку «ДАЛЕЕ». Музыка остаётся в общем плеере и на странице «Музыка». */
  .qz-rail { display: none !important; }
  #quiz .controls button { min-height: 48px; }
  #back.st-quiz-exit { min-height: 40px; opacity: 1; }

  /* 6. Комната «вместе» */
  .room-card { padding: 16px; border-radius: 14px; }
  .room-title { font-size: 19px; }
  .room-code { font-size: 26px; letter-spacing: 4px; }
  .room-opt { min-height: 52px; font-size: 16px; }
  .room-row .st-btn { flex: 1 1 auto; }

  /* 7. Панель звонка — над нижним меню и с крупными кнопками */
  .st-call-btn { min-height: 44px; font-size: 15px; }
}

/* ════════════════════════════════════════════════════════════════
   2026-11-09 — мобильная версия как приложение.
   Было: страница-карточка внутри страницы (двойные отступы, рамки,
   две шапки), чат зажат между шапкой сайта и нижним меню, окна —
   десктопные модалки по центру. Стало: контент во всю ширину,
   шапки липкие, чат на весь экран, окна выезжают снизу.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; overflow-x: clip; -webkit-tap-highlight-color: transparent; }
  ::-webkit-scrollbar { width: 0; height: 0; }
  * { scrollbar-width: none !important; }

  /* Фон: анимированные фигуры на телефоне мешают читать и садят батарею. */
  #abstract-canvas, #matrix-bg { opacity: .35 !important; }

  /* Шапка сайта — компактная и липкая */
  .st-header { position: sticky; top: 0; z-index: 900; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(8, 8, 14, .82) !important; padding-top: env(safe-area-inset-top); }
  .st-header-inner { min-height: 52px; height: 52px; padding: 0 14px !important; }

  /* Контент во всю ширину */
  .st-main { padding: 10px 12px calc(var(--st-tabbar-h, 60px) + 20px + env(safe-area-inset-bottom)) !important; }
  .ig-container { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; margin: 0 -12px !important; width: auto !important; max-width: none !important; }
  .ig-content { padding: 10px 12px 16px !important; }
  .ig-card { border-radius: 16px !important; padding: 14px !important; }
  .ig-card .ig-card { padding: 12px !important; background: transparent !important; }

  /* Заголовок раздела («Друзья», «Профиль», …) липнет под шапкой сайта */
  .ig-header { position: sticky; top: calc(52px + env(safe-area-inset-top)); z-index: 800; min-height: 52px; height: 52px; padding: 0 12px !important; background: rgba(8, 8, 14, .9) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .ig-header .ig-title, .ig-header h1, .ig-header h2 { font-size: 19px !important; }

  /* Нижнее меню: 6 пунктов без обрезки подписей */
  .st-tabbar { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .st-tabbar a, .st-tabbar button { min-width: 0; flex: 1 1 0; padding-left: 0 !important; padding-right: 0 !important; }
  .st-tabbar span, .st-tabbar .st-tab-label { font-size: 10px !important; letter-spacing: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  /* Главная */
  .st-hero, .hero, .home-hero { padding: 20px 18px !important; border-radius: 20px !important; }
  .st-hero h1, .hero h1 { font-size: clamp(30px, 10vw, 40px) !important; line-height: 1.02 !important; }
  .filter-btn { flex: 0 0 auto; }

  /* ── Экран теста ── */
  #quiz .card-inner { padding: 12px 14px 24px !important; }
  .st-quiz-top { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; min-height: 48px; }
  .st-quiz-testname { flex: 1 1 auto; min-width: 0; max-width: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px !important; }
  #back.st-quiz-exit { flex: 0 0 auto; width: auto !important; padding: 0 16px !important; }
  #question { padding: 18px 16px !important; border-radius: 18px !important; }
  #question h2 { font-size: 15px !important; }
  #question p { font-size: 19px !important; line-height: 1.35 !important; }
  /* Буква варианта уже есть в тексте («A) …»), счётчик поверх неё её перекрывал. */
  #answers button::before { display: none !important; }
  #answers button { padding: 15px 16px !important; min-height: 54px; font-size: 16px !important; line-height: 1.35; text-align: left; border-radius: 14px !important; white-space: normal; word-break: break-word; }
  #quiz .controls { gap: 10px !important; }
  .st-quiz-hotkeys { display: none !important; }

  /* ── Друзья ── */
  #storiesRow { padding: 10px 2px !important; gap: 12px !important; overflow-x: auto; }
  .chat-preview { padding: 12px 10px !important; border-radius: 14px; }
  .chat-preview:active { background: rgba(255,255,255,.05); }

  /* Чат открыт — на весь экран, шапка сайта и нижнее меню прячутся */
  body.st-chat-open .st-header,
  body.st-chat-open #st-tabbar-root,
  body.st-chat-open .st-tabbar,
  body.st-chat-open #stNowPlaying { display: none !important; }
  body.st-chat-open { overflow: hidden; }
  body.st-chat-open #chatView.is-visible {
    position: fixed !important; inset: 0 !important; z-index: 1200;
    display: flex !important; flex-direction: column;
    height: 100dvh !important; max-height: none !important; margin: 0 !important;
    border: 0 !important; border-radius: 0 !important;
    background: var(--ig-bg, #000) !important;
    padding-top: env(safe-area-inset-top);
  }
  body.st-chat-open .chat-view-header { flex: 0 0 auto; position: static !important; min-height: 56px; padding: 4px 6px !important; gap: 6px; }
  body.st-chat-open .chat-view-titles { flex: 1 1 auto; }
  body.st-chat-open .chat-view-header .chat-search-btn { margin-left: 0; }
  body.st-chat-open #chatMessages { flex: 1 1 auto; min-height: 0; height: auto !important; max-height: none !important; overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 14px !important; }
  body.st-chat-open .chat-input-row { flex: 0 0 auto; position: static !important; }
  .chat-msg { max-width: 82% !important; font-size: 15px; }
  .chat-input-row textarea#chatMsgInput::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ig-container { margin-top: -10px !important; }
  .chat-input-row textarea#chatMsgInput { min-width: 0; flex: 1 1 auto; border-radius: 20px !important; padding: 10px 14px !important; }

  /* ── Окна: выезжают снизу, во всю ширину ── */
  .st-modal { align-items: flex-end !important; padding: 0 !important; }
  .st-modal-card,
  #profileModal .modal-content {
    width: 100% !important; max-width: 100% !important; margin: 0 !important;
    max-height: 92dvh !important; overflow-y: auto;
    border-radius: 22px 22px 0 0 !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    animation: stSheetUp .28s cubic-bezier(.2,.8,.2,1);
  }
  #profileModal { align-items: flex-end !important; padding: 0 !important; }
  .st-modal-card::before,
  #profileModal .modal-content::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); margin: 8px auto 6px; }

  /* Профиль */
  .pf-cover { height: 120px !important; }
  .pf-actions .btn-pill, .pf-actions-row .btn-pill { flex: 1 1 0; min-height: 46px; }

  /* Мои тесты */
  .qz-textarea { min-height: 120px; max-height: 40vh; }
}
@keyframes stSheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── 2026-11-09 (2): кнопка «Свой тест» и непрозрачные окна ── */
.st-add-test-btn { background: linear-gradient(135deg, #7b6cf6, #f472b6) !important; color: #fff !important; border: 0 !important; }
.st-add-test-fab { display: none; }
@media (max-width: 767px) {
  body[data-page="home"] .st-add-test-fab {
    display: inline-flex; align-items: center; gap: 6px;
    position: fixed; z-index: 950; right: 14px;
    bottom: calc(var(--st-tabbar-h, 60px) + 14px + env(safe-area-inset-bottom));
    padding: 0 18px; height: 48px; border-radius: 24px;
    background: linear-gradient(135deg, #7b6cf6, #f472b6); color: #fff;
    font-weight: 700; font-size: 15px; text-decoration: none;
    box-shadow: 0 10px 28px rgba(123, 108, 246, .45);
  }
  .st-add-test-fab span { font-size: 22px; line-height: 1; }
  body.st-chat-open .st-add-test-fab { display: none !important; }
}

/* Поверх контента — только непрозрачные слои. В «стеклянной» теме AURA
   поиск, меню и окна были полупрозрачными, и под ними просвечивал список. */
body[data-theme="aura"] .ig-search-overlay,
body[data-theme="aura"] #chatView,
body[data-theme="aura"] .chat-msg-menu,
body[data-theme="aura"] .chat-search-bar,
body[data-theme="aura"] .chat-reply-bar,
body[data-theme="aura"] .st-modal-card,
body[data-theme="aura"] .ig-note-modal-card,
body[data-theme="aura"] #profileModal .modal-content,
body[data-theme="aura"] .nt-sheet,
body[data-theme="aura"] .grp-sheet {
  background: #12141c !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
@media (max-width: 767px) {
  body[data-theme="aura"] .ig-container,
  body[data-theme="aura"] #panel-requests,
  body[data-theme="aura"] #panel-chats { background: rgba(10, 11, 16, .92) !important; }
  body[data-theme="aura"] .ig-header { background: rgba(12, 13, 19, .96) !important; }
}

/* ── Установка как приложение (scripts/install.js) ── */
.st-install-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; margin-right: 8px; border-radius: 19px; border: 1px solid rgba(139,123,255,.5); background: rgba(139,123,255,.14); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.st-install-btn:hover { background: rgba(139,123,255,.26); }
@media (max-width: 767px) {
  .st-install-btn { height: 36px; padding: 0 11px; font-size: 13px; }
  .st-install-btn span { display: none; }
}
@media (max-width: 767px) and (min-width: 380px) { .st-install-btn span { display: inline; } }
.st-install-help { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.6); }
.st-install-card { width: 100%; max-width: 440px; background: #12141c; color: #eee; border-radius: 22px 22px 0 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); text-align: center; animation: stSheetUp .28s cubic-bezier(.2,.8,.2,1); }
@media (min-width: 768px) { .st-install-help { align-items: center; } .st-install-card { border-radius: 22px; } }
.st-install-card img { border-radius: 16px; }
.st-install-card h3 { margin: 12px 0 10px; font-size: 19px; }
.st-install-card ol { text-align: left; margin: 0 0 18px; padding-left: 22px; line-height: 1.6; color: #cfd0da; }
.st-install-card .st-ih-ico { display: inline-block; padding: 0 4px; border-radius: 6px; background: rgba(255,255,255,.1); }
.st-install-card button { width: 100%; border: 0; border-radius: 14px; padding: 13px; font: inherit; font-weight: 600; color: #fff; background: linear-gradient(135deg, #7b6cf6, #f472b6); cursor: pointer; }
/* В установленном приложении: учитываем вырез и полоску iPhone */
@media (display-mode: standalone) {
  .st-header { padding-top: env(safe-area-inset-top); }
}

/* ════════════════════════════════════════════════════════════════
   2026-11-11 — фиксы мобильной версии / установленного приложения
   ════════════════════════════════════════════════════════════════ */

/* 1. Приложение с главного экрана (standalone): у .st-header фиксированная
      высота (--st-header-h), а сверху добавляется отступ под вырез камеры.
      Строка шапки вылезала из своего блока вниз и (z-index 900) накрывала
      шапку «Друзей» — кнопки поиска и уведомлений не нажимались.
      Высота шапки теперь включает отступ. */
.st-header { box-sizing: border-box; height: calc(var(--st-header-h, 64px) + env(safe-area-inset-top)); }
.st-header-inner { box-sizing: border-box; }
@media (max-width: 767px) {
  .st-header { height: calc(52px + env(safe-area-inset-top)) !important; overflow: visible; }
  body.st-shell .ig-header { top: calc(52px + env(safe-area-inset-top)); }
  /* Шапка раздела всегда выше соседних слоёв — кнопки ловят нажатие */
  .ig-header { position: relative; z-index: 20; }
  .ig-header-actions { position: relative; z-index: 2; display: flex; gap: 2px; }
  .ig-header-actions .ig-search-btn { min-width: 44px; min-height: 44px; touch-action: manipulation; }

  /* Поиск друзей — отдельный экран поверх всего, а не слой внутри списка
     (раньше прятался под липкими шапками). */
  .ig-search-overlay.is-visible {
    position: fixed !important; inset: 0 !important; z-index: 1250 !important;
    border-radius: 0 !important; background: var(--ig-bg, #0b0b12) !important;
    padding-top: env(safe-area-inset-top);
  }
  .ig-search-overlay-header { min-height: 56px; padding: 8px 10px !important; }
  .ig-search-back { min-width: 44px; min-height: 44px; }
  .ig-search-results { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* 2. Плеер на телефоне: только тонкая полоска над нижним меню (или кружок).
      Режим «full» на мобильном JS переводит в compact (scripts/shell.js). */
@media (max-width: 767px) {
  #stPlayer[data-sdk="on"][data-mode="compact"] {
    left: 8px; right: 8px; padding: 6px 8px 6px 6px; border-radius: 14px;
    bottom: calc(var(--st-tabbar-h, 56px) + 6px + env(safe-area-inset-bottom));
  }
  #stPlayer[data-sdk="on"][data-mode="compact"] .st-player-sdk-art { width: 40px !important; height: 40px !important; border-radius: 8px; }
  #stPlayer[data-sdk="on"][data-mode="compact"] .st-player-sdk-track { font-size: 13px; }
  #stPlayer[data-sdk="on"][data-mode="compact"] .st-player-sdk-artist { font-size: 11px; }
  #stPlayer[data-sdk="on"][data-mode="compact"] .st-player-sdk-btn { width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
  #stPlayer[data-sdk="on"][data-mode="compact"] #stSdkExpand { display: none; }
  /* Нажатие на обложку/название открывает полноэкранный плеер (как раньше) */

  /* Без Premium (встроенный плеер Spotify): убираем шапку, оставляем 80px-виджет */
  #stPlayer[data-sdk="off"] { padding: 6px !important; bottom: calc(var(--st-tabbar-h, 56px) + 6px + env(safe-area-inset-bottom)); border-radius: 14px; }
  #stPlayer[data-sdk="off"] .st-player-head { position: absolute; top: 2px; right: 2px; z-index: 2; min-height: 0; padding: 0; }
  #stPlayer[data-sdk="off"] .st-player-logo,
  #stPlayer[data-sdk="off"] .st-player-meta,
  #stPlayer[data-sdk="off"] .st-player-dock { display: none !important; }
  #stPlayer[data-sdk="off"] .st-player-close { background: rgba(0,0,0,.5); border-radius: 50%; }
  #stPlayer[data-sdk="off"] .st-player-invite { padding: 8px 40px 8px 8px; font-size: 13px; }
  #stPlayer[data-sdk="off"][data-mode="compact"] .st-player-frame iframe { height: 80px; }
  #stPlayer .st-player-dock { display: none !important; }

  /* Контент не прячется под плеером */
  body:has(#stPlayer:not([hidden])[data-mode="compact"]) .st-main { padding-bottom: calc(var(--st-tabbar-h, 60px) + 100px + env(safe-area-inset-bottom)) !important; }
  body:has(#stPlayer:not([hidden])[data-mode="compact"]) .st-add-test-fab { bottom: calc(var(--st-tabbar-h, 60px) + 100px + env(safe-area-inset-bottom)); }
  body.st-chat-open #stPlayer { display: none !important; }
}

/* 3. Мелочи: «Свой тест» на главной был дважды (кнопка в списке + плавающая) */
@media (max-width: 767px) {
  body[data-page="home"] .st-add-test-btn { display: none !important; }
  #stPlayer[data-sdk="off"] .st-player-close { width: 36px; height: 36px; min-width: 36px !important; min-height: 36px !important; }
}

/* 4. Экран теста: «ВЫЙТИ» уходил за край. #quiz — fixed на весь экран, а в
      приложении статус-бар прозрачный: верх уходил под часы/вырез. Плюс на
      узких экранах и с крупным системным шрифтом строка не помещалась. */
#quiz .card-inner {
  padding-top: max(24px, calc(env(safe-area-inset-top) + 12px));
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  box-sizing: border-box;
}
@media (max-width: 767px) {
  #quiz { left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100vw !important; overflow-x: hidden; }
  #quiz .card-inner {
    width: 100%; max-width: 100%;
    padding: max(10px, calc(env(safe-area-inset-top) + 6px)) max(12px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
  }
  .st-quiz-top {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
    gap: 8px !important; width: 100%; max-width: 100%; box-sizing: border-box; margin-bottom: 12px; padding-bottom: 10px;
  }
  .st-quiz-testname { min-width: 0; }
  .st-quiz-timer { padding: 4px 8px; font-size: 13px; letter-spacing: 0; white-space: nowrap; }
  .st-quiz-timer:empty { display: none !important; }
  #back.st-quiz-exit { justify-self: end; white-space: nowrap; padding: 0 12px !important; font-size: 12px; max-width: 100%; }
}

/* 5. Полноэкранные слои в приложении: верх (кнопки «назад»/«закрыть»/«выйти»)
      уходил под часы и вырез — статус-бар у приложения прозрачный. */
.note-viewer-top { top: calc(14px + env(safe-area-inset-top)); }
.st-story-bars { top: calc(10px + env(safe-area-inset-top)); }
.st-story-head { top: calc(22px + env(safe-area-inset-top)); }
.stnp-top { padding-top: calc(14px + env(safe-area-inset-top)); }
.st-call-panel { top: calc(16px + env(safe-area-inset-top)); }
.answer-toasts { top: calc(var(--st-header-h, 64px) + 12px + env(safe-area-inset-top)); }
.st-pass-reset, .nt-sheet-overlay, .st-install-help { padding-top: env(safe-area-inset-top); box-sizing: border-box; }
#chatView.is-visible .chat-view-header { padding-top: max(10px, env(safe-area-inset-top)); }
body.st-chat-open #chatView.is-visible .chat-view-header { padding-top: 4px !important; }
@media (max-width: 767px) {
  .st-modal-card,
  #profileModal .modal-content,
  .modal .modal-content,
  .nt-sheet, .grp-sheet {
    max-height: calc(100dvh - env(safe-area-inset-top) - 12px) !important;
  }
  .modal, #profileModal, .modal-overlay, .st-modal { padding-top: env(safe-area-inset-top) !important; box-sizing: border-box; }
}