/* ══════════════════════════════════════════════════
   FIXES.CSS — Android compat, consistent modals,
   chef cards, create modal, event detail, instagram
   ══════════════════════════════════════════════════ */

/* ══ Android Chrome: remove backdrop-filter fallback ──
   backdrop-filter can cause blank headers on Android WebView */
@supports not (backdrop-filter: blur(1px)) {
  .topbar { background: var(--bg) !important; }
  .bottom-nav { background: var(--bg) !important; }
}

/* ══════════════════════════════════════════════════════
   MOBILE SHELL — iOS + Android consistent fixed layout
   All positioning matches what iOS renders natively.
══════════════════════════════════════════════════════ */

/* ── Topbar: fixed at top, GPU-composited ── */
.topbar {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 56px !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 14px !important;
  /* Solid background — reliable on ALL platforms */
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  /* GPU promote — eliminates Android scroll flicker */
  -webkit-transform: translate3d(0,0,0) !important;
  transform: translate3d(0,0,0) !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  will-change: auto !important;
}
/* Frosted glass only where reliably supported (iOS Safari, modern Chrome) */
@supports (backdrop-filter: blur(12px)) and (not (-webkit-touch-callout: none)) {
  /* This targets desktop Chrome/Edge — safe to blur */
}
@media (min-width: 768px) {
  /* Desktop: allow frosted glass — no risk of blank header */
  .topbar {
    background: rgba(var(--bg, #F5F0E8), 0.92) !important;
  }
}

/* ── Bottom nav: fixed at bottom, safe-area aware ── */
.bottom-nav {
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: stretch !important;
  background: var(--bg) !important;
  border-top: 1px solid var(--border-subtle) !important;
  /* Safe area: works on iOS notch + Android gesture bar */
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  /* GPU layer — same as topbar */
  -webkit-transform: translate3d(0,0,0) !important;
  transform: translate3d(0,0,0) !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  will-change: auto !important;
}

/* ── Screens: fill the space between topbar and bottom nav ── */
.screen {
  /* Mobile: position:fixed top:56px already clears the topbar — NO padding-top needed */
  /* Prevent Android pull-to-refresh from fighting the app */
  overscroll-behavior: none !important;
  -webkit-overflow-scrolling: touch;
}
.screen-home {
  /* No extra padding — #home-content handles its own scroll */
}

/* ── Topbar avatar ── */
.topbar-avatar {
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

/* ── Nav buttons: iOS-quality tap feedback on Android ── */
.nav-btn {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.nav-btn:active {
  opacity: 0.6 !important;
}

/* ── Remove Android blue tap flash from ALL interactive elements ── */
button, a, [onclick], [role="button"] {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

/* ══ Topbar avatar ── */
.topbar-avatar {
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  /* Consistent tap target across platforms */
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

/* ══ Nav buttons: consistent cross-platform tap feedback ── */
.nav-btn {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.nav-btn:active {
  opacity: 0.6 !important;
}

/* ══ All interactive elements: remove Android blue highlight ── */
button, a, [onclick], [role="button"] {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

/* ══ UNIVERSAL MODAL CLOSE BUTTON ══
   Consistent X on ALL overlays - 44×44px touch target */
.modal-close-btn {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--surface-2, rgba(0,0,0,0.08)) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  color: var(--text, #1a1714) !important;
  z-index: 10 !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background 0.15s !important;
  flex-shrink: 0 !important;
}
.modal-close-btn:active { background: var(--border, rgba(0,0,0,0.15)) !important; }
.modal-close-btn i { pointer-events: none; }

/* Map overlay close button override */
.map-modal-close {
  position: relative !important;
  top: auto !important;
  right: auto !important;
}

/* ══ R-SHEET shared styles ══ */
.r-sheet {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  /* DEFAULT = hidden below viewport. JS adds .open or sets inline transform for animation */
  transform: translateX(-50%) translateY(100%) !important;
  width: 100% !important;
  max-width: 430px !important;
  z-index: 500 !important;
  border-radius: 20px 20px 0 0 !important;
  background: var(--bg, #f4f0e8) !important;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.25) !important;
  /* Prevent any inherited green backgrounds */
  color: var(--text, #1a1714) !important;
  /* GPU-accelerate to avoid iOS repaint flash */
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  will-change: transform !important;
}
/* When the CSS class .open is used (restaurant-sheet) */
.r-sheet.open {
  transform: translateX(-50%) translateY(0) !important;
  transition: transform 0.32s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}
.r-sheet-inner {
  position: relative !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-height: 85vh !important;
  background: var(--bg, #f4f0e8) !important;
}
.r-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.5) !important;
  z-index: 499 !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* ══ CREATE MODAL ══ */
.create-modal-inner {
  padding-top: 8px;
}
.create-modal-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-top: 4px;
  color: var(--text);
}
.create-option-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.create-option-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
  border-radius: 0;
}
.create-option-btn:active { background: var(--surface-2); }
.create-option-btn:last-child { border-bottom: none; }
.create-option-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(26,92,58,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  color: var(--primary, #1A5C3A);
  flex-shrink: 0;
}
.create-option-icon.rec { background: rgba(201,168,76,0.12); color: var(--accent, #C9A84C); }
.create-option-icon.coll { background: rgba(88,86,214,0.1); color: #5856D6; }
.create-option-body { flex: 1; }
.create-option-name { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.create-option-desc { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.create-option-arrow { font-size: 0.9rem; color: var(--text-muted); flex-shrink: 0; }

/* ══ CHEF CARDS with photos ══ */
.comm-chef-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid var(--border-subtle);
  align-items: flex-start;
}
.comm-chef-photo {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--accent, #C9A84C);
}
.comm-chef-photo-placeholder {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary,#1A5C3A), var(--accent,#C9A84C));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
  border: 2px solid var(--accent, #C9A84C);
}

/* ══ EVENT DETAIL MODAL ══ */
.event-sheet .r-sheet-inner {
  max-height: 90vh !important;
  padding-bottom: 40px !important;
}
.event-detail-hero {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
.event-detail-body {
  padding: 20px 20px 0;
}
.event-detail-date-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.event-detail-badge {
  background: var(--primary, #1A5C3A);
  color: #fff;
  border-radius: 10px;
  padding: 6px 14px;
  text-align: center;
  flex-shrink: 0;
}
.event-detail-badge .edb-day { font-size: 1.4rem; font-weight: 700; line-height: 1; }
.event-detail-badge .edb-mon { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; }
.event-detail-info-row {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.event-detail-info-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; color: var(--text-sub);
}
.event-detail-title {
  font-family: var(--font-display,'Cormorant Garamond',serif);
  font-size: 1.5rem; font-weight: 700;
  line-height: 1.2; margin-bottom: 8px;
  color: var(--text);
}
.event-detail-rest {
  font-size: 0.85rem; color: var(--primary, #1A5C3A);
  font-weight: 600; margin-bottom: 12px;
}
.event-detail-desc {
  font-size: 0.88rem; color: var(--text-sub);
  line-height: 1.65; margin-bottom: 20px;
}
.event-detail-spots {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,69,58,0.1);
  color: #FF453A;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.78rem; font-weight: 700;
  margin-bottom: 20px;
}
.event-detail-spots.ok { background: rgba(26,92,58,0.1); color: var(--primary,#1A5C3A); }
.event-detail-reserve-btn {
  width: 100%;
  padding: 16px;
  background: var(--primary, #1A5C3A);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.event-detail-reserve-btn:active { opacity: 0.8; }
.event-detail-share-btn {
  width: 100%; margin-top: 10px;
  padding: 14px;
  background: transparent;
  border: 1px solid var(--border, rgba(26,92,58,0.2));
  border-radius: 14px;
  font-size: 0.88rem; font-weight: 600;
  color: var(--text-sub);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ══ INSTAGRAM SHARE MODAL ══ */
.insta-header {
  padding: 4px 20px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.insta-header-title {
  font-size: 1rem; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.insta-header-title i { color: #E1306C; font-size: 1.2rem; }
.insta-search-bar {
  margin: 12px 20px 0;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border-radius: 10px;
  padding: 10px 14px;
}
.insta-search-bar input {
  border: none; background: transparent;
  font-size: 0.9rem; color: var(--text); flex: 1;
  outline: none;
}
.insta-friends-section { padding: 12px 20px 0; }
.insta-section-label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 12px; }
.insta-friend-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.insta-friend-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.insta-friend-info { flex: 1; }
.insta-friend-name { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.insta-friend-handle { font-size: 0.75rem; color: var(--text-muted); }
.insta-send-btn {
  background: #E1306C; color: #fff;
  border: none; border-radius: 8px;
  padding: 8px 16px; font-size: 0.78rem; font-weight: 700;
  cursor: pointer; transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.insta-send-btn.sent { background: var(--surface-3); color: var(--text-muted); }
.insta-send-btn:active { opacity: 0.75; }
.insta-story-btn {
  margin: 16px 20px;
  width: calc(100% - 40px);
  padding: 14px;
  background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 0.9rem; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  -webkit-tap-highlight-color: transparent;
}

/* ══ COMMUNITY EVENTS ══ */
.comm-event-card {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.comm-event-card:active { opacity: 0.85; }

/* ══ SHEET HANDLE ══ */
.sheet-handle {
  width: 36px; height: 4px;
  background: var(--border, rgba(0,0,0,0.12));
  border-radius: 2px;
  margin: 10px auto 4px;
}

/* ══ iOS INPUT FIX (prevents zoom on focus) ══ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  font-size: 16px !important; /* prevents iOS zoom */
}

/* ══ ANDROID FONT RENDERING ══ */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ══ FOLLOW BUTTON LOADING STATE ══ */
.comm-follow-btn.loading { opacity: 0.6; pointer-events: none; }
.comm-follow-btn.following {
  background: var(--surface-2);
  color: var(--text-sub);
  border: 1px solid var(--border-subtle);
}

/* ══ TOPBAR AVATAR with photo ══ */
.topbar-avatar {
  overflow: hidden;
  padding: 0;
}

/* ══ DESKTOP improvements ══ */
@media (min-width: 768px) {
  /* Undo mobile-only fixed positioning for topbar */
  .topbar {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    padding: 0 24px !important;
    grid-column: 1 / -1;
    z-index: 100 !important;
  }

  /* Undo mobile-only fixed positioning for bottom-nav — becomes left sidebar */
  .bottom-nav {
    position: sticky !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: 56px !important;
    width: 240px !important;
    height: calc(100vh - 56px) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 16px 8px !important;
    padding-bottom: 16px !important;
    border-top: none !important;
    border-right: 1px solid var(--border-subtle) !important;
    transform: none !important;
    z-index: 50 !important;
    overflow-y: auto;
    align-self: start;
  }

  /* Undo mobile screen padding for fixed topbar */
  html {
    height: auto !important;
    overflow: auto !important;
    position: static !important;
  }
  .screen {
    padding-top: 0 !important;
    /* Override all the mobile position:fixed screen rules */
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    /* Grid placement */
    grid-column: 2;
    grid-row: 2;
    /* Padding for readability */
    padding-bottom: 48px !important;
  }
  .screen.active {
    display: block !important;
  }
  /* Discover is a full-height scroller — keep it contained */
  #screen-discover {
    position: static !important;
    top: auto !important;
    height: calc(100vh - 56px) !important;
    min-height: calc(100vh - 56px) !important;
    overflow: hidden !important;
    display: none;
  }
  #screen-discover.active {
    display: flex !important;
    flex-direction: column !important;
  }
  .screen-home {
    padding-top: 0 !important;
  }
  /* Home content doesn't need fixed height on desktop */
  #home-content {
    height: auto !important;
    overflow-y: visible !important;
  }
  .home-scroll {
    height: auto !important;
    overflow-y: visible !important;
  }
  /* Body and app shell must allow scrolling on desktop */
  body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: static !important;
    height: auto !important;
  }
  #app {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;
    grid-template-rows: auto 1fr !important;
    min-height: 100vh !important;
    overflow: visible !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    box-shadow: 0 0 0 1px var(--border-subtle) !important;
  }

  /* Nav buttons: horizontal sidebar items */
  .nav-btn {
    flex: none !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 11px 14px !important;
    border-radius: 10px !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    width: 100% !important;
  }
  .nav-btn i {
    font-size: 1.2rem !important;
    width: 20px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
  }
  .nav-btn span {
    font-size: 0.88rem !important;
    display: block !important;
  }
  .nav-btn.active {
    background: var(--surface) !important;
    color: var(--primary) !important;
  }
  .nav-btn:hover:not(.active) {
    background: rgba(0,0,0,0.04) !important;
    color: var(--text) !important;
  }
  /* Brand header above nav sidebar */
  .bottom-nav::before {
    content: 'Capital da Boa Mesa';
    display: block;
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    padding: 4px 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 8px;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
  }

  /* Restaurant detail sheet becomes a centered modal dialog */
  .r-sheet {
    bottom: auto !important;
    top: 50% !important;
    /* Hidden: off-screen below + centered horizontally */
    transform: translateX(-50%) translateY(calc(-50% + 60vh)) !important;
    border-radius: 20px !important;
    max-width: 560px !important;
    max-height: 88vh !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.35) !important;
  }
  .r-sheet.open {
    transform: translateX(-50%) translateY(-50%) !important;
    transition: transform 0.32s cubic-bezier(0.25,0.46,0.45,0.94) !important;
  }
  .r-sheet-inner { max-height: 88vh !important; }

}

/* ══ Phosphor icons fallback ══ */
.ph::before { display: inline-block; }

/* ══════════════════════════════════════════════════
   DESKTOP EXPERIENCE POLISH (768px+)
   Additional layout refinements for web app quality
══════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* Topbar: proper grid layout — avatar | title center | actions */
  .topbar {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 16px !important;
  }
  .topbar-city {
    justify-self: center;
    font-size: 1rem;
    /* Remove absolute centering — grid handles it */
    position: static !important;
    transform: none !important;
    left: auto !important;
  }
  .topbar-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Home content: constrain width for readability */
  #home-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
  }

  /* Brand strip on desktop: slightly more spacious */
  .home-brand-strip {
    padding: 12px 24px 12px 20px;
    border-radius: 0;
  }
  .home-brand-logo { width: 36px; height: 36px; }
  .home-brand-main { font-size: 1.4rem; }

  /* Hero banner: taller on desktop */
  .home-banner { height: 300px !important; }

  /* Horizontal scroll sections become proper grids */
  .h-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
    /* show scrollbar on desktop for affordance */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .h-scroll::-webkit-scrollbar { height: 4px; }
  .h-scroll::-webkit-scrollbar-track { background: transparent; }
  .h-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  /* Search screen: nice centered layout */
  .search-top {
    max-width: 760px;
    margin: 0 auto;
    padding: 20px 20px 0;
  }
  #search-results {
    max-width: 760px;
    margin: 0 auto;
  }

  /* Community screen: constrain width */
  #community-feed {
    max-width: 720px;
    margin: 0 auto;
  }

  /* Profile screen: center card */
  #screen-profile .scroll-content {
    max-width: 640px;
    margin: 0 auto;
  }

  /* Discover feed: contained column height */
  #screen-discover {
    height: calc(100vh - 56px) !important;
    min-height: calc(100vh - 56px) !important;
    overflow: hidden !important;
    position: static !important;
  }

  /* Backdrop covers full viewport */
  .r-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 499 !important;
  }

  /* Improve card hover states on desktop */
  .restaurant-card:hover,
  .must-eat-card:hover,
  .area-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  /* Better scrollbar for main content */
  body::-webkit-scrollbar { width: 6px; }
  body::-webkit-scrollbar-track { background: transparent; }
  body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  body::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
}

/* ══ ERROR MESSAGE for admin login ══ */
#admin-login-error {
  display: none;
  background: rgba(255,69,58,0.1);
  color: #FF453A;
  border: 1px solid rgba(255,69,58,0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  margin-top: 10px;
  text-align: center;
}

/* ══════════════════════════════════════════════════
   CROSS-PLATFORM SCROLL & OVERFLOW HARDENING
   Prevents Android horizontal ghost-scroll and
   ensures #home-content fills its container correctly.
══════════════════════════════════════════════════ */

/* Every screen: never allow horizontal overflow */
.screen {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Home content: match parent height exactly so it scrolls internally */
#home-content {
  min-height: 100% !important;
  overflow-x: hidden !important;
  /* Explicit padding-bottom so last card isn't cut off */
  padding-bottom: 24px !important;
}

/* Search, community, profile: a little bottom breathing room */
#screen-search,
#screen-community,
#screen-profile {
  padding-bottom: 16px !important;
}

/* Prevent any child from causing horizontal page overflow on Android */
#home-content > *,
#community-content > *,
#profile-content > *,
#search-results > * {
  max-width: 100%;
  overflow-x: hidden;
}

/* ── Toast: desktop adjusts to center viewport, not nav ── */
@media (min-width: 768px) {
  .toast {
    bottom: 32px !important;
  }
}