/* Ads - compact for mobile grid */
.ad-card {
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
}

.ad-card__content {
  gap: 3px;
}

.ad-card__tag {
  font-size: 0.5rem;
  letter-spacing: 0.08em;
}

.ad-card__title {
  font-size: 0.75rem;
  line-height: 1.2;
}

.ad-card__subtitle {
  font-size: 0.6rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ad-card__ctaRow {
  font-size: 0.55rem;
  gap: 3px;
}

.ad-card__cta {
  padding: 3px 6px;
}

.ad-card__arrow {
  font-size: 0.6rem;
}

.ad-card__art {
  position: absolute;
  right: 8px;
  top: 8px;
  bottom: 8px;
  width: var(--ad-image-size, 45%);
  overflow: hidden;
  border-radius: 8px;
}

.ad-card__art .image-shell,
.ad-card__art img {
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
}

/* Brand header tweaks */
.brand-badge {
  width: 40px;
  height: 40px;
  border-radius: 14px;
}

.brand-title {
  font-size: 0.95rem;
}

/* Hide entire header on mobile - navigation is in bottom dashboard */
header {
  display: none !important;
}

/* ==========================================================================
   PREVENT VIEWPORT JUMP / WHITE FLASH ON INPUT FOCUS (iOS Safari)

   The visual viewport shrinks when focusing inputs or when the address bar
   collapses. Without proper coverage, the browser's default white background
   shows through. These rules ensure solid background coverage at all times.
   ========================================================================== */

/* Root elements: full viewport height, solid background, no overscroll bounce */
html,
body {
  background: #f8fafc !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: 100vh !important;
  height: 100dvh !important;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
  -webkit-overflow-scrolling: touch;
  margin: 0 !important;
  padding: 0 !important;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
body.dark-mode,
html.dark-mode,
html.dark-mode body {
  background: #0f172a !important;
}

body {
  /* Prevent body scroll - let inner containers scroll instead */
  overflow: hidden !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  padding-top: 0 !important;
}

/* Main scrollable container - this is where scrolling actually happens */
/* Extends from top edge (behind status bar) to bottom, content goes edge-to-edge */
main.container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
  background: #f8fafc !important;
  /* Padding for status bar/Dynamic Island - background extends behind it, content below it */
  padding-top: env(safe-area-inset-top, 44px) !important;
  /* Remove scroll padding that might be pushing content down */
  scroll-padding-top: 0 !important;
}

html[data-theme="dark"] main.container,
body.dark-mode main.container {
  background: #0f172a !important;
}

.brand-tagline {
  font-size: 0.7rem;
}

/* Mobile home page Trovelr title - dark mode support */
html[data-theme="dark"] .mobile-home-title,
body.dark-mode .mobile-home-title {
  color: #94a3b8 !important;
}

/* public/mobile.css */
/* Mobile-only tweaks. Desktop stays unchanged. */

/* Base readability & tap targets */
html,
body {
  font-size: 16px;
}

* {
  -webkit-text-size-adjust: 100%;
}

.container {
  padding: 12px;
}

/* Layout */
.grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

.split {
  flex-direction: column;
  gap: 12px;
}

.sidebar {
  width: 100%;
  max-width: 100%;
}

.row {
  flex-wrap: wrap;
}

/* allow wrapping where needed */

/* Inputs & buttons (global mobile defaults) */
input,
textarea,
select,
.btn {
  font-size: 16px;
  min-height: 44px;
  padding: 12px 14px;
  width: 100%;
}

/* =========================
   HEADER: compact controls
   ========================= */

/* 1) Keep nav inline with modern icon pills */
header nav.row {
  width: 100%;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 2px 0 6px;
  margin: 0 -4px;
  scrollbar-width: none;
}

header nav.row::-webkit-scrollbar {
  display: none;
}

header nav.row .btn {
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  font-size: 14px !important;
  font-weight: 600;
  padding: 8px 16px !important;
  min-height: 40px !important;
  border-radius: 999px !important;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

header nav.row .btn:not(.primary):hover {
  transform: translateY(-1px);
}

header nav.row .btn:active {
  transform: translateY(1px);
}

header nav.row .btn.primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  box-shadow: 0 18px 36px rgba(37, 99, 235, 0.32);
}

header nav.row .btn .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
  color: inherit;
  flex: 0 0 auto;
}

