/* ==========================================================================
   NATIVE UX 2026 — Complete mobile-native layer
   Drop-in AFTER mosaic1.css + inline <style> blocks.
   ========================================================================== */

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --topbar-h: 54px;
  --tabbar-h: 56px;
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: .16s;
  --dur-norm: .28s;
}

/* ── 1. GLOBAL ──────────────────────────────────────────────────────────── */
*,*::before,*::after { -webkit-tap-highlight-color: transparent; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; overflow-x: hidden; }
body { overscroll-behavior-y: none; -webkit-overflow-scrolling: touch;
       min-height: 100dvh; min-height: -webkit-fill-available; }
:focus:not(:focus-visible) { outline: none !important; }

/* ── 2. FIX #1 — Hide env pill everywhere ───────────────────────────────── */
.topbar .env-pill, #envPill {
  display: none !important;
}

/* ── 3. TOPBAR — frosted glass, fixed ───────────────────────────────────── */
.topbar {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 10000 !important;
  height: var(--topbar-h);
  padding-top: var(--sat) !important;
  background: rgba(245, 243, 255, .72) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: .5px solid rgba(148,163,184,.18) !important;
  box-shadow: none !important;
  transition: background var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  box-sizing: border-box;
}
body.scrolled .topbar {
  background: rgba(245, 243, 255, .92) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.06) !important;
}
.topbar .brand {
  font-size: clamp(.82rem, .75rem + .3vw, .95rem) !important;
  letter-spacing: .06em !important;
}
.user-chip { transition: transform var(--dur-fast) var(--ease-spring); }
.user-chip:active { transform: scale(.95); }
.topbar-btn { transition: all var(--dur-fast) var(--ease-spring); }
.topbar-btn:active { transform: scale(.94); }

/* ── 4. PAGE — safe-area + topbar + tabbar padding ──────────────────────── */
.page {
  padding-top: calc(var(--sat) + var(--topbar-h) + var(--gap-3)) !important;
  padding-bottom: calc(var(--gap-4)) !important;
}
@media (max-width: 768px) {
  .page {
    padding-bottom: calc(var(--tabbar-h) + var(--sab) + var(--gap-3)) !important;
  }
}

