/**
 * Адаптация Kunstbox для смартфонов
 * Touch-цели, safe-area, модалки на весь экран, типографика
 */

/* Интро-загрузчик: всегда на весь экран на мобильных */
@media (max-width: 768px) {
  #intro-loader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    min-height: 100vh;
  }
  #intro-loader .shader-container {
    min-height: 100dvh;
    min-height: 100vh;
  }
}

/* Уменьшить подсветку тапа на iOS/Android */
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}
.dark * {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.08);
}

/* Минимальные touch-цели для интерактивных элементов на маленьких экранах */
@media (max-width: 768px) {
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  button[type="submit"],
  a.btn-primary,
  a.btn-secondary {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
  }

  .input-field,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  textarea,
  select {
    min-height: 44px;
    font-size: 16px; /* предотвращает зум при фокусе на iOS */
  }
  textarea {
    min-height: 88px;
  }

  /* Карточки и контейнеры — отступы от краёв */
  .card {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Модалки и панели на весь экран на смартфонах */
@media (max-width: 640px) {
  [class*="modal"] .panel-inner,
  [class*="panel"] .panel-inner,
  .room-settings-panel .panel-inner,
  .invite-modal-panel .panel-inner,
  .reaction-picker-panel .panel-inner,
  .invite-modal-panel .invite-parallax-panel .panel-inner {
    max-width: 100% !important;
    max-height: 100vh !important;
    min-height: 100vh;
    min-height: 100dvh;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .room-settings-panel .panel-inner,
  .invite-modal-panel .panel-inner {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  /* Окно приглашения — контент прокручивается */
  .invite-modal-panel .panel-inner {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Safe-area: только верх навбара (вырез/чёлка). Горизонталь уже в base — safe-area-x */
@media (max-width: 768px) {
  nav.sticky {
    padding-top: env(safe-area-inset-top);
  }

  /* Мобильное меню — под навбаром с учётом выреза */
  #mobile-menu-backdrop,
  #mobile-menu-panel {
    top: calc(3.5rem + env(safe-area-inset-top));
  }
}
@media (min-width: 640px) and (max-width: 767px) {
  #mobile-menu-backdrop,
  #mobile-menu-panel {
    top: calc(4rem + env(safe-area-inset-top));
  }
}

/* Заголовки — читаемый размер на узких экранах */
@media (max-width: 480px) {
  h1 {
    font-size: 1.75rem;
    line-height: 1.25;
  }
  .text-4xl {
    font-size: 1.75rem;
  }
  .text-3xl {
    font-size: 1.5rem;
  }
}

/* Сетки — одна колонка на телефонах (только явные классы, без сложных селекторов) */
@media (max-width: 640px) {
  .grid-cols-2:not(.grid-cols-2-keep),
  .grid-cols-3 {
    grid-template-columns: 1fr;
  }
}

/* Кнопки в ряд — перенос на маленьких экранах */
@media (max-width: 640px) {
  .flex-wrap {
    gap: 0.5rem;
  }
}

/* Улучшение скролла на iOS */
.overflow-y-auto,
.overflow-auto {
  -webkit-overflow-scrolling: touch;
}

/* Кнопки в формах — на всю ширину на узких экранах (опционально) */
@media (max-width: 640px) {
  .card form .flex.gap-4 .btn-primary,
  .card form .flex.gap-4 .btn-secondary {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Карточки комнат — компактнее на телефонах */
@media (max-width: 640px) {
  .discussion-room-card .room-body h3 {
    font-size: 1.125rem;
  }
}

/* Masonry-сетка (дашборд, эксплорер) — меньше отступ на мобильных */
@media (max-width: 640px) {
  .masonry-grid {
    gap: 1rem;
  }
}

/* Футер — ссылки с минимальной областью нажатия */
@media (max-width: 768px) {
  footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0;
  }
}

/* Кнопки тулбара чата — touch-цели на мобильных */
@media (max-width: 640px) {
  .chat-toolbar-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Карточки комнат в списке — компактнее на телефонах */
@media (max-width: 640px) {
  .discussion-room-card {
    padding: 1rem;
  }
  .discussion-room-card .room-avatar {
    width: 48px;
    height: 48px;
  }
}

/* ——— Трейдинг (hub, кошелёк, P2P) ——— */
@media (max-width: 768px) {
  .trading-page .trading-btn-accent,
  .trading-page a.trading-btn-accent,
  .wallet-page .trading-btn-accent,
  .wallet-page a.trading-btn-accent,
  .trading-page .trading-card.px-4.py-2\.5,
  .wallet-page .trading-card.px-4.py-2\.5 {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
  }
  .trading-page #chart-container,
  .wallet-page #chart-container {
    height: 260px !important;
    min-height: 220px !important;
  }
  .trading-page .trading-bottom-row > *,
  .trading-page .chart-full-width .trading-bottom-row > * {
    min-width: 0 !important;
    width: 100%;
  }
  .trading-page .tab-btn {
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
  }
  .wallet-page .grid.grid-cols-2 > *,
  .trading-page .grid.grid-cols-2 > * {
    min-width: 0;
  }
}

/* Табы трейдинга: горизонтальный скролл на узких экранах */
@media (max-width: 640px) {
  .trading-page .flex.gap-6.border-b {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .trading-page .stat-card {
    padding: 0.75rem;
  }
  .trading-page .stat-card .text-xl {
    font-size: 1.25rem;
  }
}

/* Кошелёк: P2P и кнопки — touch-цели и перенос */
@media (max-width: 640px) {
  .wallet-page .flex.flex-wrap.gap-3 a,
  .wallet-page section .trading-card.px-4 {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .wallet-page .grid.grid-cols-2.lg\\:grid-cols-4 {
    gap: 0.75rem;
  }
  .wallet-page .grid.grid-cols-2.lg\\:grid-cols-4 .trading-card {
    padding: 0.75rem;
  }
}

/* Предложения обмена: список и детали — компактнее на телефонах */
@media (max-width: 640px) {
  .trading-page .py-6 {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
  }
}

/* Деталь предложения: карточки и стикеры */
@media (max-width: 640px) {
  .card.p-6 .grid.grid-cols-2.gap-3 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .card.p-6 .flex.items-center.justify-between {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .card.p-6 .flex.items-center.justify-between .flex.flex-wrap {
    justify-content: stretch;
  }
  .card.p-6 .flex.items-center.justify-between .flex.flex-wrap form {
    flex: 1;
    min-width: 0;
  }
  .card.p-6 .flex.items-center.justify-between .flex.flex-wrap .btn-primary,
  .card.p-6 .flex.items-center.justify-between .flex.flex-wrap .btn-secondary {
    width: 100%;
    min-height: 44px;
  }
}

/* Создание предложения: сетка стикеров уже на телефоне */
@media (max-width: 480px) {
  .trading-page .grid.grid-cols-3.sm\\:grid-cols-4.md\\:grid-cols-5 {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  .trading-page .max-h-64 {
    max-height: 12rem;
  }
}

/* Страница списка предложений */
@media (max-width: 640px) {
  .animate-slide-up.flex.flex-wrap.items-center.justify-between {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .animate-slide-up .btn-primary.whitespace-nowrap {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
}