header nav.row .btn.primary .nav-icon {
  background: rgba(255, 255, 255, 0.25);
}

header nav.row .btn .nav-icon-svg {
  width: 16px;
  height: 16px;
}

header nav.row .btn .nav-label {
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

header nav.row .btn .nav-unread-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px #ffffff;
}

header nav.row .btn.primary .nav-unread-dot {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}

/* Bottom dashboard replaces header navigation on phones */
header nav.row {
  display: none !important;
}

/* 2) Auth area buttons (right side, includes Log out) - lighter pills */
header .container>.row:last-child .btn {
  width: auto !important;
  display: inline-flex;
  font-size: 13px !important;
  padding: 8px 12px !important;
  min-height: 34px !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

/* 3) Make Log out the SMALLEST (last button in that group) */
header .container>.row:last-child .btn:last-child {
  font-size: 12px !important;
  padding: 6px 12px !important;
  min-height: 32px !important;
  border-radius: 999px !important;
  opacity: .95;
}

/* Cards */
.card {
  border-radius: 20px;
}

.aspect {
  padding-top: 62%;
}

.card .row {
  gap: 8px;
}

.message {
  font-size: 15px;
  max-width: 92%;
}

/* Search & selects */
header input {
  min-width: 140px;
}

select {
  width: auto;
}

/* Lightbox (keep centered/contained on phones) */
.modal-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 95vw;
  max-height: 95vh;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
}

.modal-inner .image-shell {
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-inner img {
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.thumbs {
  -webkit-overflow-scrolling: touch;
}

.arrow {
  padding: 8px 12px;
}

/* Forms */
textarea {
  min-height: 100px;
}

/* Creation shortcuts */
.mobile-create-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 22px 44px rgba(15, 23, 42, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.18);
  margin-bottom: 18px;
}

.mobile-create-toggle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: #e2e8f0;
  border-radius: 999px;
  padding: 4px;
  overflow: hidden;
}

.mobile-create-toggle-track {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mobile-create-toggle-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transition: transform 180ms ease;
}

.mobile-create-toggle-btn {
  position: relative;
  z-index: 1;
  border: none;
  background: transparent;
  color: #1f2937;
  font-weight: 700;
  font-size: 15px;
  padding: 10px 0;
}

.mobile-create-toggle-btn.is-active {
  color: #ffffff;
}

.mobile-create-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.mobile-create-icon {
  flex: 1;
  border: none;
  background: #f1f5f9;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.mobile-create-icon:hover {
  background: rgba(37, 99, 235, 0.12);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.24);
}

.mobile-create-icon:active {
  transform: translateY(1px);
}

.mobile-create-icon-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-create-icon-shell svg {
  width: 28px;
  height: 28px;
}

/* Bottom navigation - extends to bottom edge */
.mobile-dashboard {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 14px;
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  z-index: 1200;
  min-height: 70px;
}

.mobile-dashboard__button {
  flex: 1;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  position: relative;
}

.mobile-dashboard__button.is-active {
  color: #1d4ed8;
}

