/* ═══════════════════════════════════════════════════════════════════════════
   Kith — Mobile Layout Fixes
   Approach: scale and reflow to fit, never clip.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Fix 2 — Ensure key containers scale to fit viewport ───────────────── */
/* These are block/flex containers that must never exceed viewport width.    */
/* max-width: 100% on top of their existing max-width: 600px is a no-op on  */
/* desktop (600px wins) and a safety net on mobile (<600px viewport).        */

.page-content,
.profile-page,
.circle-page,
.circles-list-page,
.contact-card,
.reminder-card,
.reminder-sheet,
.modal-box,
.search-wrapper,
.search-results-panel {
  width: 100%;
  max-width: 100%;
}

/* ─── Fix 3 — Header always fully visible, never cut off ────────────────── */
.page-header,
header,
.app-header {
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* ─── Fix 1 — Bottom nav bar: always fixed, never scrolls away ──────────── */
#bottom-nav,
.bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  height: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* ─── Fix 1 — Page content clears the fixed nav bar ─────────────────────── */
/* Override main.css padding-bottom: 140px on #app with a tighter value     */
#app,
.page-container {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* ─── Fix 2 — Home screen must not force scroll when content is short ─────── */
/* main.css sets min-height: 100vh on #app which forces the page to always  */
/* be at least one viewport tall — causing unwanted scroll on sparse pages. */
#app {
  min-height: unset;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile-only overrides (≤ 768px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─── Fix 4 — Contact cards never cut off on the right ─────────────────── */
  .contact-card,
  .contact-row,
  .circle-list-card {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* ─── Fix 5 — Home screen circles row: scroll horizontally, never wrap ─── */
  /* Prevents mid-wrap overflow when chips exceed available row width.        */
  .pinned-circles {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Tighten side padding on narrow screens */
    padding-left: 12px;
    padding-right: 12px;
  }

  .pinned-circles::-webkit-scrollbar {
    display: none;
  }

  /* ─── Reminder card right column: allow it to shrink on very narrow screens */
  .rc-right {
    flex-shrink: 1;
  }

  /* ─── Reminder sheet: fix internal padding for narrow screens ─────────── */
  .reminder-sheet {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ─── Page sections: tighten horizontal padding slightly ─────────────── */
  .home-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ─── Prevent long text from overflowing flex containers ─────────────── */
  /* flex children default to min-width: auto which can exceed container    */
  .rc-left,
  .rc-text,
  .contact-info,
  .profile-section-text {
    min-width: 0;
  }

  /* ─── Input font size: prevent iOS Safari auto-zoom on focus ─────────── */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  /* ─── Circle visualization: scale down on narrow screens ─────────────── */
  .circle-viz-wrap {
    width: min(85vw, 300px);
    height: min(85vw, 300px);
  }

  /* ─── Filter pill rows: horizontal scroll instead of overflow ──────────── */
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .filter-bar::-webkit-scrollbar {
    display: none;
  }

  /* ─── Remove tap highlight ────────────────────────────────────────────── */
  * {
    -webkit-tap-highlight-color: transparent;
  }
}