/* ─────────────────────────────────────────────────────────────────────────
   App pubblica. Due regole che governano tutto il layout:

   1. si usa --vh, riempita da JS con viewportStableHeight di Telegram.
      100vh nel webview e sbagliata: comprende la barra che appare e scompare,
      e il feed "salterebbe" a ogni scroll.
   2. le safe area arrivano da Telegram come variabili CSS: senza, la barra in
      basso finisce sotto la tacca dei telefoni recenti.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --vh: 100dvh;
  --sa-top: var(--tg-safe-area-inset-top, 0px);
  --sa-bottom: var(--tg-safe-area-inset-bottom, 0px);
  --nav-h: 58px;
  --bg: #000;
  --tx: #f5f5f7;
  --tx2: #86868b;
  --blue: #2997ff;
  --r: 14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--tx);
  font: 500 14px/1.45 -apple-system, "SF Pro Text", Inter, system-ui, sans-serif;
  overscroll-behavior: none; }
body { height: var(--vh); overflow: hidden }

/* ── Barra in basso ───────────────────────────────────────────────────── */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: calc(var(--nav-h) + var(--sa-bottom));
  padding-bottom: var(--sa-bottom);
  display: flex; align-items: stretch;
  background: rgba(10,10,12,.92);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-top: 1px solid rgba(255,255,255,.08);
}
.nav button {
  flex: 1; background: none; border: none; color: var(--tx2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font: 600 10px/1 inherit; letter-spacing: .2px; cursor: pointer;
  transition: color .18s ease;
}
.nav button.on { color: var(--tx) }
.nav svg { width: 22px; height: 22px; stroke-width: 1.9 }

/* ── Viste ────────────────────────────────────────────────────────────── */
.vista { position: absolute; inset: 0; display: none }
.vista.on { display: block }

/* ── Explore ──────────────────────────────────────────────────────────── */
#v-explore { overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(var(--sa-top) + 14px) 12px calc(var(--nav-h) + var(--sa-bottom) + 20px); }
.testata { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 14px }
.testata h1 { font-size: 26px; font-weight: 800; letter-spacing: -.6px; margin: 0 }
.testata span { font-size: 12px; color: var(--tx2) }

.griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.scheda { position: relative; border-radius: var(--r); overflow: hidden;
  background: #141414; aspect-ratio: 3/4; cursor: pointer;
  transition: transform .15s ease }
.scheda:active { transform: scale(.98) }
.scheda img { width: 100%; height: 100%; object-fit: cover; display: block }
.scheda .velo { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.25) 38%, transparent 62%) }
.scheda .info { position: absolute; left: 10px; right: 10px; bottom: 9px }
.scheda .nome { display: flex; align-items: center; gap: 4px; min-width: 0;
  font-size: 15px; font-weight: 700; letter-spacing: -.2px;
  text-shadow: 0 1px 6px rgba(0,0,0,.6) }
