html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  height: 100%;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
  }

:root{
  --bg1:#120018;
  --bg2:#1a0030;
  --card:#16061f;
  --line:rgba(255,255,255,.08);
  --text:#f4eefc;
  --muted:rgba(244,238,252,.86);


  --p1:#8a2be2;    /* purple */
  --p2:#ff2d55;    /* red/pink */
  --like:#37d67a;
  --nope:#ff4b6b;

  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --r: 22px;
  --app-h: 100dvh; /* реальная высота viewport (обновляется в app.js) */
  }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: url('/back.png') center/cover no-repeat;
  overflow: hidden; /* важно: общий скролл выключен навсегда */
  overflow-x:hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  }

/* каждая вкладка = свой скролл-контейнер */
.tab{
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  }
/* =========================
   ANDROID FIX: chat scroll
   =========================
   В Telegram Android WebView вложенный overflow-контейнер (#messages)
   часто не получает жест прокрутки, если родитель (.tab) тоже scrollable.
   В режиме диалога отключаем прокрутку у #tab-chats и явно разрешаем pan-y
   для #messages.
*/
body.in-chat #tab-chats{
  overflow: hidden !important;
}

body.in-chat #messages{
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* FEED: учитываем закреплённые actions + tabbar, чтобы контент не уезжал под них */
#tab-feed{
  padding-bottom: calc(var(--actions-h) + var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
  }

.bg{
  position:fixed; inset:0;
  background:
  linear-gradient(160deg, rgba(18,0,24,.45), rgba(26,0,48,.45));
  pointer-events:none;
  }



.top{
  position:sticky; top:0; z-index:10;
  padding: 14px 14px 10px;
  display:flex; justify-content:space-between; align-items:center;
  backdrop-filter: blur(10px);
  background: rgba(10, 0, 16, .35);
  border-bottom:1px solid var(--line);
  }

.brand-btn{
  display:flex;
  align-items:center;
  gap:10px;
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.brand-btn:active{ transform: scale(.98); }

.brand{font-weight:900; letter-spacing:.3px}
.pill{
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-size:12px;
  }

.wrap{
  max-width: 560px;
  margin: 0 auto;
  height: calc(var(--app-h, 100dvh) - 64px);
  overflow: hidden;
  overscroll-behavior: none;
  padding: 14px 14px calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  }

/* ---- fix iOS keyboard in chat: when keyboard open, allow full dvh ---- */
body.keyboard-open.in-chat .wrap{
  height: 100dvh !important;
}

.tab{display:block}

.stack{
  position: relative;
  height: clamp(360px, 84dvh, 820px);
  max-height: 880px;
  min-height: 360px;


  /* чтобы фиксированные actions никогда не перекрывали карточку/empty */
  padding-bottom: var(--actions-gap, 0px);
}



.card{
  position:absolute; inset: 0 0 var(--actions-gap, 0px) 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow:hidden;
  touch-action: pan-y;
  user-select:none;
  }

.card-photo{
  position:relative;
  height: 64%; /*фото зона карточки*/
  overflow: hidden;
  background: linear-gradient(135deg, rgba(138,43,226,.35), rgba(255,45,85,.25));
  border-bottom:1px solid var(--line);
  }

.card-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: contain;
  object-position: center;
  opacity: .95;
  }


.card-grad{
  position:absolute; inset:0;
  background: radial-gradient(900px 400px at 30% 20%, rgba(138,43,226,.35), transparent 55%),
  radial-gradient(800px 420px at 80% 30%, rgba(255,45,85,.25), transparent 55%),
  linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55));
  pointer-events: none;
  }
.card-dots{
  pointer-events: none;
  }
.badge{
  position:absolute; left:12px; top:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  font-size:12px;
  color:var(--muted);
  }

.card-body{
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px 14px 14px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  }

/* subtle report button (top-right on photo) */
.reportbtn{
  position:absolute;
  top:10px;
  right:10px;
  z-index:6;
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  color:rgba(255,255,255,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  backdrop-filter: blur(8px);
  cursor: pointer;
  pointer-events: auto;

}
.reportbtn:active{
  transform: scale(.98);
}

.title{
  font-size: 22px;
  font-weight: 900;
  letter-spacing:.2px;
  }

.meta{
  color:var(--muted);
  font-size:13px;
  white-space: pre-line; /* разрешаем перенос строки через \n */
  line-height: 1.2;
}

/* goals pills (premium-like) */
.goals{
  display:flex;
  flex-wrap:nowrap;
  overflow:hidden;
  gap:6px;          /* было 8px */
  margin-top:6px;   /* было 8px */
}

.goal-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:5px 8px;          /* было 7px 10px */
  border-radius:999px;
  font-size:12px;           /* было 13px */
  line-height:1;
  color:#f3f4f6;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  box-shadow: 0 4px 12px rgba(0,0,0,.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  user-select:none;
  pointer-events:none;
  white-space:nowrap;
}

