/* ═══════════════════════════════════════════════════════════
   MOBILE POLISH — финальные мобильные фиксы (≤768px)
   Загружается ПОСЛЕ всех polish-стилей чтобы перебить
   ai-modal-polish.css, chat.css, watchparty.css на телефонах.
   ═══════════════════════════════════════════════════════════ */

/* ─────────── 1. AI-МОДАЛКА — скролл на телефоне ─────────── */
/* На телефоне модалка не помещается в экран. Раньше overflow:hidden
   глотал длинный список фильмов — теперь скроллим внутри коробки. */
@media (max-width: 768px) {
  #ai-modal .ai-box {
    max-height: 100vh !important;
    max-height: 100dvh !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    padding: 22px 18px max(22px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
  }
  #ai-modal .ai-box h2 {
    font-size: 22px !important;
    padding-right: 46px !important;
  }
  #ai-modal .ai-box .sub {
    font-size: 12px !important;
    margin-bottom: 14px !important;
  }
  #ai-modal .ai-box textarea {
    min-height: 90px !important;
    font-size: 16px !important; /* блокирует auto-zoom iOS */
  }
}

/* ─────────── 2. INPUT'Ы — 16px чтобы iOS не зумил ────────── */
@media (max-width: 768px) {
  .hsearch input,
  #ai-q,
  .auth-card input,
  .profile-name-input,
  input[type=text], input[type=email], input[type=password],
  input[type=search], input[type=tel], textarea, select {
    font-size: 16px !important;
  }
}

/* ─────────── 3. HERO «EQU=LS» — не вылезает за края ───────── */
@media (max-width: 768px) {
  .hero h1 {
    font-size: clamp(38px, 11.5vw, 64px) !important;
    letter-spacing: 4px !important;
    line-height: 1 !important;
    word-break: keep-all;
    white-space: nowrap;
  }
}