.scheda .nome svg { flex: 0 0 auto }
.scheda .bio { font-size: 11px; color: rgba(255,255,255,.72); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.scheda .senza { position: absolute; inset: 0; display: grid; place-items: center;
  color: #2c2c2e; font-size: 32px; font-weight: 800 }

/* ── Reels ────────────────────────────────────────────────────────────── */
#v-reels { overflow: hidden }
.feed { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain }
.reel { position: relative; height: var(--vh); scroll-snap-align: start;
  scroll-snap-stop: always; background: #000; display: grid; place-items: center }
.reel video { width: 100%; height: 100%; object-fit: contain; background: #000 }
.reel .poster { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000 }
.reel .play { position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.25) }
.reel .play svg { width: 64px; height: 64px; filter: drop-shadow(0 2px 12px rgba(0,0,0,.6)) }
.reel .sotto { position: absolute; left: 14px; right: 84px;
  bottom: calc(var(--nav-h) + var(--sa-bottom) + 16px); z-index: 3 }
.reel .chi { display: inline-flex; align-items: center; gap: 5px;
  font-size: 16px; font-weight: 700; letter-spacing: -.2px; cursor: pointer;
  text-shadow: 0 1px 8px rgba(0,0,0,.7) }
.reel .av { cursor: pointer }
.reel .did { font-size: 12px; color: rgba(255,255,255,.8); margin-top: 3px;
  text-shadow: 0 1px 6px rgba(0,0,0,.7) }
.reel .lato { position: absolute; right: 12px;
  bottom: calc(var(--nav-h) + var(--sa-bottom) + 16px); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 14px }
.reel .av { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff;
  background: #222 center/cover no-repeat }

/* ── Pulsante scrivimi ────────────────────────────────────────────────── */
.cta { display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 18px; border: none; border-radius: 99px;
  background: linear-gradient(135deg, #2997ff, #0055b3); color: #fff;
  font: 700 14px inherit; cursor: pointer; margin-top: 10px;
  box-shadow: 0 4px 18px rgba(41,151,255,.35) }
.cta:active { transform: scale(.97) }
.cta[disabled] { background: #2c2c2e; box-shadow: none; opacity: .6 }

/* ── Stati ────────────────────────────────────────────────────────────── */
.stato { padding: 60px 24px; text-align: center; color: var(--tx2); font-size: 13px }
.stato h2 { color: var(--tx); font-size: 16px; font-weight: 700; margin: 0 0 6px }
.scheletro { background: linear-gradient(100deg, #141414 30%, #1c1c1e 50%, #141414 70%);
  background-size: 200% 100%; animation: sk 1.2s linear infinite; border-radius: var(--r);
  aspect-ratio: 3/4 }
@keyframes sk { to { background-position: -200% 0 } }
@media (prefers-reduced-motion: reduce) { .scheletro { animation: none } }

/* ── Profilo ──────────────────────────────────────────────────────────── */
#v-profilo { overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--nav-h) + var(--sa-bottom) + 20px) }

.p-cover { position: relative; height: 190px; background: #141414 center/cover no-repeat }
.p-cover::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), transparent 45%, #000) }
.p-back { position: absolute; z-index: 4; left: 12px; top: calc(var(--sa-top) + 12px);
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.45); backdrop-filter: blur(10px);
  color: #fff; display: grid; place-items: center; cursor: pointer }
.p-back svg { width: 19px; height: 19px }

.p-testa { position: relative; margin-top: -42px; padding: 0 16px; z-index: 2 }
.p-av { width: 84px; height: 84px; border-radius: 50%; border: 3px solid #000;
  background: #1c1c1e center/cover no-repeat; display: grid; place-items: center;
  font-size: 30px; font-weight: 800; color: #3a3a3c }
.p-nome { display: flex; align-items: center; gap: 5px; margin-top: 10px;
  font-size: 21px; font-weight: 800; letter-spacing: -.4px }
.p-nome svg { flex-shrink: 0 }
.p-num { font-size: 12px; color: var(--tx2); margin-top: 3px }
.p-bio { font-size: 13.5px; color: rgba(255,255,255,.82); margin-top: 9px;
  line-height: 1.5; max-width: 60ch }

.p-azioni { display: flex; gap: 9px; margin: 14px 16px 0 }
.p-azioni button { flex: 1; padding: 12px; border-radius: 12px; border: none;
  font: 700 14px inherit; cursor: pointer; transition: transform .12s ease }
.p-azioni button:active { transform: scale(.97) }
.p-segui { background: rgba(255,255,255,.10); color: var(--tx);
  border: 1px solid rgba(255,255,255,.14) !important }
.p-segui.on { background: rgba(255,255,255,.06); color: var(--tx2) }
.p-msg { background: linear-gradient(135deg, #2997ff, #0055b3); color: #fff;
  box-shadow: 0 4px 16px rgba(41,151,255,.32) }
.p-msg[disabled] { background: #2c2c2e; box-shadow: none; opacity: .55 }

.p-tab { display: flex; gap: 4px; margin: 18px 16px 12px;
  background: rgba(255,255,255,.05); border-radius: 11px; padding: 3px }
.p-tab button { flex: 1; padding: 8px; border: none; border-radius: 9px;
  background: none; color: var(--tx2); font: 600 13px inherit; cursor: pointer;
  transition: all .18s ease }
.p-tab button.on { background: rgba(255,255,255,.12); color: var(--tx) }

.p-griglia { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; padding: 0 3px }
.p-cella { position: relative; aspect-ratio: 1; background: #141414;
  border-radius: 4px; overflow: hidden; cursor: pointer }
.p-cella img { width: 100%; height: 100%; object-fit: cover; display: block }
.p-cella .durata { position: absolute; right: 5px; bottom: 4px; font-size: 10px;
  font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.8) }
.p-vuoto { grid-column: 1/-1; padding: 46px 20px; text-align: center;
  color: var(--tx2); font-size: 13px }

/* Visore a schermo intero per una foto */
.lente { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.96);
  display: none; place-items: center }
.lente.on { display: grid }
.lente img { max-width: 100%; max-height: 100%; object-fit: contain }
.lente button { position: absolute; top: calc(var(--sa-top) + 12px); right: 14px;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.14); color: #fff; font-size: 19px; cursor: pointer }