/* ===== Luxury blocks (Registration / Profile edit goals) ===== */
.lux-section{
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

.lux-label{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}

.lux-required{
  font-weight: 700;
  opacity: .75;
}

.lux-hint{
  margin-top: 8px;
  font-size: 12px;
  opacity: .75;
}

.goal-grid{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.goal-chip{
  position: relative;
  display: block;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.goal-chip input{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.goal-chip-inner{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  transition: transform 120ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.goal-chip:hover .goal-chip-inner{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
}

.goal-chip:active .goal-chip-inner{
  transform: scale(.99);
}

.goal-chip input:checked + .goal-chip-inner{
  border-color: rgba(255,255,255,.26);
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  box-shadow: 0 10px 26px rgba(23, 158, 211, 0.753);
}

.goal-emoji{
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}


/* subtle per-goal accents (без навязчивых цветов) */
.goal-pill.goal-chat{
  background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(59,130,246,.08));
  border-color: rgba(59,130,246,.35);
  box-shadow: 0 4px 14px rgba(59,130,246,.18);
}

.goal-pill.goal-friend{
  background: linear-gradient(135deg, rgba(20,184,166,.18), rgba(20,184,166,.08));
  border-color: rgba(20,184,166,.35);
  box-shadow: 0 4px 14px rgba(20,184,166,.18);
}

.goal-pill.goal-rel{
  background: linear-gradient(135deg, rgba(244,63,94,.18), rgba(244,63,94,.08));
  border-color: rgba(244,63,94,.35);
  box-shadow: 0 4px 14px rgba(244,63,94,.18);
}

.goal-pill.goal-flirt{
  background: linear-gradient(135deg, rgba(249,115,22,.20), rgba(249,115,22,.10));
  border-color: rgba(249,115,22,.40);
  box-shadow: 0 4px 14px rgba(249,115,22,.20);
}


.desc{
  font-size:14px;
  color:#d1d5db;
  max-height:100px;
  overflow:hidden; /* вместо auto */
  position:relative;
}

/* внутренний контейнер для автоскролла */
.desc-inner{
  display:block;
  will-change: transform;
}

/* включение автоскролла */
.desc.autoscroll .desc-inner{
  animation-name: descScroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--scroll-duration, 10s);
}

/* separator between repeated description blocks (for seamless loop) */
.desc-sep{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 0;
  color: rgba(255,255,255,.45);
  font-size:12px;
  letter-spacing: 6px;
}

/* ключевые кадры прокрутки */
@keyframes descScroll{
  0%{
    transform: translateY(0);
  }
  8%{
    transform: translateY(0); /* короткая пауза в начале */
  }
  92%{
    transform: translateY(calc(-1 * var(--scroll-distance)));
  }
  100%{
    transform: translateY(calc(-1 * var(--scroll-distance))); /* пауза на "копии" текста */
  }
}


.stamp{
  position:absolute;
  top: 18px;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .8px;
  border: 3px solid;
  transform: rotate(-12deg);
  opacity: 0;
  pointer-events:none;
  }

.stamp.like{left:16px; color:var(--like); border-color:var(--like);}
.stamp.nope{right:16px; color:var(--nope); border-color:var(--nope); transform: rotate(12deg);}

:root{
  --actions-h: 120px; /* высота зоны кнопок (под твои 96x96) */
  --actions-gap: calc(var(--actions-h) + 4px);
  }

/* FEED: резервируем место под закреплённые кнопки + tabbar */
#tab-feed{
  padding-bottom: calc(var(--actions-h) + var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
  }

/* Закрепляем actions над tabbar */
.actions{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) - 10px);

  width: min(560px, calc(100% - 28px)); /* влезает в любое окно */
  height: var(--actions-h);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  margin: 0;         /* важно: убираем margin-top из потока */
  padding: 0;        /* padding-bottom больше не нужен */
  z-index: 9998;     /* выше карточки, ниже сплеша */

  pointer-events: auto;
  }

/* ===== Desktop/PC: чуть шире и стабильнее раскладка ===== */
@media (min-width: 900px) and (hover:hover) {
  .wrap{ max-width: 860px; }
  .actions{ width: min(860px, calc(100% - 28px)); }
  .tabbar{ max-width: 820px; }
  .stack{ max-height: 760px; }
}


.fab{
  width: 58px; height: 58px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.20);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  font-size: 22px;
  cursor:pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  }
/* Undo button (MiniApp) */
.fab.undo{ font-size:14px; }

.fab.like{background: linear-gradient(135deg, rgba(55,214,122,.22), rgba(55,214,122,.12));}
.fab.nope{background: linear-gradient(135deg, rgba(255,75,107,.22), rgba(255,75,107,.12));}
.fab.skip{background: linear-gradient(135deg, rgba(138,43,226,.18), rgba(255,45,85,.10));}

.note{
  margin-top: 12px;
  padding: 10px 12px;
  border:1px dashed var(--line);
  border-radius: 14px;
  color: var(--muted);
  font-size: 13px;
  }

.panel{
  background: rgba(0,0,0,.58);
  border:1px solid rgba(255,255,255,.14);
  border-radius: var(--r);
  padding: 14px;
  box-shadow: 0 14px 46px rgba(0,0,0,.55);
  margin-bottom: 12px;
  backdrop-filter: blur(10px);
  }


h2{
  margin:0 0 10px;
  font-size:18px;
  text-shadow: 0 2px 8px rgba(0,0,0,.85);
  }


.field{display:block; margin-bottom: 10px}
.field span{display:block; color:var(--muted); font-size:12px; margin-bottom:6px}
.field small{display:block; margin-top:6px; color:var(--muted); font-size:12px}

input,select,textarea{
  width:100%;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline:none;
  }

.row{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}

.btn{
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.48);
  color: var(--text);
  cursor:pointer;
  backdrop-filter: blur(10px);
  }


.btn.primary{
  border-color: transparent;
  background: linear-gradient(135deg, rgba(138,43,226,.85), rgba(255,45,85,.70));
  font-weight: 900;
  }

.photos{display:flex; flex-direction:column; gap:10px}
.photo-item{
  display:flex; justify-content:space-between; gap:10px;
  align-items: center;
  border:1px solid var(--line);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(0,0,0,.20);
  }

.photo-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
  }

.photo-thumb{
  width: 84px;
  height: 84px;
  max-width: 84px;
  max-height: 84px;
  border-radius: 14px;
  object-fit: cover;
  flex: 0 0 auto;
  display:block;
  }

@media (max-width: 420px){
  .photo-thumb{
    width: 72px;
    height: 72px;
    max-width: 72px;
    max-height: 72px;
    }
  }

.navbtn{
  flex:1;
  padding: 14px 10px;
  font-size: 14px;
  background: transparent;
  color: var(--muted);
  border:none;
  font-weight: 800;
  cursor:pointer;
  }

.navbtn.active{color: var(--text)}
.empty{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap: 10px;
  text-align:center;
  border-radius: var(--r);
  border:1px dashed var(--line);
  background: rgba(0,0,0,.10);
  }
.empty-title{font-weight: 900; font-size: 20px}
.empty-sub{color:var(--muted); font-size: 13px; max-width: 320px}

/* -------- Empty actions layout -------- */
.empty-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:12px;
  }

/* -------- Skeleton/loading for card -------- */
@keyframes skmove {
  0% { transform: translateX(-60%); }
  100% { transform: translateX(160%); }
  }

/* вместо полного скрытия фото — оставляем место и рисуем skeleton */
.card.loading .card-img{
  opacity: 0 !important;        /* img не видно */
  pointer-events: none;
}

.card.loading .card-photo{
  position: relative;
  overflow: hidden;
}