/* ─────────── 4. MOOD КНОПКИ — 44×44 hit-target ─────────── */
@media (max-width: 768px) {
  #page-home .home-mood-btn,
  .home-mood-btn,
  .mood-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ─────────── 5. SAFE-AREA В FOOTER — везде, не только phone ─── */
footer, .footer-inner, .site-footer {
  padding-bottom: max(20px, calc(20px + env(safe-area-inset-bottom))) !important;
}

/* ─────────── 6. SCROLL-SNAP для горизонтальных лент ────── */
@media (max-width: 768px) {
  .row, .act-gallery-row, .ep-list {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .row > .mc,
  .row > .ac,
  .row > .fc,
  .row > .cc,
  .row > .smc,
  .row > .shc,
  .row > .feat,
  .row > .alb,
  .row > .blog-card,
  .row > .shop-item,
  .row > a,
  .row > article {
    scroll-snap-align: start;
  }
}

/* ─────────── 7. КРЕСТИК × — всегда 44×44 ─────────── */
@media (max-width: 768px) {
  .ilb-close, .ai-close, #pclose,
  .modal-close, .close-btn,
  .cart-close, .auth-close,
  .dm-thread-close {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ─────────── 8. HEADER — дышит и уважает safe-area ───────── */
@media (max-width: 768px) {
  header {
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
  }
  .logo { flex-shrink: 1; }
}

/* ─────────── 9. PROFILE NAME input — не вылезает ─────── */
@media (max-width: 768px) {
  .profile-name-input {
    width: 100% !important;
    max-width: 280px !important;
    box-sizing: border-box;
  }
}

/* ─────────── 10. FAV-BTN (♥) — нормальный hit-target ────── */
@media (max-width: 768px) {
  .fav-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   ЧАТ — мобильные фиксы по отчёту Agent 2
   ═══════════════════════════════════════════════════════════ */

/* ─────────── 11. WATCH PARTY invite — горизонтальный ────── */
@media (max-width: 480px) {
  .dm-wp-invite {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: auto !important;
    max-width: 100% !important;
    padding: 10px 12px !important;
  }
  .dm-wp-invite-head {
    flex: 1;
    min-width: 0;
  }
  .dm-wp-invite-title {
    font-size: 13px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dm-wp-invite button {
    margin-top: 0 !important;
    flex-shrink: 0;
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
}

/* ─────────── 12. ГОЛОСОВЫЕ — компактнее ────── */
@media (max-width: 480px) {
  .dm-voice-msg {
    min-width: auto !important;
    max-width: 220px !important;
    padding: 5px 10px 5px 6px !important;
    gap: 8px !important;
  }
  .dm-voice-play {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
  }
}

/* ─────────── 13. ЧАТ-ХЕДЕР — скрыть лишние кнопки ────── */
@media (max-width: 400px) {
  .dm-thread-head .dm-theme,
  .dm-thread-head .dm-search-toggle,
  .dm-thread-head .dm-bg-btn {
    display: none !important;
  }
}
@media (max-width: 480px) {
  .dm-thread-head {
    gap: 6px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .dm-thread-name {
    font-size: 14px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
  }
}

/* ─────────── 14. VOICE OVERLAY — safe-area ────── */
.dm-voice-overlay {
  bottom: calc(78px + env(safe-area-inset-bottom)) !important;
}

/* ─────────── 15. ИЕРАРХИЯ КНОПОК — не всё золотом ────── */
/* Primary action остаётся золотым, secondary — лёгкий surface */
@media (max-width: 768px) {
  .dm-bg-btn, .dm-theme, .dm-search-toggle,
  .dm-attach-btn, .dm-mic {
    background: rgba(255,255,255,.06) !important;
    color: var(--text) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
  }
  .dm-bg-btn:hover, .dm-theme:hover,
  .dm-search-toggle:hover, .dm-attach-btn:hover, .dm-mic:hover {
    background: var(--gold) !important;
    color: #000 !important;
  }
}

/* ─────────── 16. REDUCED-MOTION ─────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────── 17. iOS smooth scrolling everywhere ────── */
@media (max-width: 768px) {
  html, body, .row, .act-gallery-row, .ep-list,
  .dm-thread, .ai-box, .results-list, .blog-list {
    -webkit-overflow-scrolling: touch;
  }
}

/* ═══════════════════════════════════════════════════════════
   BATCH 2 — углублённый аудит 4 агентов (2026-06-11)
   Конкретные находки «иконки вылазят за экран»
   ═══════════════════════════════════════════════════════════ */

/* ─────────── 18. ГЛОБАЛЬНЫЙ ANTI-OVERFLOW ────── */
/* Главный виновник «полоски справа» в Safari */
html, body { overflow-x: hidden !important; }

/* ═══════════════════════════════════════════════════════════
   ГЛАВНАЯ + ПОИСК (Agent 1)
   ═══════════════════════════════════════════════════════════ */

/* ─────────── 19. NOTIF-DROPDOWN — fixed к viewport ────── */
/* mobile.css:980 имел right:-58px → выход за viewport.
   Заменяем на position:fixed с привязкой к viewport. */
@media (max-width: 768px) {
  .notif-dropdown {
    position: fixed !important;
    top: calc(58px + env(safe-area-inset-top) + 6px) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 80px - env(safe-area-inset-top)) !important;
    overflow-y: auto;
  }
}

/* ─────────── 20. AUTH-BTN — убрать chevron в header ────── */
@media (max-width: 768px) {
  .auth-btn .auth-chevron,
  .auth-btn [data-lucide="chevron-down"] {
    display: none !important;
  }
  .auth-btn {
    padding: 8px !important;
    min-width: 38px !important;
  }
}

/* ─────────── 21. MOOD-КНОПКИ — перебить hero-unified.css ────── */
/* hero-unified.css:310 форсирует 38×38 — ID-селектор сильнее.
   Удваиваем ID-селектор чтобы перебить. */
@media (max-width: 768px) {
  #page-home#page-home .home-mood-btn,
  #page-home#page-home .home-mood-section .home-mood-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
  }
}

/* ─────────── 22. AI-MODAL tabs не обрезаются ────── */
@media (max-width: 480px) {
  #ai-modal .ai-tab-switch {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  #ai-modal .ai-tab-switch button {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 11px !important;
    padding: 10px 6px !important;
  }
}

/* ─────────── 23. AI-чипы (предложения, цитаты) ────── */
@media (max-width: 480px) {
  #ai-modal .ai-sug,
  #ai-modal .ai-chip {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
}

/* ─────────── 24. COOKIE-BANNER кнопки оборачиваются ────── */
@media (max-width: 480px) {
  #cookie-banner {
    padding: 14px 16px !important;
    gap: 10px !important;
  }
  #cookie-banner > div:last-child {
    flex-wrap: wrap !important;
    width: 100%;
  }
  #cookie-banner > div:last-child button {
    flex: 1 1 auto;
    padding: 10px 12px !important;
  }
}

/* ─────────── 25. NOTIF/CART BADGE не за viewport ────── */
@media (max-width: 768px) {
  #cart-badge, .notif-badge {
    top: -4px !important;
    right: -2px !important;
    transform: scale(.85);
    transform-origin: top right;
  }
}

/* ─────────── 26. FOOTER COLS — 1 колонка на узких ────── */
@media (max-width: 480px) {
  .footer-cols {
    flex-direction: column !important;
    gap: 18px !important;
  }
  .footer-col { width: 100%; }
}

/* ─────────── 27. TOAST уважает safe-area ────── */
#eq-toast,
.toast {
  bottom: max(28px, calc(20px + env(safe-area-inset-bottom))) !important;
}

/* ─────────── 28. HEADER реальная высота при flex-wrap ────── */
@media (max-width: 768px) {
  header {
    min-height: calc(58px + env(safe-area-inset-top));
    height: auto !important;
    padding-bottom: 6px;
    overflow: visible;
  }
  .beta-badge {
    transform: none !important;
    font-size: 8px !important;
    padding: 2px 4px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   КАРТОЧКА ФИЛЬМА + ПЛЕЕР (Agent 2)
   ═══════════════════════════════════════════════════════════ */

/* ─────────── 29. .fbtns — 9 кнопок в 2-колоночный grid ────── */
@media (max-width: 480px) {
  .fbtns {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px !important;
    width: 100%;
    padding: 0 6px;
    box-sizing: border-box;
  }
  .fbtns .fbw,
  .fbtns .fbw-resume {
    grid-column: 1 / -1; /* «Смотреть» на всю ширину */
  }
  .fbtns .fbt,
  .fbtns .fwl-btn {
    padding: 11px 6px !important;
    font-size: 9px !important;
    letter-spacing: 1px !important;
    min-height: 44px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ─────────── 30. ПЛЕЕР fullscreen без чёрных полей ────── */
@media (max-width: 768px) {
  #pov { padding: 0 !important; }
  #pwrap {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
  }
  #ptopbar {
    padding: env(safe-area-inset-top) 12px 0 12px !important;
    height: calc(52px + env(safe-area-inset-top)) !important;
  }
  #pclose {
    position: static !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
    flex-shrink: 0;
  }
  #pbar {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 48px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) 10px !important;
    gap: 6px !important;
  }
  #pbar #p-time { min-width: 0 !important; font-size: 8px !important; }
  #pbar #p-spacer,
  #pbar #p-esc { display: none !important; }
  #p-prog-wrap { flex: 1 1 100% !important; order: 99; }
}

/* ─────────── 31. ПОСТЕР + ТАЙТЛ ФИЛЬМА ────── */
@media (max-width: 768px) {
  .ftitle {
    font-size: clamp(22px, 7vw, 30px) !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
    hyphens: auto;
  }
  .ftagline { padding: 0 14px; font-size: 11px !important; }
}
@media (max-width: 480px) {
  #fposter img,
  #fposter .fph {
    width: 170px !important;
    height: 255px !important;
  }
  .fstats { gap: 10px !important; font-size: 11px; }
  .fstats > div { flex: 1 1 28%; min-width: 0; }
  #film-ratings {
    font-size: 12px !important;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ─────────── 32. АКТЁРЫ + ПОХОЖИЕ — больше карточек ────── */
@media (max-width: 480px) {
  .cc, .cc img, .cc-ph { width: 108px !important; }
  .cc img, .cc-ph { height: 142px !important; }
  .cc-n { font-size: 11px !important; padding: 6px 6px 2px !important; }

  .smc, .smc img, .smc-ph { width: 120px !important; }
  .smc img, .smc-ph { height: 170px !important; }
}

/* ─────────── 33. ЭПИЗОДЫ компактнее ────── */
@media (max-width: 480px) {
  .ep-list { max-height: 320px; }
  .ep-item { gap: 9px !important; padding: 10px 11px !important; }
  .ep-num { min-width: 30px !important; font-size: 17px !important; }
  .ep-title { font-size: 12px !important; white-space: normal; }
  .ep-desc { -webkit-line-clamp: 3; }
}

/* ─────────── 34. ФОРМА ОТЗЫВА ────── */
@media (max-width: 768px) {
  .review-form { padding: 14px !important; }
  .review-form textarea {
    min-height: 90px !important;
    font-size: 16px !important;
  }
  .review-submit {
    padding: 13px 22px !important;
    font-size: 11px !important;
    min-height: 44px;
    width: 100%;
  }
  .review-stars { font-size: 14px !important; }
}

/* ═══════════════════════════════════════════════════════════
   ПРОФИЛЬ + ДРУЗЬЯ + ЧАТ + НАСТРОЙКИ + AUTH (Agent 3)
   ═══════════════════════════════════════════════════════════ */

/* ─────────── 35. CHAT FORM — safe-area + 16px ────── */
@media (max-width: 768px) {
  .dm-form {
    padding: 10px 12px max(10px, env(safe-area-inset-bottom)) !important;
    gap: 6px !important;
    align-items: center;
  }
  .dm-form input {
    font-size: 16px !important;
    padding: 9px 12px !important;
    min-width: 0 !important;
  }
  .dm-send, .dm-mic { flex-shrink: 0 !important; }
  .dm-search-bar input {
    font-size: 16px !important;
    padding: 8px 12px !important;
  }
}

/* ─────────── 36. PROFILE HERO компактнее на мобиле ────── */
@media (max-width: 640px) {
  #page-profile .profile-hero {
    padding: 24px 14px !important;
    gap: 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left;
  }
  #page-profile .profile-stats {
    gap: 18px !important;
    width: 100%;
  }
  #page-profile .profile-stats > div {
    padding-right: 14px !important;
  }
  /* 4 кнопки в 2×2 grid вместо переполнения ряда */
  #page-profile .profile-hero > div:last-child > div[style*="flex-wrap"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100%;
  }
  #page-profile .view-as-btn,
  #page-profile .logout-btn {
    padding: 10px 8px !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* tabs горизонтальный скролл вместо wrap */
  #page-profile #profile-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px !important;
    margin: 0 -14px 14px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  #page-profile #profile-tabs::-webkit-scrollbar { display: none; }
  #page-profile #profile-tabs .sf { flex-shrink: 0; }
}

