/* ═══════════════════════════════════════════════
   Mobile Polish v1 — 2026-05-13
   Финальные фиксы под все девайсы из /dev:
   - белый overscroll вокруг чата
   - Dynamic Island / notch top-padding
   - AI-кнопки не закрываются bottom-nav
   - чёрный фон body в светлой/тёмной теме (чтоб не выезжал белый)
   ═══════════════════════════════════════════════ */

/* === 1. Body / overscroll === */
html, body {
  overscroll-behavior: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* На мобиле под чатом — тот же фон что у chat-view, иначе overscroll даёт белую полоску */
@media (max-width: 768px) {
  html, body {
    background: #e6ebee !important;
  }
  [data-theme="dark"] html,
  [data-theme="dark"] body {
    background: #0e0e0e !important;
  }
  .app, .chat-view, .messages {
    background-color: #e6ebee !important;
  }
  [data-theme="dark"] .app,
  [data-theme="dark"] .chat-view,
  [data-theme="dark"] .messages {
    background-color: #0e0e0e !important;
  }
}

/* === 2. Safe-area top для Dynamic Island / notch === */
@media (max-width: 768px) {
  .login-shell, .public-invite,
  .sidebar-header, .chat-header,
  .cabinet-header, .header,
  header.app-header {
    padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
  }

  .chat-view > header,
  .chat-view > .chat-top,
  .chat-view > div:first-child {
    padding-top: max(8px, env(safe-area-inset-top, 0px));
  }
}

/* iOS landscape — notch слева/справа */
@media (max-width: 926px) and (orientation: landscape) {
  .sidebar-header, .chat-header, .cabinet-header {
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }
}

/* === 3. Composer и AI-row над bottom-nav === */
@media (max-width: 768px) {
  .chat-view .composer {
    position: sticky;
    bottom: 0;
    z-index: 50;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff !important;
  }
  [data-theme="dark"] .chat-view .composer {
    background: #1a1a1a !important;
  }

  .composer .ai-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    padding: 6px 10px 4px !important;
    background: #fff !important;
    border-top: 1px solid rgba(0,0,0,.06);
    margin: 0 !important;
  }
  [data-theme="dark"] .composer .ai-row {
    background: #1a1a1a !important;
    border-top-color: rgba(255,255,255,.06);
  }
  .composer .ai-row::-webkit-scrollbar { display: none; }
  .composer .ai-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
}

/* === 4. font-size 16px на input — анти-зум iOS === */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  textarea,
  select,
  .composer input,
  .composer textarea {
    font-size: 16px !important;
  }
}

/* === 5. Touch target 44px минимум === */
@media (max-width: 768px) {
  .btn,
  .back-btn,
  .cabinet-nav-item,
  .chat-item {
    min-height: 44px;
  }
}

/* === 6. Скрытие старого «AiTenderChat» текста в header на ≤480 === */
@media (max-width: 480px) {
  .app .sidebar .logo > div:not(.logo-icon),
  .app .sidebar-header .logo-text {
    display: none !important;
  }
}

/* === 7. iPad — компактный nav === */
@media (min-width: 768px) and (max-width: 1366px) {
  .cabinet-nav { width: 240px !important; }
  .cabinet-content { max-width: 720px; margin: 0 auto; }
}