/* ============================================================
   Mobile responsive layout (max-width: 820px)
   The desktop layout is a 3-column flex (.content-area) with a
   hard min-width: 600px that forces horizontal scroll on phones.
   This sheet stacks the columns and lets them use the full width.
   ============================================================ */
@media (max-width: 820px) {
  .content-area {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
    padding: 0 10px;
    align-items: stretch !important;
  }
  .content-area.panel-right { flex-direction: column !important; }

  .left-panel,
  .right-panel {
    width: 100% !important;
    margin: 0 !important;
    max-height: none !important;
    position: static !important;
    overflow: visible !important;
  }

  .main-area {
    margin: 0 !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .search-module { padding: 0 10px; }
  .search-box { width: 100% !important; max-width: 100% !important; }
  .top-info-bar { flex-wrap: wrap; gap: 8px; }
  .engine-btns { flex-wrap: wrap; }

  /* Link cards: 3-up on tablets, wrap gracefully */
  .link-cards { justify-content: flex-start; }
  .link-card { flex: 1 1 calc(33.333% - 6px); min-width: 72px; max-width: none; }

  /* Quick-access / recent rows scroll horizontally instead of breaking */
  .left-panel .panel-body,
  .right-panel .panel-body { overflow-x: auto; }
}

@media (max-width: 480px) {
  .link-card { flex: 1 1 calc(50% - 6px); }
  .search-input-placeholder { font-size: 14px; }
  .category-title { font-size: 14px; }
}

/* Touch targets: ensure tappable areas are big enough on mobile */
@media (hover: none) and (pointer: coarse) {
  .link-card { min-height: 64px; }
  .recent-item, .cat-list-item { min-height: 40px; }
}