/* ─────────── 37. ДРУЗЬЯ grid 3 колонки на 390px ────── */
@media (max-width: 640px) {
  #page-friends .fp-friends-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  #page-friends .fp-friend-card { padding: 16px 8px 12px !important; }
  #page-friends .fp-friend-ava,
  #page-friends .fp-friend-ava-ph {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 8px !important;
  }
  #page-friends .fp-friend-name { font-size: 11px !important; }
  #page-friends .fp-friend-chat-btn {
    width: 26px !important;
    height: 26px !important;
    top: 6px !important;
    right: 6px !important;
  }
  /* feed-meta — длинные названия фильмов разбиваются */
  #page-friends .fp-feed-item {
    padding: 12px 12px !important;
    gap: 10px !important;
  }
  #page-friends .fp-feed-meta,
  #page-friends .fp-feed-target {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 380px) {
  #page-friends .fp-friends-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ─────────── 38. AUTH-BOX модалка ────── */
@media (max-width: 480px) {
  #auth-modal {
    padding: max(20px, env(safe-area-inset-top)) 12px max(20px, env(safe-area-inset-bottom)) !important;
  }
  .auth-box {
    padding: 26px 20px !important;
    max-width: 100% !important;
    max-height: calc(100vh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .auth-title { font-size: 22px !important; letter-spacing: 2px !important; }
  .auth-tab {
    padding: 10px 4px !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }
  .google-btn { font-size: 12px !important; padding: 12px !important; }
}

/* ─────────── 39. SETTINGS inputs на ширину контейнера ────── */
@media (max-width: 640px) {
  .settings-input,
  .settings-email-readonly {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: left !important;
  }
  .settings-name-edit {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: 8px !important;
  }
}

/* ─────────── 40. WATCH-PARTY BADGE в плеере ────── */
@media (max-width: 600px) {
  #wp-badge {
    top: calc(48px + env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
  }
  #wp-badge .wp-dot { width: 6px; height: 6px; }
}

/* ═══════════════════════════════════════════════════════════
   БЛОГ + МАГАЗИН + МУЗЫКА + STATS + WRAPPED + DIARY + CLUBS (Agent 4)
   ═══════════════════════════════════════════════════════════ */

/* ─────────── 41. BLOG filter tabs — горизонтальный скролл ────── */
@media (max-width: 768px) {
  #blog-cat-tabs.sort-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    margin-left: -14px;
    margin-right: -14px;
    padding: 0 14px;
  }
  #blog-cat-tabs.sort-tabs::-webkit-scrollbar { display: none; }
  #blog-cat-tabs .sort-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 14px !important;
  }
}