.card.loading .card-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transform: translateX(-60%);
  animation: skmove 1.1s infinite;
}

.card.loading .card-photo{
  background: rgba(255,255,255,.08);
}

.card.loading .title,
.card.loading .meta,
.card.loading .desc{
  color: transparent !important;
  background: rgba(255,255,255,.08);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  min-height: 18px;
  }

.card.loading .title{ min-height: 26px; }
.card.loading .desc{ min-height: 56px; }

.card.loading .title::after,
.card.loading .meta::after,
.card.loading .desc::after{
  content:"";
  position:absolute;
  top:0; left:0; height:100%; width:60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transform: translateX(-60%);
  animation: skmove 1.1s infinite;
  }

/* -------- Placeholders -------- */
.is-placeholder{
  opacity: .85;
  }

/* -------- Chats list UI -------- */
.chatlist{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
  }

.chatitem{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:16px;
  position: relative; /* чтобы unreadbadge позиционировался внутри */
  padding-right: 12px; /* резерв под unreadbadge справа */
  background: rgba(255,255,255,.06);
  box-shadow: 0 6px 22px rgba(0,0,0,.25);
  }

.chatdivider{
  margin: 8px 2px 2px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  text-align: center;
  font-size: 13px;
  opacity: .85;
  letter-spacing: .2px;
  }


.chatava{
  width:54px;
  height:54px;
  border-radius:16px;
  overflow:hidden;
  flex: 0 0 54px;
  background: rgba(255,255,255,.08);
  position:relative;
  }

.chatava img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  }

.chatbody{
  min-width:0;
  flex:1;
  }

.chatname{
  font-size:16px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  }

.chatmeta{
  opacity:.8;
  font-size:13px;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  }

.chatbtns{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:0 0 auto;
  }

.chatbtn{
  border:0;
  border-radius:14px;
  padding:10px 12px;
  font-weight:700;
  }

.chatbtn.primary{
  background: rgba(255,255,255,.14);
  }

/* -------- Chat view -------- */
.chatview{
  display:flex;
  flex-direction:column;
  }

.chathead{
  font-weight:800;
  opacity:.9;
  max-width:50vw;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  }


.msg{
  display:flex;
  margin:8px 0;
  }

.bubble{
  max-width: 78%;
  padding:10px 12px;
  border-radius:16px;
  background: rgba(255,255,255,.10);
  white-space: pre-wrap;
  word-break: break-word;
  }

.msg.me{ justify-content:flex-end; }
.msg.me .bubble{ background: rgba(255,255,255,.18); }

/* Disable text selection on mobile during long-press to avoid native word selection */
.no-select, .no-select *{
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.mtime{
  font-size:11px;
  opacity:.7;
  margin-top:4px;

  text-align: right;
  white-space: nowrap;
  }

.composer{
  display:flex;
  gap:10px;
  align-items:center;
  }
/* Voice recording cancel UI */
.voice-wrap{
  position: relative;
  display: inline-flex;
}

.btn.danger{
  border-color: rgba(255,45,85,.45);
  background: rgba(255,45,85,.18);
  font-weight: 800;
}

.voice-cancel-btn{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 52px; /* над кнопкой 🎤 */
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

/* Chat composer attachments */
.composer .btn.attach{
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.composer .btn.attach.recording{
  outline: 2px solid rgba(255,45,85,.55);
}

.input{
  flex:1;
  border:0;
  border-radius:14px;
  padding:12px 12px;
  background: rgba(255,255,255,.08);
  color: inherit;
  outline: none;
  }

.adv{
  margin-top: 10px;
  border: 1px solid var(--line);

  background: rgba(0,0,0,.12);
  }
.adv summary{
  cursor: pointer;
  color: var(--muted);
  font-weight: 800;
  }


/* ===== START SPLASH ===== */
.splash{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000 url("start.png") center/cover no-repeat;
  }

.splash.hidden{
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  }

/* Позиция спиннера под надписью "подбираем пару"
Если чуть не попадает — поменяй top: 66% на 63-70% */
.splash-spinner-wrap{
  position: absolute;
  left: 50%;
  top: 66%;
  transform: translateX(-50%);
  }

.splash-spinner{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,.1);
  animation: splashSpin 1s linear infinite;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.6));
  }

@keyframes splashSpin{
  to{ transform: rotate(360deg); }
  }
/* ===== /START SPLASH ===== */
/* --- Brand logo --- */
.brand-logo{
  height:34px;
  width:auto;
  display:block;
  }

/* --- Profile UI --- */
.profile-panel h2{ margin-top:0; }
.profile-head{
  display:flex;
  gap:12px;
  align-items:center;
  }
.avatar{
  width:72px;
  height:72px;
  border-radius:18px;
  object-fit:cover;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
  }
.profile-info{ min-width:0; }
.profile-name{
  font-weight:900;
  font-size:18px;
  line-height:1.1;
  }
.profile-line{
  font-size:13px;
  opacity:.85;
  margin-top:6px;
  }
.profile-badges{
  margin-top:8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  }
.badge-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.25);
  font-size:12px;
  }
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  }
/* ===== Profile: status banner ===== */
.status-banner{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.28);
  font-size: 13px;
  line-height: 1.25;
  white-space: pre-line;
  }
.status-banner.ok{
  border-color: rgba(55,214,122,.35);
  }
.status-banner.warn{
  border-color: rgba(255,45,85,.35);
  }
.status-banner b{
  font-weight: 900;
  }

/* ===== Photos: grid tiles (no tech meta) ===== */
.photos-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  }

.photo-tile{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  aspect-ratio: 1 / 1;
  }

.photo-tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  }

.photo-tile .photo-main-badge{
  position:absolute;
  top:8px; left:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  }

.photo-tile .photo-actions{
  position:absolute;
  left:8px; right:8px; bottom:8px;

  /* чтобы кнопки не упирались в скругление/края и не вылезали */
  padding: 0 6px;
  box-sizing: border-box;

  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:6px;
  justify-items: center;
  align-items: center;
}

.photo-tile .photo-actions .btn{
  /* фикс: на Android круглая кнопка + padding часто “раздувают” ширину */
  width: min(46px, 100%);
  height: min(46px, 100%);
  aspect-ratio: 1 / 1;

  padding: 0;
  min-width: 0;

  border-radius: 999px;

  display: grid;
  place-items: center;

  font-size: clamp(11px, 2.8vw, 12px);
  line-height: 1;
  text-align: center;

  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}