/* ── 5. FIX #2 — Edge-to-edge mobile (2026 pattern) ──────────────── */
@media (max-width: 768px) {
  .page {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .ai-hero-inner {
    padding: 10px !important;
  }
  .section {
    padding: 10px !important;
    border-radius: 18px !important;
  }
  /* Tribe cards: tighter padding */
  .cluster-social .card.tribe {
    padding: 14px 12px !important;
    border-radius: 14px !important;
  }
  /* Marketplace cards */
  .cluster-market .card.bar {
    padding: 14px 12px !important;
    border-radius: 14px !important;
  }
  /* Grid gaps tighter */
  .cluster-grid {
    gap: 8px !important;
  }

  /* FIX #1 — Hide "neo future" brand on mobile */
  .topbar .brand {
    display: none !important;
  }

  /* FIX #2 — Subtitle: single line, no wrap */
  .ai-hero-sub {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* FIX #3 — Input: full width */
  .ai-hero-form {
    flex-direction: column !important;
  }
  .ai-hero-input {
    min-width: unset !important;
    width: 100% !important;
  }

  /* FIX #4 — Special suggestion card: compact horizontal layout */
  .ai-hero-suggestion--main {
    flex: unset !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    white-space: nowrap !important;
  }
  .ai-hero-suggestion--main .ai-hero-suggestion__shell {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .ai-hero-suggestion--main .ai-hero-suggestion__body {
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .ai-hero-suggestion--main .ai-hero-suggestion__title {
    font-size: 13px !important;
    text-align: left !important;
  }
  /* Hide the long meta description on mobile */
  .ai-hero-suggestion--main .ai-hero-suggestion__meta {
    display: none !important;
  }
  .ai-hero-suggestion--main .ai-hero-suggestion__icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* FIX #5 — Suggestion chips: prevent overflow */
  .ai-hero-suggestion {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .ai-hero-suggestion > span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .ai-hero-suggestions {
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

/* ── 6. FIX #3 — Interest panel (Amicizie/Crono/Viaggio) ───────────────── */
/* On mobile: full-width below the flags row, opaque background */
@media (max-width: 768px) {
  .hero .hero-flags {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 5;
  }
  .hero .ov-panel,
  .hero .of-panel {
    position: fixed !important;
    top: auto !important;
    bottom: calc(var(--tabbar-h) + var(--sab) + 12px) !important;
    left: 16px !important;
    right: 16px !important;
    z-index: 10030 !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.98) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 -4px 32px rgba(15,23,42,.15), 0 0 0 .5px rgba(148,163,184,.2) !important;
    padding: 10px 12px !important;
    justify-content: center !important;
    gap: 8px !important;
  }
}
/* Active interest pills: stronger contrast */
.ov-fav[data-active="true"] {
  background: linear-gradient(135deg, #4f46e5, #db2777) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(79,70,229,.35) !important;
}
.ov-fav[data-active="true"] .ov-fav-icon { color: #ffffff !important; }
.ov-fav[data-active="true"] .ov-fav-label { color: #ffffff !important; }
.ov-fav[data-active="true"]::after {
  content: "✓" !important;
  background: #ffffff !important;
  color: #4f46e5 !important;
  font-weight: 800 !important;
}
/* Non-active pills: clearer */
.ov-fav:not([data-active="true"]) {
  background: #ffffff !important;
  border: 1px solid rgba(148,163,184,.35) !important;
}

/* On touch: only focus-within opens panel (not sticky hover) */
@media (hover: none) and (pointer: coarse) {
  .hero .ov-acts:hover .ov-panel,
  .hero .of-acts:hover .of-panel {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .hero .ov-acts:focus-within .ov-panel,
  .hero .of-acts:focus-within .of-panel {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
}

/* ── 7. CARDS — press feedback ──────────────────────────────────────────── */
.card[data-modal] {
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.card[data-modal]:active { transform: scale(.98) !important; }
.hero .img { transition: transform .5s var(--ease-spring); }

/* ── 8. AI HERO — native inputs ─────────────────────────────────────────── */
.ai-hero-input {
  font-size: 16px !important;
  min-height: 48px;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.ai-hero-input:focus {
  border-color: rgba(99,102,241,.6) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
  outline: none;
}
.ai-hero-btn {
  min-height: 48px;
  transition: all var(--dur-fast) var(--ease-spring);
}
.ai-hero-btn:active { transform: scale(.96); opacity: .85; }
.ai-hero-suggestion {
  transition: background .12s ease-out, box-shadow .12s ease-out,
              transform .1s var(--ease-spring), border-color .12s ease-out;
}
.ai-hero-suggestion:active { transform: scale(.95) !important; }

/* ── 9. TRIBE + MARKET — press feedback ─────────────────────────────────── */
.cluster-social .card.tribe { transition: all var(--dur-fast) var(--ease-spring) !important; }
.cluster-social .card.tribe:active { transform: scale(.975) !important; }
.cluster-market .card.bar { transition: all var(--dur-fast) var(--ease-spring); }
.cluster-market .card.bar:active { transform: scale(.975); }

/* ── 10. MODAL — bottom sheet mobile / centered desktop ─────────────────── */
.modal[aria-hidden="false"], .modal:not([aria-hidden]), .modal[open] {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}
.modal {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 10050 !important;
  padding: 0 !important;
}
.modal .dialog {
  width: 100% !important; max-width: 620px !important;
  max-height: calc(100dvh - var(--sat) - 32px) !important;
  border-radius: 24px 24px 0 0 !important;
  animation: sheetUp var(--dur-norm) var(--ease-spring) both;
  overflow: hidden; display: flex; flex-direction: column;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.d-head::before {
  content: ""; display: block; width: 36px; height: 4px; border-radius: 99px;
  background: rgba(15,23,42,.18); margin: 8px auto 4px;
}
.d-body {
  overflow-y: auto !important; -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain; flex: 1;
  padding-bottom: calc(16px + var(--sab)) !important;
}
.d-close { transition: all var(--dur-fast) var(--ease-spring); }
.d-close:active { transform: scale(.94); }
@media (min-width: 769px) {
  .modal[aria-hidden="false"], .modal:not([aria-hidden]), .modal[open] {
    align-items: center !important; padding: var(--gap-3) !important;
  }
  .modal .dialog { border-radius: 24px !important; max-height: 88vh !important; animation-name: sheetCenter; }
  @keyframes sheetCenter { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  .d-head::before { display: none; }
  .d-body { padding-bottom: 16px !important; }
}

/* ── 11. AUTH — native inputs ───────────────────────────────────────────── */
.auth-input, input.auth-input, textarea.auth-input {
  font-size: 16px !important; min-height: 48px;
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.auth-input:focus { border-color: rgba(99,102,241,.55) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.10) !important; outline: none !important; }
.auth-submit { min-height: 50px; font-size: 16px !important;
  transition: all var(--dur-fast) var(--ease-spring); }
.auth-submit:active { transform: scale(.97); opacity: .85; }

/* ── 12. SIDEBAR ────────────────────────────────────────────────────────── */
.notif-sidebar, #sidebar {
  z-index: 10040 !important;
  transform: translateX(100%) !important;
  transition: transform .32s var(--ease-spring) !important;
  padding-top: calc(var(--sat) + 12px) !important;
  padding-bottom: var(--sab) !important;
}
.notif-sidebar.open, #sidebar.open { transform: translateX(0) !important; }

/* ── 13. CHRONO / WIZARD ────────────────────────────────────────────────── */
.card.chrono input, .wiz input {
  min-height: 48px; font-size: 16px !important;
  -webkit-appearance: none; appearance: none;
}
.card.chrono input:focus, .wiz input:focus {
  border-color: rgba(99,102,241,.55) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.10) !important; outline: none;
}

/* ── 14. GALLERY — snap scroll ──────────────────────────────────────────── */
.gallery .g-row { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gallery .g-row::-webkit-scrollbar { display: none; }
.gallery .g-row > * { scroll-snap-align: start; }

/* ── 15. SCROLLBAR (desktop) ────────────────────────────────────────────── */
@media (min-width: 769px) {
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.10); border-radius: 99px; }
}

/* ── 16. iOS ────────────────────────────────────────────────────────────── */
@supports (-webkit-touch-callout: none) { body { min-height: -webkit-fill-available; } }

/* ── 17. JS STATES ──────────────────────────────────────────────────────── */
.is-pressed { opacity: .8 !important; transform: scale(.97) !important; transition-duration: .06s !important; }

/* ── 18. RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 480px) { .cluster-grid-3 { grid-template-columns: 1fr !important; } }
@media (min-width: 1025px) {
  .topbar { padding-top: 0 !important; }
  .page { padding-top: calc(var(--topbar-h) + var(--gap-4)) !important; }
}

/* =========================================================================
   19. AI RESULTS — show above suggestions
   ========================================================================= */
#aiHero { display: flex !important; flex-direction: column !important; }
#aiHero > .ai-hero-title            { order: 1; }
#aiHero > .ai-hero-sub              { order: 2; }
#aiHero > .ai-hero-form             { order: 3; }
#aiHero > .ai-hero-results          { order: 4; width: 100%; }
#aiHero > .ai-suggestions-toggle    { order: 5; }
#aiHero > .ai-hero-suggestions-title { order: 6; }
#aiHero > .ai-hero-suggestions      { order: 7; }

#aiHero.has-results > .ai-hero-suggestions-title { display: none !important; }
#aiHero.has-results > .ai-hero-suggestions {
  max-height: 0 !important; overflow: hidden !important; opacity: 0 !important;
  margin: 0 !important; padding: 0 !important;
  transition: max-height .32s var(--ease-spring), opacity .24s ease;
}
#aiHero.has-results.show-suggestions > .ai-hero-suggestions {
  max-height: 800px !important; opacity: 1 !important; margin-top: 12px !important;
}
#aiHero.has-results > .ai-hero-results {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(148,163,184,.20);
}
.ai-hero-results:empty { margin: 0 !important; padding: 0 !important; border: none !important; }

/* Toggle button */
button.ai-suggestions-toggle {
  display: none !important;
  align-items: center !important; justify-content: center !important;
  gap: 6px !important; width: auto !important;
  margin: 14px auto 0 !important; padding: 9px 20px !important;
  border: 1px solid rgba(148,163,184,.32) !important; border-radius: 999px !important;
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
  color: rgba(15,23,42,.50) !important; font-family: inherit !important;
  font-size: 12px !important; font-weight: 650 !important;
  cursor: pointer !important; min-height: 38px !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.05) !important;
  transition: all .18s var(--ease-spring) !important;
  -webkit-appearance: none !important; appearance: none !important;
}
button.ai-suggestions-toggle:active { transform: scale(.95) !important; }
button.ai-suggestions-toggle .toggle-arrow {
  display: inline-block; transition: transform .24s var(--ease-spring); font-size: 10px;
}
#aiHero.has-results > button.ai-suggestions-toggle { display: inline-flex !important; }
#aiHero.has-results.show-suggestions > button.ai-suggestions-toggle .toggle-arrow {
  transform: rotate(180deg);
}

/* =========================================================================
   20. BOTTOM TAB BAR (mobile only)
   ========================================================================= */
@media (min-width: 769px) {
  .mr-tabbar { display: none !important; }
}

.mr-tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 10010;
  height: var(--tabbar-h);
  padding-bottom: var(--sab);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: .5px solid rgba(148,163,184,.20);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  box-shadow: 0 -2px 12px rgba(15,23,42,.04);
}

.mr-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 0;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  color: rgba(15,23,42,.38);
  transition: color .18s ease;
  position: relative;
  font-family: inherit;
}

.mr-tab-icon {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  transition: transform .18s var(--ease-spring);
}
.mr-tab-icon svg {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.mr-tab-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
}

/* Active state */
.mr-tab.active {
  color: #4f46e5;
}
.mr-tab.active .mr-tab-icon {
  transform: scale(1.08);
}
.mr-tab.active .mr-tab-icon svg {
  stroke-width: 2.2;
}
/* Active dot indicator */
.mr-tab.active::after {
  content: "";
  position: absolute;
  top: 2px;
  width: 4px; height: 4px;
  border-radius: 99px;
  background: #4f46e5;
}

/* Press feedback */
.mr-tab:active {
  opacity: .6;
}
.mr-tab:active .mr-tab-icon {
  transform: scale(.88);
}


/* =========================================================================
   21. TAB CONTENT — show/hide sections on mobile
   ========================================================================= */
@media (max-width: 768px) {

  /* By default hide everything that needs tab control */
  .page[data-tab] .ai-hero,
  .page[data-tab] .section .hdr,
  .page[data-tab] .mosaic-top,
  .page[data-tab] .cluster-social,
  .page[data-tab] .cluster-market,
  .page[data-tab] .gallery,
  .page[data-tab] #tabMyRace {
    display: none !important;
  }

  /* ── Tab: Esplora ── */
  .page[data-tab="explore"] .ai-hero       { display: block !important; }
  .page[data-tab="explore"] .section .hdr   { display: flex !important; }
  .page[data-tab="explore"] .mosaic-top     { display: grid !important; }
  .page[data-tab="explore"] .gallery        { display: block !important; }

  /* ── Tab: Community ── */
  .page[data-tab="community"] .cluster-social { display: flex !important; }
  /* Give it standalone padding since parent .section might be minimal */
  .page[data-tab="community"] .section { margin-top: 0; }

  /* ── Tab: Marketplace ── */
  .page[data-tab="market"] .cluster-market { display: flex !important; }
  .page[data-tab="market"] .section { margin-top: 0; }

  /* ── Tab: myRace ── */
  .page[data-tab="myrace"] #tabMyRace { display: block !important; }
  .page[data-tab="myrace"] .section { display: none !important; }
  .page[data-tab="myrace"] .ai-hero { display: none !important; }
  .page[data-tab="myrace"] .gallery { display: none !important; }

  /* Keep .section visible as wrapper for community/market but hide its chrome */
  .page[data-tab="community"] .section .hdr,
  .page[data-tab="market"] .section .hdr,
  .page[data-tab="community"] .mosaic-top,
  .page[data-tab="market"] .mosaic-top,
  .page[data-tab="community"] .cluster-market,
  .page[data-tab="market"] .cluster-social,
  .page[data-tab="community"] .gallery,
  .page[data-tab="market"] .gallery {
    display: none !important;
  }

  /* Section wrapper: reduce chrome when showing single tab */
  .page[data-tab="community"] .section,
  .page[data-tab="market"] .section {
    padding-top: 12px !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
  }
  .page[data-tab="community"] .section::after,
  .page[data-tab="market"] .section::after {
    display: none !important;
  }

  /* Mosaic wrapper: always visible but let children control */
  .page[data-tab] .mosaic {
    display: flex;
    flex-direction: column;
  }
}


/* =========================================================================
   22. myRace TAB CONTENT (injected by JS)
   ========================================================================= */
#tabMyRace {
  display: none;
  padding: 8px 0;
}

.myrace-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.myrace-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(148,163,184,.25);
  background: #f3f4f6;
}
.myrace-name {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ink, #0f172a);
  letter-spacing: -.02em;
}
.myrace-email {
  font-size: .82rem;
  color: var(--muted, #6b7280);
  margin-top: 2px;
}

.myrace-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.myrace-card {
  padding: 16px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(148,163,184,.20);
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
  cursor: pointer;
  transition: transform .14s var(--ease-spring), box-shadow .14s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.myrace-card:active {
  transform: scale(.97);
}
.myrace-card-icon {
  font-size: 22px;
  line-height: 1;
}
.myrace-card-title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink, #0f172a);
}
.myrace-card-desc {
  font-size: .76rem;
  color: var(--muted, #6b7280);
  line-height: 1.3;
}

/* Full-width action at bottom */
.myrace-action {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(148,163,184,.20);
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink, #0f172a);
  margin-bottom: 12px;
  transition: transform .14s var(--ease-spring);
  -webkit-appearance: none;
  appearance: none;
}
.myrace-action:active { transform: scale(.97); }
.myrace-action-sub {
  display: block;
  font-size: .76rem;
  font-weight: 500;
  color: var(--muted, #6b7280);
  margin-top: 2px;
}