/* ─────────── 42. BLOG article padding и h1 ────── */
@media (max-width: 640px) {
  .blog-article {
    padding: 26px 14px !important;
  }
  .blog-article h1 {
    font-size: 30px !important;
    letter-spacing: 1.5px !important;
    word-break: break-word;
  }
  .blog-article h2 {
    font-size: 18px !important;
    letter-spacing: 1px !important;
  }
  .blog-article p {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }
  /* related-posts grid 200px → 2 колонки */
  .blog-article div[style*="minmax(200px,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* blog comments */
  #blog-comments-container .review-item { padding: 12px !important; }
  #blog-comments-container .review-text {
    word-break: break-word;
    font-size: 13px !important;
  }
  #blog-comments-section h2 {
    font-size: 17px !important;
    letter-spacing: 1px !important;
  }
}

/* ─────────── 43. CART drawer item не перекрывается ────── */
@media (max-width: 480px) {
  #cart-panel .cart-item {
    padding: 10px !important;
    gap: 10px !important;
  }
  #cart-panel .cart-item img {
    width: 54px !important;
    height: 54px !important;
  }
  #cart-panel .cart-item-qty {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  #cart-panel .cart-item-qty .cart-item-price {
    margin-left: 0 !important;
    width: 100%;
    font-size: 13px !important;
  }
  #cart-panel .cart-item-actions {
    flex-direction: row !important;
    gap: 6px !important;
  }
  #cart-panel .cart-buy-small {
    padding: 5px 8px !important;
    font-size: 9px !important;
    white-space: nowrap;
  }
}