.photo-tile .photo-actions .btn:disabled{
  opacity: .45;
}

.photo-tile .photo-del{
  position:absolute;
  top:8px;
  right:8px;
  width:34px;
  height:34px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.photo-tile .photo-del:active{
  transform: scale(.98);
  }

.photo-tile .photo-del[disabled]{
  opacity:.45;
  cursor: default;
  }

/* === FEED: disable vertical scroll, keep swipes === */
#tab-feed{
  overflow: hidden !important;
  height: 100%;
  touch-action: pan-x;
  padding-top: calc(env(safe-area-inset-top, 0px) - 10px);
  }
/* CHATS: чтобы список/ноты не уходили под нижний tabbar */
#tab-chats{
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
  }
#tab-profile{
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
}

/* === FEED ACTION BUTTONS: SVG + pulse === */
.fab{
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.52);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  }

.fab-ico{
  width: 26px;
  height: 26px;
  display:block;
  }

.fab.like{ color: var(--like); }
.fab.nope{ color: var(--nope); }
.fab.skip{ color: var(--p1); }

.fab:active{
  transform: scale(.96);
  }

/* короткий пульс при нажатии */
.fab.pulse{
  animation: fabPulse 170ms ease-out;
  }
@keyframes fabPulse{
  0%   { transform: scale(1); }
  45%  { transform: scale(.92); }
  100% { transform: scale(1); }
  }

/* === FEED ACTION ICONS: no visible button, bigger icons === */
.fab{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;

  /* оставляем нормальную “тап-зону”, но без видимой кнопки */
  width: 96px;
  height: 96px;
  padding: 0;
  display: grid;
  place-items: center;
  }

.fab-ico{
  width: 64px;
  height: 64px;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.65));
  }

/* Цвета */
.fab.like{ color: #ff2aa6; }   /* ярко-розовый */
.fab.nope{ color: #ff2d2d; }   /* красный */
.fab.skip{ color: rgba(244,238,252,.92); } /* нейтральный светлый */

/* короткий “тап-эффект” */
.fab:active{
  transform: scale(.94);
  }

/* пульс */
.fab.pulse{
  animation: fabPulse 170ms ease-out;
  }
@keyframes fabPulse{
  0%   { transform: scale(1); }
  45%  { transform: scale(.90); }
  100% { transform: scale(1); }
  }

/* === CARD SWIPE ANIMATION === */
.card.swipe-like{
  animation: swipeLike 260ms ease-out forwards;
  }
.card.swipe-nope{
  animation: swipeNope 260ms ease-out forwards;
  }
.card.swipe-skip{
  animation: swipeSkip 220ms ease-out forwards;
  }

@keyframes swipeLike{
  to{
    transform: translateX(120%) rotate(12deg);
    opacity: 0;
    }
  }
@keyframes swipeNope{
  to{
    transform: translateX(-120%) rotate(-12deg);
    opacity: 0;
    }
  }
@keyframes swipeSkip{
  to{
    transform: scale(.92);
    opacity: 0;
    }
  }

/* === FEED TOP FILTER BUTTON (white, between Telegram controls) === */
.feed-topbar{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  pointer-events: auto;
  }

/* Active filters bar: visible at absolute bottom, inside safe-area under tabbar icons */
.feed-filters-bar{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);

  /* уводим в самый низ, но оставляем место под "домик" iPhone */
  bottom: calc(env(safe-area-inset-bottom) - 4px);

  width: 100%;
  max-width: 560px;

  padding: 2px 12px 2px;
  text-align: center;

  color: rgba(244,238,252,.55);
  font-size: 11px;
  line-height: 1.15;

  z-index: 10002; /* выше таббара, чтобы не пропадало */
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-filters-btn{
  min-width: 92px;
  height: 38px;
  border-radius: 999px;

  /* glass / dark style */
  background: rgba(32, 0, 48, .65);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);

  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  color: rgba(255,255,255,.9);
  }

.feed-filters-btn:active{
  transform: scale(.96);
  }


.menu-ico{
  width: 22px;
  height: 22px;
  display: block;
  }

/* Hide bottom Filters tab button (moved to feed top button) */
.nav .navbtn[data-tab="filters"]{
  display:none !important;
  }

/* === FILTERS: Back to Feed button === */
.filters-footer{
  position: sticky;
  bottom: 0;
  padding: 14px 0 calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: linear-gradient(
  to top,
  rgba(20,0,30,.92),
  rgba(20,0,30,.6),
  rgba(20,0,30,0)
  );
  z-index: 5;
  }

.filters-back-btn{
  width: 100%;
  height: 52px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 16px;
  background: linear-gradient(135deg, #ff2aa6, #ff5bd1);
  color: #fff;
  border: none;
  box-shadow: 0 12px 32px rgba(255,42,166,.45);
  }

.filters-back-btn:active{
  transform: scale(.97);
  }

/* ===== Tabbar (SVG) ===== */
:root{
  --tabbar-h: 78px; /* высота области таббара (без safe-area) */
  }

.tabbar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9997;         /* выше любых карточек/фонов */
  pointer-events: auto;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.10);
  max-width: 520px;
  margin: 0 auto;
  }

.bg,
.stars,
.overlay,
.gradient,
.decor,
.canvas-layer {
  pointer-events: none;  /* важно! */
  }

.tab-btn{
  flex: 1 1 0;            /* 33% / 33% / 33% */
  min-width: 0;
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);

  color: rgba(255,255,255,.75);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
  }

.tab-btn:active{ transform: scale(.99); }

.tab-btn .tab-ico{
  display: inline-flex;
  width: 26px;
  height: 26px;
  }

.tab-btn .tab-label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  }

.tab-btn.active{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  }

.tab-btn.active .tab-ico svg{
  filter: drop-shadow(0 4px 10px rgba(255,255,255,.12));
  }
/* Theme */
:root[data-scheme="light"]{
  color-scheme: light;
  }
:root[data-scheme="dark"]{
  color-scheme: dark;
  }

/* Chat card layout */
.chatrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  }
.chattime{
  font-size:12px;
  opacity:.75;
  white-space:nowrap;
  }
