/* ═══════════════════════════════════════════════════════════
   PawBook — Mobile Responsive Overrides
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── TOPNAV ── */
  .topnav { padding: 0 12px !important; gap: 8px !important; height: 52px !important; }
  .topnav-search { display: none !important; }
  .topnav-tabs { gap: 0 !important; }
  .topnav-tab { width: 38px !important; height: 38px !important; font-size: 16px !important; }
  .topnav-logo { font-size: 15px !important; }
  .logo-icon { width: 28px !important; height: 28px !important; font-size: 14px !important; }
  .nav-avatar { width: 32px !important; height: 32px !important; font-size: 13px !important; }
  .nav-icon-btn { width: 32px !important; height: 32px !important; font-size: 16px !important; }

  /* ── STORIES — always horizontal scroll ── */
  .stories-row {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 10px 10px !important;
    gap: 8px !important;
  }
  .stories-row::-webkit-scrollbar { display: none !important; }
  .story-card {
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    width: 80px !important;
    height: 138px !important;
    border-radius: 10px !important;
  }
  .story-label { font-size: 10px !important; }

  /* ── COMPOSER ACTIONS — horizontal scroll ── */
  .composer-actions {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0 !important;
  }
  .composer-actions::-webkit-scrollbar { display: none !important; }
  .composer-action {
    flex-shrink: 0 !important;
    font-size: 11px !important;
    padding: 5px 8px !important;
    white-space: nowrap !important;
  }

  /* ── LAYOUT — single column ── */
  .home-layout, .feed-layout {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  .left-sidebar, .right-sidebar { display: none !important; }

  /* ── FEED CARDS — edge to edge ── */
  .card {
    border-radius: 0 !important;
    margin-bottom: 8px !important;
    border-left: none !important;
    border-right: none !important;
  }
  .post-header { padding: 10px 14px !important; }
  .post-text { font-size: 14px !important; padding: 4px 14px 8px !important; }
  .post-img-wrap img { max-height: 320px !important; }
  .post-stats { padding: 6px 14px !important; font-size: 12px !important; }
  .post-actions { padding: 2px 0 !important; gap: 0 !important; }
  .post-action { font-size: 12px !important; flex: 1 !important; justify-content: center !important; height: 38px !important; }

  /* ── MESSAGES ── */
  .msg-layout { grid-template-columns: 1fr !important; height: calc(100vh - 52px) !important; margin: 0 !important; padding: 0 !important; }
  .msg-list { display: none !important; }
  .chat-window { border-radius: 0 !important; border: none !important; height: calc(100vh - 52px) !important; }

  /* ── MARKETPLACE ── */
  .market-page { grid-template-columns: 1fr !important; padding: 0 10px !important; }
  .prod-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .prod-grid-wide { grid-template-columns: 1fr !important; }
  .promos { grid-template-columns: repeat(2,1fr) !important; }
  .market-filters, .market-sidebar { display: none !important; }
  .cart-drawer { width: 100% !important; }

  /* ── GROUPS ── */
  .groups-layout, .groups-page { grid-template-columns: 1fr !important; }
  .groups-sidebar { display: none !important; }
  .groups-grid { grid-template-columns: 1fr !important; }
  .group-card-big { flex-direction: column !important; }
  .group-body { grid-template-columns: 1fr !important; }
  .group-sidebar { display: none !important; }

  /* ── SETTINGS ── */
  .settings-page { grid-template-columns: 1fr !important; }
  .settings-nav { position: static !important; display: flex !important; overflow-x: auto !important; scrollbar-width: none !important; }
  .settings-nav::-webkit-scrollbar { display: none !important; }
  .sn-item { border-left: none !important; border-bottom: 3px solid transparent !important; white-space: nowrap !important; font-size: 12px !important; padding: 10px 12px !important; }
  .sn-item.active { border-left: none !important; border-bottom-color: var(--blue) !important; }
  .sn-section { display: none !important; }

  /* ── FILTER CHIPS — horizontal scroll ── */
  .filter-row, .filter-chips, .chips, .category-chips, .chip-row {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .filter-row::-webkit-scrollbar,
  .filter-chips::-webkit-scrollbar,
  .chips::-webkit-scrollbar { display: none !important; }
  .filter-chip, .chip { flex-shrink: 0 !important; }

  /* ── MODALS — slide up from bottom ── */
  .modal-overlay { align-items: flex-end !important; }
  .modal-box {
    width: 100% !important; max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    max-height: 92vh !important; overflow-y: auto !important;
  }

  /* ── BREEDS ── */
  .breed-grid, .grid { grid-template-columns: repeat(2,1fr) !important; }
  .dpanel, .detail-panel { width: 100% !important; }

  /* ── GALLERY ── */
  .album-grid { grid-template-columns: 1fr !important; }
  .photo-grid { grid-template-columns: repeat(3,1fr) !important; }

  /* ── PROFILE ── */
  .cover { height: 160px !important; }
  .profile-av { width: 80px !important; height: 80px !important; }
  .profile-av-wrap { margin-top: -40px !important; margin-left: 12px !important; }
  .tabs { overflow-x: auto !important; scrollbar-width: none !important; }
  .tabs::-webkit-scrollbar { display: none !important; }
  .tab { flex-shrink: 0 !important; white-space: nowrap !important; }
  .posts-grid, .photo-grid { grid-template-columns: repeat(3,1fr) !important; gap: 2px !important; }

  /* ── DISCOVER ── */
  .discover-layout { grid-template-columns: 1fr !important; }
  #map { height: 240px !important; }

  /* ── BUTTONS ── */
  .btn-lg { height: 44px !important; font-size: 14px !important; }
  .btn-full { width: 100% !important; }

  /* ── FAB above bottom nav ── */
  .create-btn, .fab { bottom: 74px !important; }

  /* ── INPUTS — prevent iOS zoom ── */
  input, textarea, select { font-size: 16px !important; }

  /* ── BOTTOM NAV ── */
  .bottom-nav, .bnav { display: flex !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; }
}

/* ── SMALL PHONES (≤390px) ── */
@media (max-width: 390px) {
  .story-card { width: 72px !important; height: 124px !important; }
  .topnav-tab { width: 34px !important; height: 34px !important; font-size: 14px !important; }
  .prod-grid { grid-template-columns: 1fr !important; }
  .post-action i + * { display: none !important; }
}

/* ── TABLET (769–1024px) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .home-layout { grid-template-columns: 1fr 240px !important; }
  .left-sidebar { display: none !important; }
  .market-page { grid-template-columns: 1fr 220px !important; }
  .settings-page { grid-template-columns: 200px 1fr !important; }
  .msg-layout { grid-template-columns: 280px 1fr !important; }
  .breed-grid, .grid { grid-template-columns: repeat(3,1fr) !important; }
}

/* ── SAFE AREA (iPhone notch) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav, .bnav {
    padding-bottom: env(safe-area-inset-bottom) !important;
    height: calc(56px + env(safe-area-inset-bottom)) !important;
  }
}

/* ── TOUCH IMPROVEMENTS ── */
@media (hover: none) {
  .btn, button, .card { -webkit-tap-highlight-color: transparent; }
}