/* ─────────── 44. SHOP hero не такой огромный ────── */
@media (max-width: 640px) {
  .shop-hero {
    padding: 32px 18px !important;
    margin-bottom: 8px;
  }
  .shop-hero-sub {
    font-size: 8px !important;
    letter-spacing: 3px !important;
  }
  .shop-hero-title {
    font-size: 34px !important;
    letter-spacing: 2px !important;
  }
  .shop-hero-desc {
    font-size: 11px !important;
    max-width: 100% !important;
  }
  .shop-hero-cta {
    padding: 12px 22px !important;
    font-size: 12px !important;
    width: 100%;
    text-align: center;
  }
  .shop-film-filter-wrap {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .shop-film-filter {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 13px !important;
  }
}

/* ─────────── 45. STATS KPI + heatmap + decades ────── */
@media (max-width: 640px) {
  #page-stats .stats-block { padding: 14px !important; }
  #page-stats .kpi-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #page-stats .kpi-val { font-size: 24px !important; }
  #page-stats .kpi-card { padding: 14px 8px !important; }
  .stats-heat {
    grid-template-rows: repeat(7, 12px) !important;
    grid-auto-rows: 12px !important;
    gap: 2px !important;
  }
  .stats-decades {
    height: 110px !important;
    gap: 3px;
    font-size: 10px;
  }
  .sd-lbl {
    font-size: 8px !important;
    letter-spacing: 0 !important;
  }
  .stats-dow { height: 100px !important; gap: 3px !important; }
  .sdo-lbl { font-size: 9px !important; }
}

/* ─────────── 46. MUSIC страница ────── */
@media (max-width: 640px) {
  #page-music #music-search-input { font-size: 16px !important; }
  #mu-player iframe {
    height: auto !important;
    aspect-ratio: 16/9;
    width: 100%;
  }
  #mu-player > div[style*="padding:12px 16px"] button {
    min-width: 40px;
    min-height: 40px;
  }
  #mu-tracks-head {
    flex-wrap: wrap;
    gap: 10px !important;
  }
  #mu-album-title {
    font-size: 16px !important;
    letter-spacing: 2px !important;
  }
}