.chatprev{
  font-size:13px;
  opacity:.85;
  margin-top:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  }

/* Typing line */
.typing{
  margin: 6px 0 6px;
  font-size: 13px;
  opacity: .8;
  }



.tabbadge{
  position: absolute;
  right: 10px;
  top: 8px;

  min-width: 18px;
  height: 18px;
  padding: 0 6px;

  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2px;

  color: rgba(0,0,0,.92);
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 3px rgba(0,0,0,.25);
}

/* чтобы badge позиционировался внутри кнопки */
.tab-btn{ position: relative; }


/* Divider already used */
.chatdivider{
  margin: 8px 2px 2px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  text-align: center;
  font-size: 13px;
  opacity: .85;
  letter-spacing: .2px;
  }

/* --- Keyboard fix: hide tabbar when keyboard is open --- */
body.keyboard-open .tabbar {
  display: none !important;
  }

body.keyboard-open .wrap {
  padding-bottom: 12px !important; /* чтобы контент не "прыгал" */
  }

/* если у тебя композер фиксированный/прижатый вниз, можно добавить: */
body.keyboard-open .composer {
  margin-bottom: 0 !important;
  }

.unreadbadge{
  position: static;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.85);
  box-shadow: 0 0 0 3px rgba(0,0,0,.18);
}



#feedNote{
  margin-bottom: calc(var(--actions-h) + 8px);
  }

/* ===== Chat dialog as a static screen (upgraded) ===== */
body.in-chat #tab-chats .panel{
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  }

/* В режиме диалога: таб НЕ скроллится, скроллится только messages */
body.in-chat #tab-chats{
  overflow: hidden !important;
  }

/* В режиме диалога: tab и panel должны иметь высоту, иначе 100% не работает */
body.in-chat #tab-chats{
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  }

body.in-chat #tab-chats .panel{
  flex: 1 1 auto;
  min-height: 0;     /* критично для вложенного overflow */
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
  }

/* chatview занимает весь tab */
body.in-chat #chatview{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;              /* КРИТИЧНО */
  overflow: hidden;
  }

/* ===== Sticky header (назад + имя) ===== */
body.in-chat #chatview > .row:first-child{
  position: sticky;
  top: 0;
  z-index: 6;
  margin: 0;
  padding: 10px 12px;
  border-radius: 16px;

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  }

body.in-chat #chathead{
  max-width: 60vw;
  }
/* Spacer справа, чтобы заголовок диалога был по центру (симметрия с кнопкой "Назад") */
body.in-chat .chathead-spacer{
  width: 86px; /* примерно как кнопка "← Назад" */
  flex: 0 0 86px;
  }

/* Заголовок диалога — центрируем */
body.in-chat #chathead{
  flex: 1 1 auto;
  text-align: center;
  max-width: none; /* перекрываем старый max-width */
  }

/* typing line — чуть аккуратнее */
body.in-chat #typingNote{
  margin: 0 2px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  }

/* ===== Messages: единственный скролл контейнер ===== */
body.in-chat #messages{
  flex: 1 1 auto;
  min-height: 0;      /* критично для flex + overflow */
  height: auto;       /* убираем старые 52vh */
  overflow: auto;

  padding: 14px; /* высота до верха */
  border-radius: 18px;

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);


  }

/* “Разделитель” низ/верх при скролле ощущается дороже */
body.in-chat #messages{
  -webkit-mask-image: linear-gradient(
  to bottom,
  transparent 0px,
  black 14px,
  black calc(100% - 14px),
  transparent 100%
  );
  mask-image: linear-gradient(
  to bottom,
  transparent 0px,
  black 14px,
  black calc(100% - 14px),
  transparent 100%
  );
  }

/* ===== Message bubbles: прокачка UI ===== */
body.in-chat .msg{
  display:flex;
  margin: 10px 0;
  }

body.in-chat .bubble{
  max-width: 78%;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);

  white-space: pre-wrap;
  word-break: break-word;
  }

body.in-chat .msg.me{ justify-content:flex-end; }
body.in-chat .msg.me .bubble{
  background: linear-gradient(135deg, rgba(138,43,226,.55), rgba(255,45,85,.38));
  border-color: rgba(255,255,255,.14);
  }

/* время — компактнее и “внутри пузыря” */
body.in-chat .mtime{
  font-size: 11px;
  opacity: .72;
  margin-top: 6px;
  }

/* ===== Composer: sticky bottom, всегда “как в чатах” ===== */
:root{ --composer-h: 66px; }

/* ===== FIX: composer НЕ фиксированный, а в потоке под messages ===== */
body.in-chat .composer{
  position: relative !important;   /* или static */
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;

  z-index: 1;                      /* не надо 9999 */
  width: 100%;
  height: auto;                    /* пусть высота берется из padding/контента */

  margin: 8px 0 0;
  padding: 10px;

  border-radius: 18px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);

  display:flex;
  gap:10px;
  align-items:center;
  }

/* messages больше не надо «компенсировать» снизу под fixed composer */
body.in-chat #messages{
  padding-bottom: 14px !important;
  }



/* инпут — более “мессенджерный” */
body.in-chat #msgText{
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  }

/* кнопка отправки — компактнее, но заметнее */
body.in-chat #sendMsg{
  border-radius: 16px;
  padding: 12px 14px;
  }

/* hide chats title + search when inside dialog */
body.in-chat #tab-chats .panel > .row:first-of-type{ display:none !important; }
body.in-chat #chatSearch{ display:none !important; }

/* when keyboard is open: tabbar hidden, composer sticks to bottom */
body.keyboard-open .tabbar{
  display:none !important;
  }

/* когда клавиатура открыта — композер прямо к низу */
body.keyboard-open.in-chat .composer{
  bottom: env(safe-area-inset-bottom) !important;
  }

body.in-chat .chatview{
  margin-top: 0 !important;
  gap: 5px; /* можно 0 если совсем плотно */
  flex: 1 1 auto;
  min-height: 0;
  }

/* Доступность: показываем фокус, когда он действительно нужен */
:focus-visible {
  outline: 2px solid rgba(138, 43, 226, .65);
  outline-offset: 2px;
  }

/* Нормальный feedback при нажатии (Telegram WebView очень чувствителен к этому) */
.chatitem{
  cursor: pointer;
  transition: transform .08s ease, background .08s ease;
  -webkit-tap-highlight-color: transparent;
  }