.mobile-dashboard__icon {
  width: 30px;
  height: 30px;
  border-radius: 16px;
  background: rgba(37, 99, 235, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-dashboard__button.is-active .mobile-dashboard__icon {
  background: rgba(37, 99, 235, 0.22);
}

.mobile-dashboard__icon svg {
  width: 18px;
  height: 18px;
}


.mobile-dashboard__badge {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(16px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px #ffffff;
}

.mobile-dashboard__button.is-active .mobile-dashboard__badge {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.mobile-dashboard__label {
  line-height: 1.1;
}

main.container {
  padding-bottom: 140px;
  /* min-height handled by fixed positioning above */
}

label {
  font-weight: 600;
}

/* Keep content visible above mobile keyboards */
main {
  padding-bottom: 16px;
}

/* Nearby filter area tighter on mobile */
.nearby-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

.nearby-filter label {
  font-size: 14px;
  font-weight: 600;
}

.nearby-filter select {
  font-size: 14px;
  padding: 6px 8px;
  min-height: 32px;
  border-radius: 12px;
  width: auto;
}

/* ============================================================
   NEARBY (MOBILE): masonry style display of just images
   ============================================================ */
#tab-nearby .masonry,
[data-tab="nearby"] .masonry {
  column-count: 3;
  column-gap: 8px;
}

#tab-nearby .masonry-item,
[data-tab="nearby"] .masonry-item {
  break-inside: avoid;
  margin-bottom: 8px;
}

#tab-nearby .masonry .image-shell,
[data-tab="nearby"] .masonry .image-shell,
#tab-nearby .masonry img,
[data-tab="nearby"] .masonry img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

#tab-nearby .masonry .image-shell,
[data-tab="nearby"] .masonry .image-shell {
  overflow: hidden;
}

/* Modal for full listing */
.modal-inner.listing-modal {
  width: 90vw;
  max-width: 360px;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  position: relative;
}

.modal-inner.listing-modal .card {
  width: 100%;
  overflow: hidden;
}

.modal-inner.listing-modal .aspect {
  position: relative;
  padding-top: 56%;
  margin-bottom: 12px;
}

.modal-inner.listing-modal .aspect .image-shell {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
}

.modal-inner.listing-modal .aspect img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.modal-inner.listing-modal .card>div:last-child {
  position: relative;
  z-index: 10;
  padding: 12px;
}

/* Hide extra details ONLY in the image grid, not in the modal */
#tab-nearby .masonry .title,
#tab-nearby .masonry .description,
#tab-nearby .masonry .price,
#tab-nearby .masonry .distance,
[data-tab="nearby"] .masonry .title,
[data-tab="nearby"] .masonry .description,
[data-tab="nearby"] .masonry .price,
[data-tab="nearby"] .masonry .distance {
  display: none !important;
}

/* Tighten any Nearby filter/header spacing on mobile */
#tab-nearby .nearby-filter,
[data-tab="nearby"] .nearby-filter {
  gap: 6px;
  margin: 6px 0;
}

/* Make Lightbox sit above other modals (Nearby sheet, etc.) */
.modal.lightbox {
  z-index: 1000;
}

/* Global loading overlay (mobile also sees it) */
.global-loader {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  z-index: 2000;
  pointer-events: none;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #e5e7eb;
  border-top-color: #111;
  border-radius: 50%;
  animation: spin .9s linear infinite;
  margin: 8px auto;
}

.loader-text {
  font-weight: 700;
  color: #111;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Make clickable areas comfy but compact */
#tab-nearby a,
[data-tab="nearby"] a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, .05);
}

/* ---------- Reusable Masonry (Nearby + Listings) ---------- */
.masonry {
  column-count: 3;
  /* match Nearby */
  column-gap: 8px;
  /* match Nearby */
}

@media (min-width: 768px) {
  .masonry {
    column-count: 3;
  }
}

@media (min-width: 1024px) {
  .masonry {
    column-count: 4;
  }
}

.masonry-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 8px;
  display: block;
}

.masonry-item .card {
  width: 100%;
  display: inline-block;
  /* prevents spanning columns */
}

.masonry-item .image-shell,
.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
}

[data-tab="nearby"] .masonry {
  column-count: 3;
  column-gap: 8px;
}

#tab-nearby .masonry-item,
[data-tab="nearby"] .masonry-item {
  break-inside: avoid;
  margin-bottom: 8px;
}

#tab-nearby .masonry .image-shell,
[data-tab="nearby"] .masonry .image-shell,
#tab-nearby .masonry img,
[data-tab="nearby"] .masonry img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

#tab-nearby .masonry .image-shell,
[data-tab="nearby"] .masonry .image-shell {
  overflow: hidden;
}

/* Modal for full listing */
.modal-inner.listing-modal {
  width: 90vw;
  max-width: 360px;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  position: relative;
}

.modal-inner.listing-modal .card {
  width: 100%;
  overflow: hidden;
}

.modal-inner.listing-modal .aspect {
  position: relative;
  padding-top: 56%;
  margin-bottom: 12px;
}

.modal-inner.listing-modal .aspect .image-shell {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
}

.modal-inner.listing-modal .aspect img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.modal-inner.listing-modal .card>div:last-child {
  position: relative;
  z-index: 10;
  padding: 12px;
}

/* Hide extra details ONLY in the image grid, not in the modal */
#tab-nearby .masonry .title,
#tab-nearby .masonry .description,
#tab-nearby .masonry .price,
#tab-nearby .masonry .distance,
[data-tab="nearby"] .masonry .title,
[data-tab="nearby"] .masonry .description,
[data-tab="nearby"] .masonry .price,
[data-tab="nearby"] .masonry .distance {
  display: none !important;
}

/* Tighten any Nearby filter/header spacing on mobile */
#tab-nearby .nearby-filter,
[data-tab="nearby"] .nearby-filter {
  gap: 6px;
  margin: 6px 0;
}

/* Make Lightbox sit above other modals (Nearby sheet, etc.) */
.modal.lightbox {
  z-index: 1000;
}

/* Global loading overlay (mobile also sees it) */
.global-loader {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  z-index: 2000;
  pointer-events: none;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #e5e7eb;
  border-top-color: #111;
  border-radius: 50%;
  animation: spin .9s linear infinite;
  margin: 8px auto;
}

.loader-text {
  font-weight: 700;
  color: #111;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Make clickable areas comfy but compact */
#tab-nearby a,
[data-tab="nearby"] a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, .05);
}

