@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    min-width: 100%;
    z-index: 100;
    transform: translateY(-100%);
    transition: transform 0.25s ease;
    border-right: none;
    border-bottom: 1px solid var(--border);
    height: auto;
    max-height: 85dvh;
    overflow-y: auto;
  }
  .sidebar.open { transform: translateY(0); }
  .sidebar-overlay.show { display: block; }
  .mobile-header { display: flex; }

  .chat-input-area { padding: 8px 12px 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .chat-input { font-size: 16px; } /* Prevent iOS auto-zoom on focus */
  .chat-messages-inner { padding: 0 12px; }
  .message.user .message-body { max-width: 90%; }

  .context-bar { padding: 8px 12px; }

  .welcome-suggestions { gap: 6px; }
  .suggestion-chip { font-size: 12px; padding: 6px 10px; }

  .date-dropdown {
    min-width: 280px;
    max-width: calc(100vw - 24px);
  }

  .sidebar-tracks {
    max-height: 35vh;
  }
  .calendar-modal {
    min-width: auto;
    max-width: calc(100vw - 32px);
    padding: 16px;
  }
  .calendar-cell { min-height: 44px; }
  .calendar-cell-track { font-size: 7px; }

  /* Race card: hide kusk column in startlist on small screens */
  .race-card-view-start th:nth-child(4),
  .race-card-view-start td:nth-child(4) { display: none; }
  .race-card-table { font-size: 11px; }
  .race-card-table td { padding: 4px 6px; }

  /* Race card horse browser: compact sidebar */
  .race-card-numbar { width: 32px; }
  .race-card-numbar-item { padding: 6px 0; font-size: 11px; }

  /* Horse detail: full width */
  .horse-detail { width: 95vw; max-height: 90vh; }
  /* Hide kusk + tränare on mobile */
  .horse-detail-results th:nth-child(6),
  .horse-detail-results td:nth-child(6),
  .horse-detail-results th:nth-child(7),
  .horse-detail-results td:nth-child(7) { display: none; }
  .horse-detail-results { font-size: 11px; }

  /* Pedigree: smaller text */
  .ped-name { font-size: 10px; }
  .ped-record { font-size: 9px; }
  .ped-cell { padding: 4px 6px; }
  .ped-gen3 .ped-name { font-size: 9px; }

  /* Feed cards: compact padding */
  .feed-card-body { padding: 12px; }
  .feed-card-header { padding: 10px 12px; }

  /* Settings + Admin: full width */
  .settings-page, .admin-page { padding: 20px 12px; }
  .settings-title, .admin-title { font-size: 18px; }
  .admin-trigger-row { flex-direction: column; }
  .admin-trigger-save { width: 100%; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root { --sidebar-width: 240px; }
}