.chatitem:active{
  transform: scale(0.992);
  background: rgba(255,255,255,.09);
  }

/* 1) В режиме диалога НЕ резервируем tabbar через .wrap,
иначе composer никогда не будет "прямо над tabbar" */
body.in-chat .wrap{
  padding-bottom: env(safe-area-inset-bottom) !important;
  }

/* 2) А вот composer поднимаем над tabbar ровно на его высоту */
body.in-chat #chatview .composer{
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;

  margin: 8px 0 0 0 !important;

  }

/* 3) Убираем "компенсацию" под fixed composer — она теперь лишняя */
body.in-chat #messages{
  padding-bottom: 14px !important;   /* как было по ощущениям */
  }

/* 4) Когда клавиатура открыта и tabbar скрыт — убираем отступ под него */
body.keyboard-open.in-chat #chatview .composer{
  margin-bottom: env(safe-area-inset-bottom) !important;
}

/* ===== Chat layout: composer прямо над tabbar, без пустого подвала ===== */

/* 1) в режиме диалога убираем резервирование места под tabbar у wrap */
body.in-chat .wrap{
  padding-bottom: env(safe-area-inset-bottom) !important;
}

/* 2) composer фиксируем НАД tabbar (как actions в ленте) */
:root{ --composer-h: 66px; } /* оставь как у тебя */

body.in-chat .composer{
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  /* ключевое: привязка к tabbar */
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px) !important;

  width: min(720px, calc(100% - 28px)) !important;
  height: var(--composer-h) !important;
  margin: 0 !important;
}

/* 3) messages: прижимаем вниз ТОЛЬКО на телефонах (coarse pointer).
   На Telegram Desktop flex ломает wheel-scroll, поэтому там будет block. */
@media (pointer: coarse){
  body.in-chat #messages{
    padding-bottom: 14px !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  body.keyboard-open.in-chat #messages{
    padding-bottom: 14px !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}
/* Desktop (Telegram Desktop / mouse wheel): возвращаем нормальный scroll */
@media (pointer: fine){
  body.in-chat #messages{
    display: block !important;
    overflow-x: hidden !important;   /* убираем горизонтальный скролл */
    width: 100%;
  }
  body.keyboard-open.in-chat #messages{
    display: block !important;
    overflow-x: hidden !important;
    width: 100%;
  }

  /* пузырям запрещаем вылезать за ширину контейнера */
  body.in-chat .bubble{
    max-width: 78%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}


/* Premium highlight */
/* Premium — badge + thin frame (no gold fill) */
.card.premium{
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  border: 1.5px solid rgba(212,175,55,.85);
}

/* убираем “золотую заливку”, оставляем обычный градиент */
.card.premium .card-grad{
  background: radial-gradient(900px 400px at 30% 20%, rgba(138,43,226,.35), transparent 55%),
              radial-gradient(800px 420px at 80% 30%, rgba(255,45,85,.25), transparent 55%),
              linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55));
}

/* Premium badge */
.premium-badge{
  position:absolute;
  top:10px;
  left:50%;
  background: rgba(212,175,55,.95);
  color:#111;
  font-size:10px;
  font-weight:700;
  padding:4px 7px;
  border-radius:7px;
  letter-spacing:.6px;
  z-index:4;
  pointer-events:none;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}


.chatitem.premium{
  background: rgba(255,215,0,.08);
  border: 1px solid rgba(255,215,0,.14);
}

/* ===== Report bottom-sheet ===== */

.hidden { display: none !important; }

/* ===== Registration: city suggest + photo preview ===== */
.city-suggest{
  position:absolute;
  left:0;
  right:0;
  top:64px;
  background: rgba(20, 20, 22, 0.98);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  overflow:hidden;
  z-index: 1000;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.city-suggest .opt{
  padding: 10px 12px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.city-suggest .opt:last-child{border-bottom:none}
.city-suggest .opt:hover{background: rgba(255,255,255,0.06)}
.city-suggest .small{display:block; font-size:12px; opacity:.75; margin-top:2px}

.reg-photo-preview{
  width: 78px;
  height: 78px;
  border-radius: 16px;
  object-fit: cover;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}
.reg-photo-preview.is-placeholder{opacity:.85}

.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 10000;
}

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #111;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 12px 12px 16px;
  z-index: 10001;
  transform: translateY(0);
}

.sheet-handle {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  margin: 4px auto 10px;
}

.sheet-title {
  font-size: 16px;
  font-weight: 700;
  margin: 4px 2px 10px;
}

.sheet-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.sheet-btn, .sheet-send, .sheet-cancel {
  width: 100%;
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 15px;
}

.sheet-cancel {
  margin-top: 10px;
  background: rgba(255,255,255,0.03);
}