/* ---------- Reusable Masonry (Nearby + Listings) ---------- */
.masonry {
  column-count: 3;
  /* match Nearby */
  column-gap: 8px;
  /* match Nearby */
}

@media (min-width: 768px) {
  .masonry {
    column-count: 3;
  }
}

@media (min-width: 1024px) {
  .masonry {
    column-count: 4;
  }
}

.masonry-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 8px;
  display: block;
}

.masonry-item .card {
  width: 100%;
  display: inline-block;
  /* prevents spanning columns */
}

.masonry-item .image-shell,
.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
}

.masonry-item .image-shell {
  overflow: hidden;
}

/* Protruding Plus Button */
.mobile-dashboard__plus-container {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;

  /* ============================================================
   NEARBY (MOBILE): masonry style display of just images
   ============================================================ */
  #tab-nearby .masonry,
  [data-tab="nearby"] .masonry {
    column-count: 3;
    column-gap: 8px;
  }

  #tab-nearby .masonry-item,
  [data-tab="nearby"] .masonry-item {
    break-inside: avoid;
    margin-bottom: 8px;
  }

  #tab-nearby .masonry .image-shell,
  [data-tab="nearby"] .masonry .image-shell,
  #tab-nearby .masonry img,
  [data-tab="nearby"] .masonry img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    cursor: pointer;
  }

  #tab-nearby .masonry .image-shell,
  [data-tab="nearby"] .masonry .image-shell {
    overflow: hidden;
  }

  /* Modal for full listing */
  .modal-inner.listing-modal {
    width: 90vw;
    max-width: 360px;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .modal-inner.listing-modal .card {
    width: 100%;
    overflow: hidden;
  }

  .modal-inner.listing-modal .aspect {
    position: relative;
    padding-top: 56%;
    margin-bottom: 12px;
  }

  .modal-inner.listing-modal .aspect .image-shell {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    overflow: hidden;
  }

  .modal-inner.listing-modal .aspect img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
  }

  .modal-inner.listing-modal .card>div:last-child {
    position: relative;
    z-index: 10;
    padding: 12px;
  }

  /* Hide extra details ONLY in the image grid, not in the modal */
  #tab-nearby .masonry .title,
  #tab-nearby .masonry .description,
  #tab-nearby .masonry .price,
  #tab-nearby .masonry .distance,
  [data-tab="nearby"] .masonry .title,
  [data-tab="nearby"] .masonry .description,
  [data-tab="nearby"] .masonry .price,
  [data-tab="nearby"] .masonry .distance {
    display: none !important;
  }

  /* Tighten any Nearby filter/header spacing on mobile */
  #tab-nearby .nearby-filter,
  [data-tab="nearby"] .nearby-filter {
    gap: 6px;
    margin: 6px 0;
  }

  /* Make Lightbox sit above other modals (Nearby sheet, etc.) */
  .modal.lightbox {
    z-index: 1000;
  }

  /* Global loading overlay (mobile also sees it) */
  .global-loader {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(2px);
    display: grid;
    place-items: center;
    z-index: 2000;
    pointer-events: none;
  }

  .spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e5e7eb;
    border-top-color: #111;
    border-radius: 50%;
    animation: spin .9s linear infinite;
    margin: 8px auto;
  }

  .loader-text {
    font-weight: 700;
    color: #111;
  }

  @keyframes spin {
    ```css transform: rotate(360deg);
  }
}

/* Make clickable areas comfy but compact */
#tab-nearby a,
[data-tab="nearby"] a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, .05);
}

/* ---------- Reusable Masonry (Nearby + Listings) ---------- */
.masonry {
  column-count: 3;
  /* match Nearby */
  column-gap: 8px;
  /* match Nearby */
}

@media (min-width: 768px) {
  .masonry {
    column-count: 3;
  }
}

@media (min-width: 1024px) {
  .masonry {
    column-count: 4;
  }
}

.masonry-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 8px;
  display: block;
}

.masonry-item .card {
  width: 100%;
  display: inline-block;
  /* prevents spanning columns */
}

.masonry-item .image-shell,
.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
}

.masonry-item .image-shell {
  overflow: hidden;
}


/* Fixed Mobile Dashboard - extends to bottom edge */
.mobile-dashboard {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 12px 12px 14px;
  z-index: 1000;
  min-height: 70px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Padding for content above bottom nav is handled by main.container padding-bottom */

/* Protruding Plus Button */
.mobile-dashboard__plus-container {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -32px;
  /* Protrude upwards (approx top quarter) */
  z-index: 10;
  flex-shrink: 0;
  /* Prevent squishing */
}

.mobile-dashboard__plus-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #2563eb;
  border: 6px solid #fff;
  /* Thicker white border for cutout effect */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.12);
  /* Enhanced shadow */
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s ease;
  flex-shrink: 0;
  /* Prevent squishing */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.mobile-dashboard__plus-btn:active {
  transform: scale(0.95);
}

.mobile-dashboard__plus-btn svg {
  width: 32px;
  height: 32px;
  stroke-width: 2.5;
  /* Slightly bolder icon */
}

/* ============================================================
   RESUME OVERLAY - Cute wake-up screen after background sleep
   ============================================================ */
.resume-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  pointer-events: all;
  opacity: 1;
  transition: opacity 0.35s ease-out;
}

.resume-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Calming blue border fade effect */
.resume-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 120px 60px rgba(96, 165, 250, 0.2),
    inset 0 0 200px 100px rgba(147, 197, 253, 0.12),
    inset 0 0 300px 150px rgba(191, 219, 254, 0.08);
  z-index: -1;
}

.resume-overlay__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 32px;
  text-align: center;
}

.resume-overlay__icon {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.resume-overlay__geometric {
  position: relative;
  width: 80px;
  height: 80px;
}

.resume-overlay__hexagon {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 2.5px solid;
  border-radius: 4px;
}

.resume-overlay__hexagon--outer {
  width: 70px;
  height: 70px;
  margin-left: -35px;
  margin-top: -35px;
  border-color: #2563eb;
  animation: hex-rotate 3s linear infinite, hex-pulse 1.5s ease-in-out infinite;
}

.resume-overlay__hexagon--middle {
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
  border-color: #3b82f6;
  animation: hex-rotate-reverse 2.5s linear infinite, hex-pulse 1.5s ease-in-out infinite 0.2s;
}

.resume-overlay__hexagon--inner {
  width: 30px;
  height: 30px;
  margin-left: -15px;
  margin-top: -15px;
  border-color: #60a5fa;
  animation: hex-rotate 2s linear infinite, hex-pulse 1.5s ease-in-out infinite 0.4s;
}

@keyframes hex-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes hex-rotate-reverse {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes hex-pulse {
  0%, 100% {
    opacity: 0.6;
    border-radius: 4px;
  }
  50% {
    opacity: 1;
    border-radius: 50%;
  }
}

.resume-overlay__text {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.resume-overlay__quote {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.1rem;
  font-style: italic;
  color: #475569;
  max-width: 280px;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  animation: quote-fade-in 0.8s ease-out 0.6s forwards;
}

@keyframes quote-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Messages panel mobile fixes */
.messages-panel {
  overflow: hidden !important;
}

/* Always hide desktop thread section on mobile - use portal instead */
.messages-panel > .messages-thread-shell {
  display: none !important;
}

/* When messages thread is visible, prevent parent scrolling */
body:has(.messages-thread-shell.show-on-mobile) {
  overflow: hidden !important;
}

/* DM Thread - full screen overlay on mobile, extends edge-to-edge */
.messages-thread-shell.show-on-mobile {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 12px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  background: #f8fafc !important;
  z-index: 9999 !important;
  overflow: hidden !important;
}

body.dark-mode .messages-thread-shell.show-on-mobile {
  background: #0f172a !important;
}

.messages-thread-shell.hide-on-mobile {
  display: none !important;
}

.messages-thread-shell textarea {
  min-height: 44px !important;
  height: 44px !important;
  max-height: 44px !important;
  resize: none !important;
  padding: 10px 12px !important;
}

/* Hide bottom tab bar when keyboard is open or modal is open */
body.keyboard-open .mobile-dashboard,
body.modal-open .mobile-dashboard {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* When keyboard is open, extend portal to full screen (tab bar is hidden) */
body.keyboard-open .mobile-messages-thread-portal {
  bottom: 0 !important;
}

/* When in DM view on mobile, always hide dashboard */
body:has(.mobile-messages-thread-portal) .mobile-dashboard {
  display: none !important;
}

/* Fix iOS input focus issues in messages */
.mobile-messages-thread-portal .message-composer input[type="text"] {
  font-size: 16px !important; /* Prevents iOS zoom on focus */
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

/* iOS keyboard handling - use env(keyboard-inset-height) when available */
@supports (padding-bottom: env(keyboard-inset-height)) {
  .mobile-messages-thread-portal {
    padding-bottom: calc(12px + env(keyboard-inset-height, 0px)) !important;
  }
}

/* DM conversation background - subtle diagonal lines */
.mobile-messages-thread-portal {
  background: #f8fafc repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 28px,
    rgba(148, 163, 184, 0.06) 28px,
    rgba(148, 163, 184, 0.06) 29px
  ) !important;
  padding-top: max(12px, env(safe-area-inset-top, 12px)) !important;
}

[data-theme="dark"] .mobile-messages-thread-portal,
html[data-theme="dark"] .mobile-messages-thread-portal {
  background: #1e293b repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 28px,
    rgba(100, 116, 139, 0.15) 28px,
    rgba(100, 116, 139, 0.15) 29px
  ) !important;
}

/* Messages content area - slightly translucent for layered feel */
.mobile-messages-thread-portal .messages-thread-content {
  background: transparent;
}

/* Back button header - subtle background, extends into status bar */
.mobile-messages-thread-portal .messages-thread-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin: 0 -12px 8px -12px !important;
  padding: 12px !important;
  padding-top: 12px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

[data-theme="dark"] .mobile-messages-thread-portal .messages-thread-header,
html[data-theme="dark"] .mobile-messages-thread-portal .messages-thread-header {
  background: rgba(15, 23, 42, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Composer area - frosted glass effect, extends to bottom edge */
.mobile-messages-thread-portal .message-composer-wrapper {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin: 0 -12px -12px -12px;
  padding: 10px 12px;
  padding-bottom: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .mobile-messages-thread-portal .message-composer-wrapper,
html[data-theme="dark"] .mobile-messages-thread-portal .message-composer-wrapper {
  background: rgba(15, 23, 42, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* When keyboard is open, remove bottom safe area from composer */
body.keyboard-open .mobile-messages-thread-portal .message-composer-wrapper {
  padding-bottom: 10px;
}