/* ─────────── 47. WRAPPED slides не вылазят ────── */
@media (max-width: 640px) {
  .ws-big-num {
    font-size: clamp(72px, 22vw, 140px) !important;
  }
  .ws-title {
    font-size: clamp(28px, 7.5vw, 42px) !important;
    letter-spacing: 1px !important;
  }
  .ws-sub {
    font-size: 13px !important;
    max-width: 320px;
  }
  .ws-emoji { font-size: 48px !important; }
  .wrapped-slide { padding: 70px 18px 70px !important; }
  .ws-list-row {
    padding: 9px 12px !important;
    font-size: 12px !important;
    gap: 10px !important;
  }
  .ws-list-rank {
    font-size: 18px !important;
    min-width: 22px;
  }
}
@media (max-height: 680px) {
  .ws-poster {
    width: 140px !important;
    height: 210px !important;
    margin-bottom: 14px !important;
  }
  .ws-avatar {
    width: 110px !important;
    height: 110px !important;
    margin-bottom: 14px !important;
  }
}

/* ─────────── 48. DIARY entry компактнее ────── */
@media (max-width: 480px) {
  .diary-entry {
    grid-template-columns: 32px 44px 1fr !important;
    gap: 10px !important;
    padding: 10px 4px !important;
  }
  .dx-date { font-size: 18px !important; }
  .dx-poster,
  .dx-poster-ph {
    width: 44px !important;
    height: 66px !important;
  }
  .dx-title { font-size: 15px !important; }
  .dx-note {
    font-size: 12.5px !important;
    word-break: break-word;
  }
  .dx-main {
    max-width: 100% !important;
    min-width: 0;
  }
  .diary-filters input {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ─────────── 49. CLUBS hero + chat ────── */
@media (max-width: 640px) {
  .cl-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .club-hero {
    padding: 12px !important;
    gap: 12px !important;
  }
  .club-hero > img,
  .club-hero-ph {
    width: 96px !important;
    height: 64px !important;
  }
  .club-chat { height: 280px !important; }
  .club-chat-form input { font-size: 16px !important; }
  .club-chat-form .btn-g {
    min-height: 42px;
    padding: 0 14px !important;
  }
  .cmsg-text { word-break: break-word; }
  .club-modal-card {
    padding: 18px 14px !important;
    max-height: 88vh !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   BATCH 3 — PWA standalone mode (когда сайт добавлен на главный
   экран iPhone). Симптомы: статус-бар iPhone накладывается на
   шапку чата, аватар наезжает на часы, Watch Party торчит огромный.
   В CSS не было ни одной @media (display-mode: standalone) —
   safe-area применялась только в Safari, не в PWA.
   ═══════════════════════════════════════════════════════════ */

/* ─────────── 50. WATCH PARTY invite — компактный ВСЕГДА ────── */
/* §11 был под (max-width: 480px), но в PWA viewport может быть
   шире — карточка торчала. Теперь горизонтальный flex до 768px. */
@media (max-width: 768px) {
  .dm-wp-invite {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: auto !important;
    max-width: 100% !important;
    padding: 10px 12px !important;
    width: auto;
  }
  .dm-wp-invite-head {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .dm-wp-invite-title {
    font-size: 13px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dm-wp-invite button {
    margin-top: 0 !important;
    flex-shrink: 0;
    padding: 8px 12px !important;
    font-size: 11px !important;
    align-self: center !important;
  }
  /* Голосовое сообщение тоже компактнее ВСЕГДА */
  .dm-voice-msg {
    min-width: auto !important;
    max-width: 220px !important;
    padding: 5px 10px 5px 6px !important;
    gap: 8px !important;
  }
  .dm-voice-play {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
  }
}

/* ─────────── 51. PWA STANDALONE — общие фиксы safe-area ────── */
/* Когда сайт запущен как приложение (display-mode: standalone),
   статус-бар iPhone (с часами, батареей) наложен поверх страницы.
   Без принудительных вставок интерфейс торчит под ним. */
@media all and (display-mode: standalone) {
  /* Body получает класс через JS — даём всем sticky-шапкам отступ */
  body.pwa-standalone {
    /* safe-area работает только если viewport-fit=cover в meta — он есть */
  }

  /* Header основной — padding-top чтобы лого не наезжало на DI */
  header {
    padding-top: env(safe-area-inset-top) !important;
    min-height: calc(58px + env(safe-area-inset-top)) !important;
  }
  .page {
    padding-top: calc(58px + env(safe-area-inset-top)) !important;
  }

  /* Chat thread head — принудительно больше отступ сверху */
  .dm-thread-head {
    padding-top: calc(env(safe-area-inset-top) + 14px) !important;
  }
  /* Чат-форма снизу с уважением к home-indicator */
  .dm-form {
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  /* Уменьшаем аватар в чате чтобы не доминировал */
  .dm-thread-head img,
  .dm-thread-head .dm-ava {
    width: 36px !important;
    height: 36px !important;
  }
}

/* ─────────── 52. PWA STANDALONE — кл `.pwa-standalone` на body/html ── */
/* Дублируем по JS-классу — Safari иногда не применяет
   display-mode media-query на iframe-роутах внутри PWA. */
html.pwa-standalone header,
body.pwa-standalone header {
  padding-top: env(safe-area-inset-top) !important;
  min-height: calc(58px + env(safe-area-inset-top)) !important;
}
body.pwa-standalone .page {
  padding-top: calc(58px + env(safe-area-inset-top)) !important;
}
body.pwa-standalone .dm-thread-head {
  padding-top: calc(env(safe-area-inset-top) + 14px) !important;
}
body.pwa-standalone .dm-form {
  padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
}
body.pwa-standalone .dm-thread-head img,
body.pwa-standalone .dm-thread-head .dm-ava {
  width: 36px !important;
  height: 36px !important;
}
/* Plain text "Артём" — был налезающий, перестрахуемся */
body.pwa-standalone .dm-thread-name {
  font-size: 14px !important;
  font-weight: 600;
}
/* Footer/таб-бар внизу + safe-area */
body.pwa-standalone footer {
  padding-bottom: max(20px, calc(20px + env(safe-area-inset-bottom))) !important;
}

/* ─────────── 53. PWA — модалки respect safe-area ────── */
body.pwa-standalone #ai-modal .ai-box,
body.pwa-standalone .auth-box,
body.pwa-standalone .review-modal {
  padding-top: max(22px, calc(env(safe-area-inset-top) + 10px)) !important;
  padding-bottom: max(22px, calc(env(safe-area-inset-bottom) + 10px)) !important;
}

/* ─────────── 54. PWA — toast выше home-indicator ────── */
body.pwa-standalone #eq-toast,
body.pwa-standalone .toast {
  bottom: max(40px, calc(28px + env(safe-area-inset-bottom))) !important;
}

/* ═══════════════════════════════════════════════════════════
   ВТОРАЯ ВОЛНА mobile audit findings (2026-06-17)
   M1-M8 из notes/mobile-tv-audit.md
   ═══════════════════════════════════════════════════════════ */

/* ─────────── 55. iOS auto-zoom fix — textarea ≥16px (M1) ────── */
/* Safari iOS делает auto-zoom при focus на input с font-size<16px.
   Базовые input в §2 уже на 16px, но textarea с явным font-size 13px
   в main.css/clubs.css обходили это. Покрываем все textarea явно. */
@media (max-width: 768px) {
  .ai-box textarea,
  .review-form textarea,
  .cm-row textarea,
  .checkout-field textarea,
  .club-chat-form textarea,
  .dm-form textarea,
  textarea[name="text"],
  textarea[name="comment"],
  textarea[name="review"] {
    font-size: 16px !important;
  }
}

/* ─────────── 56. AI-modal close × — 48×48 hit-target (M2) ────── */
/* Текущие 34×34 фейлят WCAG 44×44. На iPhone SE палец еле попадает. */
@media (max-width: 640px) {
  #ai-modal .ai-close,
  #ai-modal #ai-close {
    min-width: 48px !important;
    min-height: 48px !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }
}

/* ─────────── 57. Watch-party invite title ellipsis (M3) ────── */
/* §50 уже flex-row, но без явного text-overflow длинные названия фильмов
   распирали bubble. Добавляем ellipsis форсом. */
@media (max-width: 768px) {
  .dm-wp-invite-title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis !important;
  }
}

/* ─────────── 58. Hero "EQU=LS" на iPhone SE 375px (M4) ────── */
/* §3 clamp(38px, 11.5vw, 64px) × letter-spacing 4px × 7 chars = overflow
   на 375px. Жёстко фиксируем для самых узких экранов. */
@media (max-width: 380px) {
  .hero h1 {
    font-size: 36px !important;
    letter-spacing: 2px !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }
}

/* ─────────── 59. Home AI-form padding на узких (M6) ────── */
@media (max-width: 480px) {
  .home-ai-form {
    padding: 8px 6px !important;
    gap: 4px !important;
  }
  .home-ai-input {
    font-size: 16px !important;  /* и iOS-zoom фикс заодно */
    padding: 10px 10px !important;
  }
  .home-ai-btn {
    padding: 10px 12px !important;
    font-size: 12px !important;
    flex-shrink: 0;
  }
}

/* ─────────── 60. Episode list — НЕ snap'ить горизонтально (M8) ────── */
/* §6 включал scroll-snap-type для .row и копипастом захватывал .ep-list.
   Но .ep-list это вертикальный список эпизодов — горизонтальный snap
   ломает скролл. Отменяем. */
@media (max-width: 768px) {
  .ep-list {
    scroll-snap-type: none !important;
  }
}