.sheet-other {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.sheet-textarea {
  width: 100%;
  min-height: 90px;
  resize: none;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  color: #fff;
  font-size: 14px;
}

/* ===== Chat menu button (⋮) ===== */
.chatright{
  margin-left: auto;
  display:flex;
  align-items:center;
  gap: 8px;
}

.chatmenu {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.chatrow { display:flex; align-items:center; }

/* ===== Profile/Blacklist views ===== */
.profileview {
  position: fixed;
  inset: 0;
  background: #0b0b0b;
  z-index: 10000;
  display: flex;
  flex-direction: column;
}

.profilehead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.backbtn {
  width: 40px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-size: 16px;
}

.profiletitle { font-weight: 700; }

.profilebody {
  padding: 12px;
  overflow: auto;
  flex: 1;
}
/* ===== Blacklist rows (like chats) ===== */
.bl-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

.bl-ava{
  width:48px;
  height:48px;
  border-radius:12px;
  object-fit:cover;
  flex:0 0 auto;
}

.bl-mid{
  flex:1;
  min-width:0;
}

.bl-name{
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.bl-btn{
  width:auto;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color:#fff;
  font-size:14px;
}

.profileactions {
  padding: 12px;
  display: flex;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-wrap: nowrap;
}

/* кнопки в профиле — не 100% ширины, а равными колонками */
#profileView .profileactions .sheet-btn{
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 8px;
  font-size: 13px;
  border-radius: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Profile action buttons: premium look (only inside profile) ===== */
#profileView .profileactions .sheet-btn{
  border: 1px solid rgba(212,175,55,0.22);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
#profileView .profileactions .sheet-btn:active{
  transform: translateY(1px);
  filter: brightness(0.96);
}

/* Primary (gold): Написать + Лайк */
#profileWrite,
#profileLike{
  border: 1px solid rgba(212,175,55,0.55) !important;
  background: linear-gradient(135deg, rgba(255,214,102,0.95), rgba(212,175,55,0.95)) !important;
  color: #111 !important;
  box-shadow: 0 6px 16px rgba(212,175,55,0.18), inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* Neutral (graphite): В ЧС + Не подходит */
#profileBlock,
#profileNope{
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: linear-gradient(180deg, rgba(30,30,30,0.95), rgba(18,18,18,0.95)) !important;
  color: rgba(255,255,255,0.92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Danger (soft red): Жалоба */
#profileReport{
  border: 1px solid rgba(255,90,90,0.35) !important;
  background: linear-gradient(135deg, rgba(80,18,22,0.95), rgba(40,10,12,0.95)) !important;
  color: rgba(255,200,200,0.95) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}


/* ===== Profile photo (with skeleton) ===== */
.profile-photo {
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}

.profile-photo.premium {
  border: 1.5px solid #d4af37;
}

.profile-photo-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 160ms ease;
}

.profile-photo.loaded .profile-photo-img {
  opacity: 1;
}

.profile-photo-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.04)
  );
  background-size: 200% 100%;
  animation: profileShimmer 1.1s infinite linear;
}

@keyframes profileShimmer {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

.profile-premium-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #d4af37;
  color: #111;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 7px;
  border-radius: 8px;
  letter-spacing: 0.4px;
  z-index: 3;
}

/* ===== Profile body typography ===== */
.profilebody .profile-meta {
  margin-top: 10px;
  opacity: 0.85;
  font-size: 14px;
}

.profilebody .profile-desc {
  margin-top: 10px;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.35;
  opacity: 0.95;
}

/* ===== Pinned chat icon ===== */
.chat-pin {
  margin-left: 6px;
  font-size: 14px;
  opacity: 0.75;
  line-height: 1;
}

.chatname {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chatname-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Premium view ===== */
.premium-hero{
  padding: 10px 0 14px;
  display: grid;
  gap: 10px;
}

.premium-hero .h1{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
}

.premium-hero .sub{
  font-size: 13px;
  opacity: .88;
  line-height: 1.35;
}

.premium-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  padding: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

.premium-table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
}

.premium-table thead th{
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 12px 10px;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.premium-table tbody td{
  padding: 10px 10px;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  vertical-align: top;
}

.premium-table tbody tr:last-child td{
  border-bottom: 0;
}

.premium-table .feat{
  font-weight: 800;
  width: 42%;
}

.premium-table .col{
  width: 29%;
  opacity: .95;
}

.premium-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.20);
  font-size: 12px;
  font-weight: 800;
}

.premium-note{
  margin-top: 12px;
  display: grid;
  gap: 6px;
  font-size: 13px;
  opacity: .9;
  line-height: 1.35;
}

.premium-buy{
  width: 100%;
  border-radius: 16px;
  font-weight: 900;
  padding: 14px 12px;
  box-shadow: 0 14px 34px rgba(255,45,85,.24);
}

/* Training sheet content */
#trainingView .sheet-content ul{
  margin: 8px 0 12px 18px;
}
#trainingView .sheet-content p{
  margin: 10px 0 6px;
}

/* =========================
   MATCH OVERLAY
   ========================= */
.match-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.78);
}

.match-overlay.hidden {
  display: none;
}

.match-card {
  width: 100%;
  max-width: 420px;
  background: rgba(20, 20, 20, 0.96);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  color: #fff;
}

.match-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 14px;
}

.match-photos {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 62px 1fr;
  align-items: center;
  gap: 10px;
  margin: 12px 0 8px;
}

.match-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}

.match-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.match-heart {
  width: 62px;
  height: 62px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.10);
  font-size: 28px;
}

.match-name {
  text-align: center;
  font-size: 14px;
  opacity: 0.92;
  margin: 6px 0 14px;
}

.match-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.match-actions .btn {
  width: 100%;
  border-radius: 14px;
  padding: 12px 12px;
  font-size: 15px;
  font-weight: 600;
}

.match-actions .btn-primary {
  background: #ffffff;
  color: #000000;
  border: none;
}

.match-actions .btn-secondary {
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.14);
}

.fab.superlike {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
}
.superlike-ico {
  font-size: 22px;
  line-height: 1;
}

/* =========================
   FEED: bigger Undo + Superlike tap targets
   ========================= */
.fab.undo{
  width: 112px;
  height: 112px;
  font-size: 34px;
}
.fab.superlike{
  width: 112px;
  height: 112px;
}
.fab.superlike .superlike-ico{
  font-size: 34px;
}

#boostPanel .note { opacity: 0.9; }
#btnBoostActivate[disabled] { opacity: 0.55; }

/* =========================
   WHO LIKED ME
   ========================= */
.lm-wrap {
  display: grid;
  gap: 10px;
}

.lm-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.lm-ava {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  background: rgba(255,255,255,0.08);
}

.lm-mid { min-width: 0; }
.lm-name {
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lm-sub {
  opacity: 0.86;
  font-size: 13px;
  margin-top: 2px;
}

.lm-badge-new {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 110, 64, 0.18);
  border: 1px solid rgba(255, 110, 64, 0.22);
}

.lm-row.blurred .lm-ava {
  filter: blur(8px);
  transform: scale(1.03);
}

.lm-row.blurred .lm-name,
.lm-row.blurred .lm-sub {
  filter: blur(6px);
}

#profileView {
  z-index: 9999;
}

#likesMeView {
  z-index: 9000;
}

/* =========================
   SUPERLIKE OVERLAY (fallback)
   ========================= */
.sl-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,.55);
}
.sl-overlay.hidden{ display:none; }

.sl-card{
  width: min(420px, 100%);
  border-radius: 18px;
  padding: 16px;
  background: var(--card, #111);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  text-align: center;
}
.sl-title{
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 8px;
}
.sl-name{
  font-size: 16px;
  opacity: .92;
  margin-bottom: 14px;
  white-space: pre-line;
}
.sl-actions{
  display: grid;
  gap: 10px;
}

/* =========================
   ANDROID FIX: messages scroll
   =========================
   mask-image ломает тач-скролл в Telegram Android WebView.
   На iOS оставляем, на Android отключаем.
*/

/* iOS-only: условие через поддержку -webkit-touch-callout */
@supports (-webkit-touch-callout: none) {
  body.in-chat #messages{
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0px,
      black 14px,
      black calc(100% - 14px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0px,
      black 14px,
      black calc(100% - 14px),
      transparent 100%
    );
  }
}

/* Everything else (Android/WebView/Desktop): masks OFF */
@supports not (-webkit-touch-callout: none) {
  body.in-chat #messages{
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

/* =========================================================
   FINAL FIX (Telegram Android): chat must have ONE scroll box
   Put this at the VERY END of styles.css
   ========================================================= */

body.in-chat #tab-chats{
  overflow: hidden !important; /* родитель не должен скроллиться в диалоге */
}

/* panel должен быть flex-колонкой на всю высоту вкладки */
body.in-chat #tab-chats .panel{
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* chatview занимает всё доступное пространство */
body.in-chat #chatview{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* messages — ЕДИНСТВЕННЫЙ скролл-контейнер */
body.in-chat #messages{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;

  display: block !important;        /* никакого flex на самом скролл-боксе */
  overflow-y: auto !important;
  overflow-x: hidden !important;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;

  /* критично: маски ломают touch-scroll в Android WebView */
  -webkit-mask-image: none !important;
  mask-image: none !important;

  /* на всякий случай: чтобы слой точно ловил тач */
  pointer-events: auto !important;
}

/* composer — ТОЛЬКО в потоке, не fixed (fixed часто перекрывает messages на Android) */
body.in-chat #chatview .composer,
body.in-chat .composer{
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;

  flex: 0 0 auto !important;
  width: 100% !important;
  z-index: 2 !important; /* поверх messages, но не перекрывает его “пустым” fixed-слоем */
}

.sheet-btn-danger{
  color: #ff3b30;
}

/* Disable text selection while we detect long-press for message actions */
body.no-select, body.no-select *{
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* ===============================
   Profile: Gold card theme + gallery + photo viewer
   =============================== */

/* фон только для окна профиля */
#profileView.pv-gold {
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255, 214, 102, 0.18), rgba(0,0,0,0) 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(212, 175, 55, 0.14), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, #070707 0%, #0b0b0b 35%, #070707 100%);
}

#profileView.pv-gold.pv-gold-premium {
  background:
    radial-gradient(1200px 700px at 30% -10%, rgba(255, 214, 102, 0.26), rgba(0,0,0,0) 60%),
    radial-gradient(900px 520px at 85% 10%, rgba(212, 175, 55, 0.22), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, #050505 0%, #0b0b0b 35%, #050505 100%);
}

.profile-card {
  border-radius: 22px;
  padding: 12px;
  border: 1px solid rgba(212,175,55,0.25);
  background:
    radial-gradient(900px 400px at 10% 0%, rgba(212,175,55,0.22), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow:
    0 10px 30px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.profile-card.premium {
  border: 1.5px solid rgba(212,175,55,0.55);
  box-shadow:
    0 12px 34px rgba(0,0,0,0.52),
    0 0 0 1px rgba(212,175,55,0.10),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

.profile-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 2px 6px 2px;
}

.profile-name-age {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.2px;
}

.profile-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.badge {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
}

.badge.premium {
  border: 1px solid rgba(212,175,55,0.55);
  background: rgba(212,175,55,0.16);
}

.badge.new {
  border: 1px solid rgba(255,214,102,0.40);
  background: rgba(255,214,102,0.12);
}

.profile-subline {
  color: rgba(255,255,255,0.82);
  font-size: 13px;
  margin: 0 2px 10px 2px;
}

.profile-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.profile-section-title {
  font-weight: 900;
  font-size: 13px;
  color: rgba(255,214,102,0.92);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

.profile-text {
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  line-height: 1.35;
  white-space: pre-wrap;
}

/* Галерея миниатюр */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.photo-thumb {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  aspect-ratio: 1 / 1;
  cursor: pointer;
}

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fullscreen viewer */
.photoviewer {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photoviewer.hidden { display: none; }

.photoviewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(6px);
}

.photoviewer-content {
  position: relative;
  z-index: 1;
  width: min(92vw, 520px);
  max-height: 86vh;
  border-radius: 20px;
  border: 1px solid rgba(212,175,55,0.35);
  background:
    radial-gradient(900px 400px at 10% 0%, rgba(212,175,55,0.18), rgba(0,0,0,0) 55%),
    rgba(0,0,0,0.45);
  box-shadow: 0 16px 44px rgba(0,0,0,0.60);
  padding: 10px;
}

.photoviewer-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 16px;
}

.photoviewer-img {
  width: 100%;
  height: auto;
  max-height: 82vh;
  display: block;
  border-radius: 16px;
  object-fit: contain;
}







/* ===== Profile badges (НЕ трогаем .badge — он нужен для ленты и absolute) ===== */

.profile-status-row{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 10px 0 8px 0;
}

.profile-status-center{
  justify-self: center;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-status-right{
  justify-self: end;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* отдельный класс, чтобы не попадать под absolute-стиль .badge */
.profile-badge{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
  position: static; /* ключевое */
}

.profile-badge.premium{
  border: 1px solid rgba(212,175,55,0.55);
  background: rgba(212,175,55,0.16);
}

.profile-badge.new{
  border: 1px solid rgba(255,214,102,0.40);
  background: rgba(255,214,102,0.12);
}



/* ===============================
   Profile from "Likes Me" mode
   =============================== */

#profileView.pv-from-likes #profileLike{
  background: linear-gradient(135deg, #ffd86b, #d4af37) !important;
  color: #111 !important;
  box-shadow: 0 6px 18px rgba(212,175,55,0.35) !important;
}

#profileView.pv-from-likes #profileNope{
  background: linear-gradient(180deg, #222, #161616) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

#profileView.pv-from-likes #profileReport{
  background: linear-gradient(135deg, #4b1215, #2a0a0c) !important;
  border: 1px solid rgba(255,80,80,0.35) !important;
  color: #ffb3b3 !important;
}