/* ═══════════════════════════════════════════════════════
   PULSE — Modern Design System v3
   Dark-first · Glassmorphism · Telegram × Instagram × TikTok
   ═══════════════════════════════════════════════════════ */

/* ─── TOKENS ──────────────────────────────────────────── */
:root {
  --bg:         #0a0a0f;
  --bg2:        #111118;
  --card:       #16161e;
  --card2:      #1e1e28;
  --border:     rgba(255,255,255,.07);
  --border2:    rgba(255,255,255,.12);
  --fg:         #f0f0f8;
  --sub:        #7878a0;
  --sub2:       #5a5a7a;

  --accent:     #7c3aed;
  --accent2:    #a855f7;
  --accent3:    #c084fc;
  --grad:       linear-gradient(135deg,#7c3aed 0%,#a855f7 50%,#ec4899 100%);
  --grad-soft:  linear-gradient(135deg,rgba(124,58,237,.2),rgba(236,72,153,.15));
  --grad-blue:  linear-gradient(135deg,#2563eb,#7c3aed);
  --grad-pink:  linear-gradient(135deg,#ec4899,#f97316);

  --green:      #22d3ee;
  --red:        #f43f5e;
  --gold:       #fbbf24;
  --teal:       #14b8a6;

  --bubble-in:  #1e1e2a;
  --bubble-out: linear-gradient(135deg,#7c3aed,#a855f7);

  --story-ring: linear-gradient(45deg,#f97316,#ec4899,#a855f7,#7c3aed);
  --nav-h:      66px;
  --safe-b:     env(safe-area-inset-bottom,0px);
  --safe-t:     env(safe-area-inset-top,0px);
  --r:          20px;
  --r-sm:       12px;
  --r-xs:       8px;

  --shadow:     0 8px 32px rgba(0,0,0,.5);
  --shadow-sm:  0 4px 16px rgba(0,0,0,.4);
  --glow:       0 0 32px rgba(124,58,237,.35);
}

/* ─── RESET ───────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html,body {
  height:100%; background:var(--bg); color:var(--fg);
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; overflow:hidden;
}
.hidden { display:none!important }
input,textarea,button { font-family:inherit; color:var(--fg) }
button { cursor:pointer }
::-webkit-scrollbar { width:2px; height:2px }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px }

/* ─── SPLASH ──────────────────────────────────────────── */
.splash {
  position:fixed; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:var(--bg); z-index:9999; overflow:hidden;
}
.splash::before {
  content:''; position:absolute; width:500px; height:500px; border-radius:50%;
  background:var(--grad); filter:blur(120px); opacity:.3; top:-100px; left:-100px;
}
.splash::after {
  content:''; position:absolute; width:400px; height:400px; border-radius:50%;
  background:var(--grad-pink); filter:blur(120px); opacity:.2; bottom:-100px; right:-100px;
}
.splash-logo { text-align:center; color:#fff; position:relative; z-index:1 }
.splash-icon {
  font-size:4.5rem;
  filter:drop-shadow(0 8px 32px rgba(124,58,237,.6));
  animation:splash-pop .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes splash-pop {
  0% { transform:scale(0) rotate(-15deg); opacity:0 }
  100% { transform:scale(1) rotate(0); opacity:1 }
}
.splash-name {
  font-size:2.5rem; font-weight:900; letter-spacing:-.05em; margin-top:12px;
  background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.splash-tagline { font-size:.875rem; color:var(--sub); margin-top:6px }
.splash-dots { display:flex; gap:8px; margin-top:36px }
.splash-dots span {
  width:7px; height:7px; border-radius:50%;
  background:var(--accent); opacity:.4; animation:dot-pulse 1.4s infinite;
}
.splash-dots span:nth-child(2) { animation-delay:.2s }
.splash-dots span:nth-child(3) { animation-delay:.4s }
@keyframes dot-pulse {
  0%,80%,100% { transform:scale(.7); opacity:.3 }
  40% { transform:scale(1.1); opacity:1 }
}

/* ─── AUTH ────────────────────────────────────────────── */
.auth-screen {
  position:fixed; inset:0; overflow-y:auto;
  background:var(--bg);
}
.auth-blob { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:0 }
.auth-blob1 { width:350px; height:350px; background:rgba(124,58,237,.25); top:-100px; right:-80px }
.auth-blob2 { width:300px; height:300px; background:rgba(236,72,153,.15); bottom:-60px; left:-60px }
.auth-body {
  position:relative; z-index:1; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:60px 20px 40px; gap:28px;
}
.auth-brand { text-align:center }
.auth-icon { font-size:3.5rem; margin-bottom:10px; filter:drop-shadow(0 8px 24px rgba(124,58,237,.5)) }
.auth-brand h1 {
  font-size:2.5rem; font-weight:900; letter-spacing:-.05em;
  background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.auth-brand p { font-size:.9rem; color:var(--sub); margin-top:6px }
.auth-card {
  background:var(--card);
  border:1px solid var(--border2);
  border-radius:28px; padding:28px 24px;
  box-shadow:var(--shadow); width:100%; max-width:380px;
}
.seg-tabs {
  display:flex; background:var(--bg2); border-radius:16px; padding:4px; gap:4px; margin-bottom:22px;
}
.seg {
  flex:1; padding:11px; border:none; border-radius:12px;
  background:transparent; color:var(--sub); font-size:.9375rem; font-weight:700; transition:all .25s;
}
.seg.active { background:var(--accent); color:#fff; box-shadow:0 4px 16px rgba(124,58,237,.4) }
.inp-group {
  display:flex; align-items:center; gap:10px;
  border:1.5px solid var(--border); border-radius:16px;
  padding:0 14px; margin-bottom:12px; background:var(--bg2); transition:border .15s,background .15s;
}
.inp-group:focus-within { border-color:var(--accent); background:var(--card2) }
.inp-icon { font-size:1rem; flex-shrink:0; opacity:.6 }
.inp-group input {
  flex:1; padding:14px 0; border:none; background:transparent;
  font-size:1rem; color:var(--fg);
}
.inp-group input:focus { outline:none }
.inp-group input::placeholder { color:var(--sub2) }
.mt10 { margin-top:10px }
.btn-cta {
  width:100%; padding:16px; border:none; border-radius:16px; background:var(--grad);
  color:#fff; font-size:1rem; font-weight:700; transition:transform .15s,opacity .15s;
  box-shadow:0 8px 24px rgba(124,58,237,.45); letter-spacing:.01em;
}
.btn-cta:active { transform:scale(.97); opacity:.9 }
.auth-hint { text-align:center; font-size:.8rem; color:var(--sub); margin-top:10px }
.auth-err {
  color:var(--red); font-size:.875rem; margin-top:8px;
  padding:10px 14px; background:rgba(244,63,94,.1); border-radius:10px; border:1px solid rgba(244,63,94,.2);
}

/* ─── APP SHELL ───────────────────────────────────────── */
.app {
  display:flex; flex-direction:column; height:100dvh; max-width:430px;
  margin:0 auto; position:relative; overflow:hidden; background:var(--bg);
}
.demo-bar {
  background:linear-gradient(90deg,rgba(251,191,36,.15),rgba(245,158,11,.1));
  color:var(--gold); font-size:.78rem; padding:7px 16px;
  text-align:center; flex-shrink:0; border-bottom:1px solid rgba(251,191,36,.15);
}
.demo-bar a { cursor:pointer; margin-left:8px; text-decoration:underline }
.pages { flex:1; overflow:hidden; padding-bottom:var(--nav-h) }
.pg { display:none; flex-direction:column; height:100%; overflow:hidden }
.pg.active { display:flex }

/* ─── TOP BAR ─────────────────────────────────────────── */
.bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; padding-top:calc(12px + var(--safe-t));
  background:rgba(10,10,15,.85);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border); min-height:58px; flex-shrink:0;
}
.bar h2 { font-size:1.375rem; font-weight:800; letter-spacing:-.04em }
.bar-right { display:flex; gap:4px }
.bar-btn {
  width:38px; height:38px; border:none; border-radius:12px;
  background:var(--card2); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  color:var(--sub); transition:all .15s;
}
.bar-btn:active { background:var(--border); transform:scale(.95) }

/* ─── BOTTOM NAV ──────────────────────────────────────── */
.bnav {
  position:absolute; bottom:0; left:0; right:0;
  height:calc(var(--nav-h) + var(--safe-b));
  display:flex; align-items:center; justify-content:space-around;
  padding:0 8px; padding-bottom:var(--safe-b);
  background:rgba(10,10,15,.9);
  backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px);
  border-top:1px solid var(--border);
  overflow:visible;
}
.nb {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  flex:1; height:100%; background:none; border:none;
  color:var(--sub2); font-size:.65rem; font-weight:600; padding-top:8px;
  transition:color .2s;
}
.nb svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8 }
.nb.active { color:var(--accent3) }
.nb.active svg { filter:drop-shadow(0 0 8px rgba(192,132,252,.5)) }
/* .nb-center — see .nb.nb-center rule below (legacy override) */
.nb-center svg { width:24px; height:24px; fill:#fff; stroke:none }

/* ─── STORIES ROW ─────────────────────────────────────── */
.stories-row {
  display:flex; gap:14px; padding:14px 16px; overflow-x:auto;
  -webkit-overflow-scrolling:touch; flex-shrink:0; background:var(--card);
  border-bottom:1px solid var(--border);
}
.stories-row::-webkit-scrollbar { display:none }
.story-wrap {
  display:flex; flex-direction:column; align-items:center;
  gap:6px; cursor:pointer; flex-shrink:0;
}
.story-ring {
  width:62px; height:62px; border-radius:50%; padding:2.5px;
  background:var(--story-ring);
  box-shadow:0 4px 16px rgba(124,58,237,.3);
}
.story-ring.seen { background:var(--border2); box-shadow:none }
.story-ring.add {
  background:var(--grad);
  box-shadow:0 4px 16px rgba(124,58,237,.35);
}
.story-av {
  width:100%; height:100%; border-radius:50%;
  background:var(--bg2); display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; font-weight:700; color:#fff; border:2.5px solid var(--card);
}
.story-wrap span {
  font-size:.65rem; color:var(--sub); white-space:nowrap;
  max-width:64px; overflow:hidden; text-overflow:ellipsis; text-align:center;
}
.feed-stories { border-bottom:1px solid var(--border) }

/* ─── SEARCH BARS ─────────────────────────────────────── */
.chat-search-bar,.contact-search-wrap {
  padding:10px 16px; background:var(--card); flex-shrink:0; border-bottom:1px solid var(--border);
}
.search-inp-wrap,.search-bar-wrap {
  display:flex; align-items:center; gap:10px;
  background:var(--bg2); border-radius:14px;
  padding:10px 14px; border:1.5px solid var(--border);
}
.search-inp-wrap:focus-within,.search-bar-wrap:focus-within { border-color:var(--accent) }
.search-inp,.search-inp-wrap input {
  flex:1; border:none; background:transparent;
  font-size:.9375rem; color:var(--fg);
}
.search-inp:focus,.search-inp-wrap input:focus { outline:none }
.search-inp::placeholder,.search-inp-wrap input::placeholder { color:var(--sub2) }
.search-inp-wrap svg { flex-shrink:0; color:var(--sub); opacity:.6 }

/* ─── CHAT FOLDERS ────────────────────────────────────── */
.chat-folders {
  display:flex; gap:8px; padding:10px 16px; overflow-x:auto;
  background:var(--card); flex-shrink:0; border-bottom:1px solid var(--border);
}
.chat-folders::-webkit-scrollbar { display:none }
.folder-btn {
  padding:7px 16px; border-radius:20px; border:1.5px solid var(--border);
  background:transparent; color:var(--sub); font-size:.8125rem; font-weight:600;
  white-space:nowrap; transition:all .2s;
}
.folder-btn.active {
  background:rgba(124,58,237,.2); color:var(--accent3);
  border-color:rgba(124,58,237,.4); box-shadow:0 2px 12px rgba(124,58,237,.2);
}

/* ─── LIST ITEMS (chats / contacts) ──────────────────── */
.list { flex:1; overflow-y:auto; background:var(--bg) }
.li {
  display:flex; align-items:center; gap:14px; padding:12px 16px;
  cursor:pointer; transition:background .15s; position:relative;
}
.li::after {
  content:''; position:absolute; bottom:0; left:82px; right:0;
  height:1px; background:var(--border);
}
.li:active { background:var(--card) }
.li-info { flex:1; min-width:0 }
.li-top { display:flex; align-items:center; justify-content:space-between; gap:8px }
.li-name { font-weight:700; font-size:.9375rem; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.li-time { font-size:.72rem; color:var(--sub2); flex-shrink:0 }
.li-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:3px }
.li-preview { font-size:.85rem; color:var(--sub); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.badge {
  background:var(--grad); color:#fff; font-size:.68rem; font-weight:700;
  border-radius:10px; padding:2px 8px; min-width:20px; text-align:center; flex-shrink:0;
}

/* ─── AVATARS ─────────────────────────────────────────── */
.ava {
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; font-weight:700; color:#fff; position:relative;
}
.ava.sm { width:44px; height:44px; font-size:1rem }
.ava.xs { width:34px; height:34px; font-size:.8rem }
.ava.xl { width:88px; height:88px; font-size:2.25rem; border:3px solid rgba(255,255,255,.15) }
.ava.online::after {
  content:''; display:block; position:absolute; bottom:1px; right:1px;
  width:13px; height:13px; border-radius:50%; background:var(--green);
  border:2.5px solid var(--card);
}
.av0 { background:linear-gradient(135deg,#7c3aed,#a855f7) }
.av1 { background:linear-gradient(135deg,#ec4899,#f97316) }
.av2 { background:linear-gradient(135deg,#10b981,#06b6d4) }
.av3 { background:linear-gradient(135deg,#f59e0b,#ef4444) }
.av4 { background:linear-gradient(135deg,#14b8a6,#7c3aed) }
.av5 { background:linear-gradient(135deg,#8b5cf6,#ec4899) }
.av6 { background:linear-gradient(135deg,#06b6d4,#10b981) }
.av7 { background:linear-gradient(135deg,#f97316,#fbbf24) }

.online-dot {
  position:absolute; bottom:1px; right:1px; width:12px; height:12px;
  border-radius:50%; background:var(--green); border:2px solid var(--bg);
}

/* ─── EMPTY STATE ─────────────────────────────────────── */
.empty-block {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:40px 24px; text-align:center; gap:10px;
}
.empty-emoji { font-size:3.5rem }
.empty-title { font-weight:700; font-size:1.1rem }
.empty-sub { font-size:.875rem; color:var(--sub) }

/* ─── CONTACTS ────────────────────────────────────────── */
.contact-search-wrap { border-bottom:1px solid var(--border) }
.contacts-online-row {
  display:flex; gap:14px; padding:14px 16px; overflow-x:auto;
  background:var(--card); border-bottom:1px solid var(--border); flex-shrink:0;
}
.contacts-online-row::-webkit-scrollbar { display:none }
.con-online { display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; flex-shrink:0 }
.con-online .ava { width:50px; height:50px }
.con-online span { font-size:.65rem; color:var(--sub); max-width:52px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* ─── FEED ────────────────────────────────────────────── */
.feed-scroll { flex:1; overflow-y:auto }
.post,.post-card {
  background:var(--card); border-radius:0; margin-bottom:1px;
  border-bottom:1px solid var(--border); overflow:hidden;
}
.post-head,.post-header {
  display:flex; align-items:center; gap:12px; padding:14px 16px 10px;
}
.post-meta { flex:1 }
.post-name { font-weight:700; font-size:.9375rem }
.post-time,.fc-time { font-size:.75rem; color:var(--sub); margin-top:2px }
.post-menu-btn {
  background:transparent; border:none; font-size:1.25rem; color:var(--sub);
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.post-body,.post-text {
  padding:0 16px 14px; font-size:.9375rem; line-height:1.6;
  color:rgba(240,240,248,.9); white-space:pre-wrap; word-break:break-word;
}
.post-mood { font-size:1.25rem; margin-right:6px }
.post-img {
  width:100%; aspect-ratio:4/3; object-fit:cover;
  background:var(--card2); margin-bottom:2px;
}
.post-stats,.post-actions,.fc-actions {
  display:flex; padding:4px 8px 12px; gap:4px;
}
.post-act,.post-actions button,.fc-actions button {
  display:flex; align-items:center; gap:6px; padding:9px 12px;
  border:none; background:transparent; color:var(--sub);
  font-size:.85rem; cursor:pointer; border-radius:12px; font-weight:500;
  flex:1; justify-content:center; transition:all .2s;
}
.post-act:active,.post-actions button:active,.fc-actions button:active {
  background:var(--card2); transform:scale(.96);
}
.post-act.liked { color:var(--red) }

/* ─── PAGE HEADER ─────────────────────────────────────── */
.page-header {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; padding-top:calc(14px + var(--safe-t));
  background:rgba(10,10,15,.85);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border); flex-shrink:0; min-height:58px;
}
.page-header h2 { font-size:1.375rem; font-weight:800; letter-spacing:-.04em }
.back-btn {
  background:var(--card2); border:none; border-radius:12px;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:var(--fg);
}

/* ─── REELS ───────────────────────────────────────────── */
.reels-page { background:#000; position:relative }
.reels-bar {
  position:absolute; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; padding-top:calc(14px + var(--safe-t));
}
.reels-title { color:#fff; font-weight:800; font-size:1.0625rem }
.reels-feed {
  height:100%; overflow-y:scroll; scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  position:relative;
}
.reel, .reel-item {
  scroll-snap-align:start; scroll-snap-stop:always;
  height:100dvh; min-height:100dvh; position:relative;
  display:flex; align-items:flex-end; overflow:hidden;
}
.reel-bg {
  position:absolute; inset:0; width:100%; height:100%;
  background:linear-gradient(135deg,#6C63FF,#a855f7);
}
.reel-bg .reel-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.reel-card {
  scroll-snap-align:start; height:100dvh; position:relative;
  display:flex; align-items:flex-end; overflow:hidden;
}
.reel-bg-emoji {
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:8rem; opacity:.25;
}
.reel-overlay {
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  background:linear-gradient(transparent 10%,rgba(0,0,0,.85) 100%);
  padding:80px 16px calc(var(--nav-h) + 20px + var(--safe-b)) 16px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  pointer-events:none;
}
.reel-overlay > * { pointer-events:auto }
.reel-info { flex:1; min-width:0; color:#fff }
.reel-author { font-weight:700; font-size:.95rem; margin-bottom:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.reel-desc, .reel-caption { font-size:.85rem; line-height:1.45; opacity:.95 }
.reel-actions {
  display:flex; flex-direction:column; align-items:center; gap:18px;
  flex-shrink:0;
}
.reel-btn {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; color:#fff; font-size:.7rem; font-weight:600;
  cursor:pointer; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
  padding:4px;
}
.reel-btn-ico { font-size:1.5rem; line-height:1 }
.reel-follow {
  background:rgba(255,255,255,.25); border:none; color:#fff;
  padding:4px 12px; border-radius:20px; font-size:.75rem; font-weight:600;
  cursor:pointer; white-space:nowrap;
}
.reel-side {
  display:flex; flex-direction:column; align-items:center; gap:20px;
  padding-bottom:8px; position:absolute; right:16px; bottom:calc(var(--nav-h)+24px);
}
.reel-action {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:none; color:#fff; font-size:.72rem; font-weight:600;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.reel-action span { display:block }

/* ─── PROFILE ─────────────────────────────────────────── */
.profile-top {
  background:var(--card); padding:24px 20px 20px; text-align:center;
  border-bottom:1px solid var(--border);
}
.profile-top .profile-name {
  font-size:1.4rem; font-weight:800; margin-top:4px;
}
.profile-top .profile-username {
  font-size:.875rem; color:var(--sub); margin-top:3px;
}
.profile-top .profile-actions {
  display:flex; gap:8px; justify-content:center; margin-top:16px; flex-wrap:wrap;
}
.profile-top .btn-primary {
  padding:10px 20px; border:none; border-radius:14px;
  background:var(--grad); color:#fff; font-size:.85rem; font-weight:700;
  cursor:pointer; transition:transform .15s,opacity .15s;
}
.profile-top .btn-primary:active { transform:scale(.96); opacity:.9 }
.profile-top .btn-outline {
  padding:9px 16px; border:1.5px solid var(--border2); border-radius:14px;
  background:var(--card2); color:var(--fg); font-size:.85rem; font-weight:600;
  cursor:pointer; transition:all .15s;
}
.profile-top .btn-outline:active { background:var(--border); transform:scale(.97) }
.profile-tabs {
  display:flex; background:var(--card); border-bottom:2px solid var(--border);
}
.ptab {
  flex:1; padding:13px 0; border:none; background:transparent;
  color:var(--sub); font-size:.8rem; font-weight:700;
  border-bottom:2px solid transparent; transition:all .2s; cursor:pointer;
  margin-bottom:-2px;
}
.ptab.active { color:var(--accent3); border-bottom-color:var(--accent) }
.profile-ava-wrap {
  position:relative; display:inline-block; margin-bottom:14px;
}
.profile-ava-edit {
  position:absolute; bottom:2px; right:2px; width:26px; height:26px;
  background:var(--accent); border:2px solid var(--card); border-radius:50%;
  font-size:.7rem; display:flex; align-items:center; justify-content:center;
}
.profile-name {
  font-size:1.5rem; font-weight:800; letter-spacing:-.03em;
}
.verified { color:var(--accent3); font-size:.9em }
.profile-username { font-size:.875rem; color:var(--sub); margin-top:3px }
.profile-bio { font-size:.875rem; color:rgba(240,240,248,.75); margin-top:8px; line-height:1.5 }
.profile-stats {
  display:flex; margin-top:18px; background:var(--bg2);
  border-radius:16px; overflow:hidden; border:1px solid var(--border);
}
.pstat {
  flex:1; padding:14px 0; text-align:center; cursor:pointer;
  border-right:1px solid var(--border); transition:background .15s;
}
.pstat:last-child { border:none }
.pstat:active { background:var(--card2) }
.pstat-num { font-size:1.25rem; font-weight:800 }
.pstat-lbl { font-size:.68rem; color:var(--sub); margin-top:2px }
.profile-actions {
  display:flex; gap:8px; margin-top:16px; justify-content:center;
}
.btn-primary {
  padding:11px 22px; border:none; border-radius:14px; background:var(--grad);
  color:#fff; font-size:.875rem; font-weight:700; box-shadow:0 4px 16px rgba(124,58,237,.35);
  transition:transform .15s,opacity .15s;
}
.btn-primary:active { transform:scale(.96); opacity:.9 }
.btn-outline {
  padding:10px 18px; border:1.5px solid var(--border2); border-radius:14px;
  background:var(--card2); color:var(--fg); font-size:.875rem; font-weight:600;
  transition:all .15s;
}
.btn-outline:active { background:var(--border); transform:scale(.97) }
.btn-sm {
  padding:7px 14px; border:1.5px solid var(--border2); border-radius:10px;
  background:transparent; color:var(--accent3); font-size:.8rem; font-weight:600;
  transition:all .15s; flex-shrink:0;
}
.btn-sm:active { background:rgba(124,58,237,.15) }
.icon-btn {
  width:36px; height:36px; border:none; border-radius:10px;
  background:var(--card2); display:flex; align-items:center; justify-content:center;
  font-size:1rem;
}

/* Highlights */
.highlights-row {
  display:flex; gap:14px; padding:14px 16px;
  overflow-x:auto; overflow-y:hidden;
  background:var(--card); border-bottom:1px solid var(--border);
  min-height:0; flex-shrink:0;
}
.highlights-row::-webkit-scrollbar { display:none }
.hl-wrap {
  display:flex; flex-direction:column; align-items:center;
  gap:5px; cursor:pointer; flex-shrink:0;
}
.hl-ring {
  width:62px; height:62px; border-radius:50%; background:var(--bg2);
  border:2px solid var(--border2); display:flex; align-items:center;
  justify-content:center; font-size:1.75rem; transition:transform .15s;
  flex-shrink:0;
}
.hl-ring:active { transform:scale(.94) }
.hl-ring.add {
  border:2px dashed var(--border2); background:transparent;
  color:var(--sub); font-size:1.5rem;
}
.hl-lbl {
  font-size:.65rem; color:var(--sub); white-space:nowrap;
  max-width:66px; text-align:center; overflow:hidden; text-overflow:ellipsis;
}

/* Profile hero (api.js real profile) */
.profile-hero {
  text-align:center; padding:20px 16px 16px;
}
.profile-hero .profile-ava-wrap { margin-bottom:12px }
.profile-hero .profile-name { font-size:1.35rem; font-weight:800 }
.profile-hero .profile-handle { font-size:.875rem; color:var(--sub); margin-top:2px }
.profile-hero .profile-bio { font-size:.875rem; color:var(--sub); margin-top:8px; line-height:1.45 }
.profile-badges { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:10px }
.badge-pill {
  padding:4px 10px; border-radius:20px; font-size:.75rem; font-weight:600;
  background:var(--card2); color:var(--sub);
}
.badge-pill.prem { background:var(--grad); color:#fff }
.badge-pill.gold { background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#111 }

/* profile-btn — dark theme (no white backgrounds) */
.profile-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px }
.profile-btn {
  padding:10px 18px; border-radius:14px; font-size:.85rem; font-weight:600;
  background:var(--card2); color:var(--fg); border:1.5px solid var(--border2);
  cursor:pointer; transition:all .15s;
}
.profile-btn.primary { background:var(--grad); color:#fff; border:none }
.profile-btn:active { transform:scale(.97); opacity:.9 }

.pstat-v { font-size:1.2rem; font-weight:800 }
.pstat-l { font-size:.68rem; color:var(--sub); margin-top:2px }
.pstat-click { cursor:pointer }
.pstat-click:active { background:var(--card2) }
.section-hd {
  font-size:.8rem; font-weight:700; color:var(--sub2);
  text-transform:uppercase; letter-spacing:.06em;
  padding:16px 16px 8px; margin-top:8px;
}
.posts-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:var(--bg); padding:0 16px 16px;
}

/* Profile grid */
.profile-grid {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px; background:var(--bg);
}
.pg-cell {
  aspect-ratio:1; position:relative; display:flex; align-items:center;
  justify-content:center; font-size:2rem; cursor:pointer; overflow:hidden;
  background:var(--card); transition:opacity .15s;
}
.pg-cell:active { opacity:.75; transform:scale(.97) }
.pg-cell-emoji {
  font-size:2.2rem; z-index:1;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
.pg-cell-stats {
  position:absolute; bottom:0; left:0; right:0;
  display:flex; gap:8px; justify-content:center;
  padding:4px 4px 5px;
  background:linear-gradient(to top,rgba(0,0,0,.7),transparent);
  font-size:.6rem; font-weight:700; color:#fff; z-index:2;
}
.profile-empty {
  grid-column:1/-1; display:flex; flex-direction:column;
  align-items:center; gap:10px; padding:48px 16px;
  color:var(--sub); font-size:.9rem;
}
.profile-tabs {
  display:flex; border-bottom:1px solid var(--border);
  background:var(--card);
}
.ptab {
  flex:1; padding:14px 0; border:none; background:transparent;
  color:var(--sub); font-size:.8125rem; font-weight:700;
  border-bottom:2px solid transparent; transition:all .2s;
}
.ptab.active { color:var(--accent3); border-bottom-color:var(--accent) }

/* Creator Studio */
.creator-studio {
  background:var(--card); padding:16px; border-bottom:1px solid var(--border);
}
.cs-title { font-size:.8rem; font-weight:700; color:var(--sub); text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px }
.cs-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px }
.cs-stat { background:var(--bg2); border-radius:14px; padding:12px 8px; text-align:center }
.cs-num { font-size:1.1rem; font-weight:800; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent }
.cs-lbl { font-size:.65rem; color:var(--sub); margin-top:3px }

/* Profile menu */
.profile-menu { background:var(--card) }
.pm-item {
  display:flex; align-items:center; gap:12px;
  padding:16px; border-bottom:1px solid var(--border);
  cursor:pointer; font-size:.9375rem; font-weight:500; transition:background .15s;
}
.pm-item:active { background:var(--card2) }
.pm-item:last-child { border:none }

/* Settings */
.settings-section { background:var(--card); border-radius:20px; overflow:hidden; margin:0 16px 12px }
.settings-section-title {
  font-size:.75rem; font-weight:700; color:var(--sub2);
  text-transform:uppercase; letter-spacing:.08em;
  padding:16px 16px 8px; margin-top:4px;
}
.settings-profile {
  display:flex; align-items:center; gap:14px; padding:16px;
  background:var(--card); border-radius:20px; margin:16px;
  cursor:pointer; border:1px solid var(--border2); transition:background .15s;
}
.settings-profile:active { background:var(--card2) }
.setting-row {
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s;
}
.setting-row:last-child { border:none }
.setting-row:active { background:var(--card2) }
.set-ico {
  width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0;
}
.set-ico.purple { background:rgba(124,58,237,.2); color:#c084fc }
.set-ico.blue   { background:rgba(59,130,246,.2); color:#93c5fd }
.set-ico.green  { background:rgba(16,185,129,.2); color:#6ee7b7 }
.set-ico.yellow { background:rgba(251,191,36,.2); color:#fcd34d }
.set-ico.red    { background:rgba(244,63,94,.2); color:#fda4af }
.set-lbl { flex:1; font-size:.9375rem; font-weight:500 }
.set-sub { font-size:.78rem; color:var(--sub); margin-top:2px }
.set-val { color:var(--sub); font-size:.875rem }
.set-arr { color:var(--sub2); font-size:1.1rem }
.set-tog {
  width:48px; height:28px; border-radius:14px; background:var(--card2);
  border:1.5px solid var(--border); position:relative; transition:background .3s;
  flex-shrink:0; cursor:pointer;
}
.set-tog.on { background:var(--accent); border-color:var(--accent) }
.tog-knob {
  position:absolute; top:2px; left:2px; width:20px; height:20px;
  border-radius:50%; background:#fff; transition:transform .25s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 2px 4px rgba(0,0,0,.3);
}
.set-tog.on .tog-knob { transform:translateX(20px) }

/* ─── CHAT PAGE ───────────────────────────────────────── */
.chat-header {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; padding-top:calc(10px + var(--safe-t));
  background:rgba(10,10,15,.9);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.chat-header-info { flex:1; min-width:0 }
#chat-header-name { font-weight:700; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#chat-header-sub { font-size:.75rem; color:var(--green); margin-top:1px }
.chat-pinned {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  background:rgba(124,58,237,.1); border-bottom:1px solid rgba(124,58,237,.2);
  flex-shrink:0; font-size:.85rem;
}
#msg-list { flex:1; overflow-y:auto; padding:12px 8px; background:var(--bg) }
.msg-row { display:flex; align-items:flex-end; gap:8px; margin-bottom:6px }
.msg-row.me { flex-direction:row-reverse }
.bubble {
  max-width:75%; padding:10px 14px; border-radius:18px;
  font-size:.9375rem; line-height:1.5; word-break:break-word; position:relative;
}
.bubble.in {
  background:var(--card); border-bottom-left-radius:4px;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.bubble.out {
  background:var(--grad); color:#fff; border-bottom-right-radius:4px;
  box-shadow:0 4px 16px rgba(124,58,237,.35);
}
.bubble-sender { font-size:.75rem; font-weight:700; color:var(--accent3); margin-bottom:4px }
.bubble-meta { display:flex; gap:4px; align-items:center; margin-top:4px; justify-content:flex-end }
.btime { font-size:.68rem; opacity:.6 }
.btick { font-size:.72rem; color:rgba(255,255,255,.7) }
.bubble.in .btime { opacity:.5 }
.msg-date-sep {
  text-align:center; font-size:.72rem; color:var(--sub2);
  margin:10px 0; padding:4px 12px; background:var(--card2);
  border-radius:10px; display:inline-block; align-self:center;
}

/* Chat input */
.chat-input-bar {
  display:flex; align-items:flex-end; gap:8px;
  padding:10px 12px; padding-bottom:calc(10px + var(--safe-b));
  background:rgba(10,10,15,.9);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--border); flex-shrink:0;
}
.msg-inp-wrap {
  flex:1; display:flex; align-items:center; gap:8px;
  background:var(--card); border-radius:24px;
  padding:8px 12px; border:1.5px solid var(--border);
  transition:border .15s;
}
.msg-inp-wrap:focus-within { border-color:var(--accent) }
#msg-inp {
  flex:1; border:none; background:transparent; font-size:.9375rem;
  color:var(--fg); resize:none; max-height:120px; line-height:1.4;
}
#msg-inp:focus { outline:none }
#msg-inp::placeholder { color:var(--sub2) }
.input-action-btn {
  background:none; border:none; font-size:1.2rem; color:var(--sub); transition:color .15s;
}
.input-action-btn:active { color:var(--accent) }
#msg-send-btn,.msg-send-btn {
  width:42px; height:42px; border-radius:50%; background:var(--grad);
  border:none; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(124,58,237,.4); transition:transform .15s;
}
#msg-send-btn:active,.msg-send-btn:active { transform:scale(.92) }

/* Attach menu */
.attach-menu {
  position:absolute; bottom:80px; left:12px; right:12px;
  background:var(--card); border-radius:20px; border:1px solid var(--border2);
  box-shadow:var(--shadow); overflow:hidden; display:none; z-index:100;
}
.attach-menu.open { display:block }
.attach-menu button {
  display:flex; align-items:center; gap:12px; width:100%; padding:14px 16px;
  background:none; border:none; border-bottom:1px solid var(--border);
  color:var(--fg); font-size:.9375rem; text-align:left; transition:background .15s;
}
.attach-menu button:last-child { border:none }
.attach-menu button:active { background:var(--card2) }

/* ─── SHEETS ──────────────────────────────────────────── */
.sheet {
  position:absolute; bottom:0; left:0; right:0;
  background:var(--card); border-radius:24px 24px 0 0;
  box-shadow:0 -8px 48px rgba(0,0,0,.6); z-index:200;
  transform:translateY(100%); transition:transform .35s cubic-bezier(.32,.72,0,1);
  overflow:hidden; border-top:1px solid var(--border2);
}
.sheet.open { transform:translateY(0) }
.sh-handle {
  width:38px; height:4px; background:var(--border2);
  border-radius:2px; margin:12px auto 0;
}
.sh-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 16px 12px; border-bottom:1px solid var(--border);
}
.sh-title { font-size:1.0625rem; font-weight:800 }
.sh-close {
  width:30px; height:30px; border-radius:50%; background:var(--card2);
  border:none; font-size:1rem; display:flex; align-items:center; justify-content:center;
  color:var(--sub);
}
.sh-scroll { padding:16px; overflow-y:auto; max-height:60vh }
.sh-tall .sh-scroll { max-height:75vh }

/* Contact sheet */
.sh-ava-lg {
  width:72px; height:72px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.75rem; font-weight:700; color:#fff;
}
.sh-row { display:flex; align-items:center; gap:14px; margin-bottom:16px }
.sh-name { font-size:1.125rem; font-weight:800 }
.sh-user { font-size:.875rem; color:var(--sub) }
.sh-bio  { font-size:.875rem; color:rgba(240,240,248,.75); margin-top:4px; line-height:1.5 }
.sh-btns { display:flex; gap:8px; margin-top:4px }

/* Comments */
.comments-list { display:flex; flex-direction:column; gap:14px }
.comment-row { display:flex; gap:10px }
.comment-body { flex:1 }
.comment-name { font-size:.85rem; font-weight:700; margin-bottom:4px }
.comment-text { font-size:.9rem; line-height:1.5; color:rgba(240,240,248,.9) }
.comment-meta { display:flex; gap:12px; margin-top:6px }
.comment-meta span { font-size:.75rem; color:var(--sub) }
.comment-input-row {
  display:flex; gap:8px; padding:12px 16px;
  border-top:1px solid var(--border); background:var(--card);
}
.comment-input-row input {
  flex:1; background:var(--bg2); border:1.5px solid var(--border);
  border-radius:24px; padding:10px 16px; font-size:.9rem; color:var(--fg);
}
.comment-input-row input:focus { outline:none; border-color:var(--accent) }

/* QR */
.qr-wrap { display:flex; flex-direction:column; align-items:center; gap:16px; padding:24px 0 }
.qr-canvas { width:200px; height:200px; background:#fff; border-radius:16px; padding:10px }
.qr-url { font-size:.8rem; color:var(--sub); text-align:center }

/* Gift */
.gift-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:4px }
.gift-item {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 8px; background:var(--bg2); border-radius:16px;
  cursor:pointer; transition:all .2s; border:1.5px solid transparent;
}
.gift-item:active,.gift-item.selected {
  background:rgba(124,58,237,.15); border-color:var(--accent);
  transform:scale(.96);
}
.gift-emoji { font-size:1.75rem }
.gift-label { font-size:.7rem; color:var(--sub); text-align:center }
.gift-price { font-size:.72rem; color:var(--accent3); font-weight:700 }
@keyframes gift-float {
  0%   { transform:translateY(0) scale(1); opacity:1 }
  100% { transform:translateY(-180px) scale(1.4); opacity:0 }
}
.gift-float {
  position:fixed; bottom:80px; font-size:2.5rem; z-index:9000;
  animation:gift-float 2s ease-out forwards; pointer-events:none;
}

/* Poll */
.poll-bubble {
  background:var(--card2); border-radius:16px; padding:14px;
  border:1px solid var(--border2);
}
.poll-question { font-size:.95rem; font-weight:700; margin-bottom:10px }
.poll-opt {
  position:relative; overflow:hidden; border-radius:10px; padding:10px 12px;
  background:var(--bg2); border:1.5px solid var(--border);
  margin-bottom:6px; cursor:pointer; display:flex; align-items:center;
  gap:8px; font-size:.875rem; transition:border .2s;
}
.poll-opt:active { border-color:var(--accent) }
.poll-opt-bar {
  position:absolute; top:0; left:0; bottom:0;
  background:rgba(124,58,237,.25); transition:width .4s ease;
}
.poll-opt span { position:relative; z-index:1 }

/* ─── EXPLORE ─────────────────────────────────────────── */
.exp-tabs {
  display:flex; gap:0; background:var(--card);
  border-bottom:1px solid var(--border); flex-shrink:0; overflow-x:auto;
}
.exp-tabs::-webkit-scrollbar { display:none }
.exp-tab {
  flex:1; min-width:70px; padding:14px 4px; border:none;
  background:transparent; color:var(--sub); font-size:.8125rem; font-weight:700;
  border-bottom:2px solid transparent; transition:all .2s; white-space:nowrap;
}
.exp-tab.active { color:var(--accent3); border-bottom-color:var(--accent) }
.exp-section-title {
  font-size:.78rem; font-weight:700; color:var(--sub); text-transform:uppercase;
  letter-spacing:.07em; padding:16px 16px 8px;
}
.exp-tag-item {
  display:flex; align-items:center; gap:14px; padding:12px 16px;
  cursor:pointer; transition:background .15s; border-bottom:1px solid var(--border);
}
.exp-tag-item:active { background:var(--card) }
.exp-tag-ico {
  width:46px; height:46px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; flex-shrink:0;
}
.exp-tag-info { flex:1 }
.exp-tag-name { font-weight:700; font-size:.9375rem }
.exp-tag-count { font-size:.78rem; color:var(--sub); margin-top:3px }
.exp-tag-rank { font-size:.8rem; color:var(--sub2); font-weight:700 }
.exp-person-row {
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--border); transition:background .15s;
}
.exp-person-row:active { background:var(--card) }
.exp-tag-chip {
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; margin:6px;
  background:var(--card); border-radius:20px; border:1.5px solid var(--border2);
  cursor:pointer; font-size:.875rem; font-weight:600; transition:all .2s;
}
.exp-tag-chip:active { background:rgba(124,58,237,.15); border-color:var(--accent) }

/* ─── NOTIFICATIONS ───────────────────────────────────── */
.notif-row {
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s;
}
.notif-row:active { background:var(--card2) }
.notif-row.unread { background:rgba(124,58,237,.06) }
.notif-info { flex:1; min-width:0 }
.notif-text { font-size:.875rem; line-height:1.4; color:var(--fg) }
.notif-text b { color:var(--fg); font-weight:700 }
.notif-time { font-size:.72rem; color:var(--sub); margin-top:3px }

/* ─── SHOP ────────────────────────────────────────────── */
.shop-tabs {
  display:flex; background:var(--card);
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.shop-tab {
  flex:1; padding:14px 0; border:none; background:transparent;
  color:var(--sub); font-size:.875rem; font-weight:700;
  border-bottom:2px solid transparent; transition:all .2s;
}
.shop-tab.active { color:var(--accent3); border-bottom-color:var(--accent) }
.sticker-packs {
  display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px;
}
.sticker-pack {
  background:var(--card); border-radius:18px; padding:16px;
  text-align:center; border:1px solid var(--border); transition:transform .15s;
}
.sticker-pack:active { transform:scale(.97) }
.sp-emoji { font-size:2.5rem; margin-bottom:8px }
.sp-name { font-weight:700; font-size:.875rem; margin-bottom:4px }
.sp-count { font-size:.75rem; color:var(--sub); margin-bottom:10px }
.sp-btn { width:100% }
.theme-list { padding:16px; display:flex; flex-direction:column; gap:10px }
.theme-item {
  display:flex; align-items:center; gap:12px; padding:12px;
  background:var(--card); border-radius:16px; border:1px solid var(--border);
}
.theme-preview {
  width:52px; height:34px; border-radius:10px; overflow:hidden;
  display:flex; flex-shrink:0;
}
.theme-info { flex:1 }
.theme-name { font-weight:700; font-size:.9rem }
.theme-price { font-size:.78rem; color:var(--sub); margin-top:2px }

/* ─── WALLET ──────────────────────────────────────────── */
.wallet-card {
  margin:20px 16px 0; padding:28px 24px;
  background:var(--grad); border-radius:24px;
  color:#fff; text-align:center; box-shadow:var(--glow);
  position:relative; overflow:hidden;
}
.wallet-card::before {
  content:''; position:absolute; width:200px; height:200px; border-radius:50%;
  background:rgba(255,255,255,.1); top:-60px; right:-60px;
}
.wallet-label { font-size:.8rem; opacity:.75; text-transform:uppercase; letter-spacing:.06em }
.wallet-balance { font-size:2.75rem; font-weight:900; letter-spacing:-.04em; margin:8px 0 4px }
.wallet-actions { display:flex; gap:10px; padding:16px; }
.wallet-actions .btn-primary,.wallet-actions .btn-outline { flex:1 }
.wallet-history-title { font-size:.75rem; font-weight:700; color:var(--sub); text-transform:uppercase; letter-spacing:.07em; padding:16px 16px 8px }
.wallet-history { padding:0 16px 24px; display:flex; flex-direction:column; gap:2px }
.tx-row {
  display:flex; align-items:center; gap:12px; padding:14px;
  background:var(--card); border-radius:16px; border:1px solid var(--border);
  margin-bottom:8px;
}
.tx-ico { font-size:1.4rem; width:40px; height:40px; background:var(--card2); border-radius:12px; display:flex; align-items:center; justify-content:center }
.tx-label { font-size:.875rem; font-weight:600 }
.tx-time { font-size:.75rem; color:var(--sub); margin-top:2px }
.tx-amount { font-size:.9375rem; font-weight:800 }
.tx-amount.green { color:var(--green) }
.tx-amount.red { color:var(--red) }

/* ─── OVERLAY ─────────────────────────────────────────── */
#overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.65);
  z-index:190; opacity:0; pointer-events:none; transition:opacity .3s;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
#overlay.show { opacity:1; pointer-events:auto }

/* ─── STORY VIEWER ────────────────────────────────────── */
.story-viewer {
  position:absolute; inset:0; background:#000;
  z-index:1000; display:none; flex-direction:column;
}
.story-viewer.open { display:flex }
.sv-progress { display:flex; gap:3px; padding:12px 12px 0; flex-shrink:0 }
.sv-bar { flex:1; height:3px; background:rgba(255,255,255,.35); border-radius:2px }
.sv-bar.done { background:rgba(255,255,255,.9) }
.sv-bar.active {
  background:rgba(255,255,255,.9);
  animation:sv-fill 4s linear forwards;
}
@keyframes sv-fill { from { opacity:.5 } to { opacity:1 } }
.sv-header {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; color:#fff; flex-shrink:0;
}
.sv-content {
  flex:1; cursor:pointer; position:relative;
}
.sv-prog-bar { flex:1; height:3px; background:rgba(255,255,255,.35); border-radius:2px; overflow:hidden }
.sv-prog-fill { height:100%; background:rgba(255,255,255,.9); border-radius:2px; transition:width .1s }
.sv-actions {
  display:flex; align-items:center; gap:10px;
  padding:12px; padding-bottom:calc(12px + var(--safe-b));
}
.sv-reply {
  flex:1; background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.25);
  border-radius:24px; padding:11px 16px; color:#fff; font-size:.9rem;
}
.sv-reply:focus { outline:none; border-color:rgba(255,255,255,.5) }
.sv-reply::placeholder { color:rgba(255,255,255,.5) }
.sv-heart { background:none; border:none; font-size:1.5rem; }

/* ─── ONBOARDING ──────────────────────────────────────── */
.onboarding {
  position:fixed; inset:0; background:var(--bg); z-index:5000;
  display:flex; flex-direction:column;
}
.ob-slides { flex:1; overflow:hidden; position:relative }
.ob-slide {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:40px 32px;
  text-align:center; opacity:0; transform:translateX(60px); transition:all .4s cubic-bezier(.4,0,.2,1);
}
.ob-slide.active { opacity:1; transform:none }
.ob-icon { font-size:5rem; margin-bottom:24px; filter:drop-shadow(0 8px 24px rgba(124,58,237,.5)) }
.ob-title { font-size:1.75rem; font-weight:900; letter-spacing:-.04em; margin-bottom:12px }
.ob-desc { font-size:.9375rem; color:var(--sub); line-height:1.6; max-width:300px }
.ob-dots {
  display:flex; gap:8px; justify-content:center; padding:20px;
}
.ob-dot {
  width:8px; height:8px; border-radius:4px; background:var(--border2);
  transition:all .3s;
}
.ob-dot.active { width:24px; background:var(--accent) }
.ob-btn-row { padding:20px 24px; padding-bottom:calc(20px + var(--safe-b)); display:flex; flex-direction:column; gap:10px }
.ob-btn { width:100%; padding:17px; border:none; border-radius:18px; background:var(--grad); color:#fff; font-size:1rem; font-weight:700; box-shadow:0 8px 24px rgba(124,58,237,.4) }
.ob-skip { background:none; border:none; color:var(--sub); font-size:.9rem; padding:8px }

/* ─── TOAST ───────────────────────────────────────────── */
#toast {
  position:fixed; bottom:calc(var(--nav-h) + 20px); left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--card2); color:var(--fg); padding:11px 20px;
  border-radius:14px; font-size:.875rem; font-weight:600; z-index:9999;
  box-shadow:var(--shadow); border:1px solid var(--border2);
  white-space:nowrap; opacity:0; pointer-events:none; transition:all .3s;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0) }

/* ─── MISC UTILITIES ──────────────────────────────────── */
.filter-row { display:flex; gap:8px; padding:10px 16px; overflow-x:auto; background:var(--card); flex-shrink:0; border-bottom:1px solid var(--border) }
.filter-row::-webkit-scrollbar { display:none }
.filter-chip { padding:6px 14px; border:1.5px solid var(--border); border-radius:20px; background:transparent; color:var(--sub); font-size:.8125rem; font-weight:600; cursor:pointer; white-space:nowrap; transition:all .15s }
.filter-chip.active { background:rgba(124,58,237,.2); color:var(--accent3); border-color:rgba(124,58,237,.4) }

.contacts-hd,.contacts-section-title { font-size:.78rem; font-weight:700; color:var(--sub2); text-transform:uppercase; letter-spacing:.07em; padding:14px 16px 6px; background:var(--bg) }
.contact-row { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer }
.contact-name { font-weight:700; font-size:.9375rem }
.contact-sub { font-size:.78rem; color:var(--sub); margin-top:2px }
.contact-info { flex:1 }

.input-bg { background:var(--bg2) }

/* Scan viewfinder */
.scan-viewfinder { width:200px; height:200px; margin:24px auto; border-radius:24px; background:var(--bg2); border:2px solid var(--accent); display:flex; align-items:center; justify-content:center; font-size:4rem; position:relative; overflow:hidden }
.scan-viewfinder::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad); animation:scan-line 2s ease-in-out infinite }
@keyframes scan-line { 0%,100% { top:0 } 50% { top:calc(100% - 2px) } }

/* New post / story sheet */
.media-picker { display:flex; gap:10px; flex-wrap:wrap; padding:16px }
.media-pick-btn { flex:1; min-width:120px; padding:16px; background:var(--bg2); border-radius:16px; border:1.5px solid var(--border); display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; font-size:.875rem; font-weight:600 }
.mood-grid { display:flex; gap:10px; flex-wrap:wrap; padding:0 16px 16px }
.mood-btn { padding:8px 14px; border:1.5px solid var(--border); border-radius:20px; background:transparent; font-size:.875rem; cursor:pointer; transition:all .2s }
.mood-btn.sel { background:rgba(124,58,237,.2); border-color:var(--accent); color:var(--accent3) }

/* Call screen */
.call-screen { position:absolute; inset:0; background:linear-gradient(160deg,#1a0533,#0a0a0f); z-index:2000; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:60px 32px; text-align:center }
.call-ava { width:110px; height:110px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.75rem; font-weight:700; color:#fff; box-shadow:0 0 48px rgba(124,58,237,.5); border:3px solid rgba(255,255,255,.15) }
.call-name { font-size:1.625rem; font-weight:800; color:#fff; margin-top:16px }
.call-status { color:rgba(255,255,255,.6); margin-top:6px }
.call-timer { font-size:1.5rem; font-weight:700; color:#fff; letter-spacing:.05em }
.call-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap }
.call-btn { width:64px; height:64px; border-radius:50%; border:none; background:rgba(255,255,255,.1); color:#fff; font-size:1.5rem; display:flex; align-items:center; justify-content:center; transition:all .2s }
.call-btn:active { transform:scale(.9) }
.call-btn.end { background:var(--red); box-shadow:0 4px 24px rgba(244,63,94,.5) }
.call-btn.on { background:rgba(124,58,237,.4) }

/* Reply */
.reply-preview { display:flex; align-items:center; gap:8px; padding:8px 14px; background:rgba(124,58,237,.1); border-left:3px solid var(--accent); border-radius:8px; margin-bottom:6px; font-size:.8rem }
.reply-cancel { background:none; border:none; color:var(--sub); margin-left:auto }

/* Emoji / sticker panels */
.panel-tabs { display:flex; border-bottom:1px solid var(--border); padding:0 8px; background:var(--card) }
.panel-tab { flex:1; padding:10px 0; border:none; background:transparent; border-bottom:2px solid transparent; color:var(--sub); font-size:.8125rem; font-weight:700; transition:all .2s }
.panel-tab.active { color:var(--accent3); border-bottom-color:var(--accent) }
.emoji-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; padding:8px }
.emoji-btn { border:none; background:transparent; font-size:1.4rem; padding:6px; border-radius:8px; cursor:pointer; transition:background .15s }
.emoji-btn:active { background:var(--card2) }

/* Reaction row */
.reactions-row { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px }
.reaction-chip { display:inline-flex; align-items:center; gap:3px; padding:3px 8px; background:var(--card2); border-radius:12px; font-size:.8rem; border:1px solid var(--border); cursor:pointer }
.reaction-chip.mine { border-color:var(--accent); background:rgba(124,58,237,.15) }

/* Bubble sender color */
.bubble-sender { font-size:.75rem; font-weight:700; color:var(--accent3); margin-bottom:4px }

/* Scroll area in profile */
.profile-scroll { flex:1; overflow-y:auto }

/* Skeleton / loading states */
.skel { background:linear-gradient(90deg,var(--card),var(--card2),var(--card)); background-size:200% 100%; animation:skel-wave 1.4s infinite; border-radius:8px }
@keyframes skel-wave { 0% { background-position:200% 0 } 100% { background-position:-200% 0 } }

/* Group creation */
.grp-selected { display:flex; gap:8px; padding:12px 16px; overflow-x:auto; flex-shrink:0; background:var(--card); border-bottom:1px solid var(--border) }
.grp-sel-item { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer }
.grp-sel-rem { position:absolute; top:-2px; right:-2px; width:18px; height:18px; border-radius:50%; background:var(--red); color:#fff; font-size:.6rem; display:flex; align-items:center; justify-content:center }

/* ─── LEGACY SHEET OVERLAY (app.js HTML uses .sh-overlay/.sh) ─── */
.sh-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.65);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  z-index:190; display:none; align-items:flex-end;
}
.sh-overlay:not(.hidden) { display:flex }
.sh {
  background:var(--card); border-radius:24px 24px 0 0; width:100%;
  box-shadow:0 -8px 48px rgba(0,0,0,.6); border-top:1px solid var(--border2);
  max-height:90vh; overflow-y:auto; padding-bottom:env(safe-area-inset-bottom,0px);
  transform:translateY(0); transition:transform .35s cubic-bezier(.32,.72,0,1);
}
.sh-pull,.sh-handle {
  width:38px; height:4px; background:var(--border2);
  border-radius:2px; margin:12px auto 4px;
}
.sh-title {
  font-size:1.0625rem; font-weight:800; padding:8px 16px 14px;
}
.sh-title-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 16px 12px; border-bottom:1px solid var(--border);
}
.sh-label {
  font-size:.8125rem; font-weight:700; color:var(--sub2);
  text-transform:uppercase; letter-spacing:.06em;
  padding:12px 16px 6px;
}
.sh-row {
  display:flex; gap:10px; padding:12px 16px;
  border-top:1px solid var(--border);
}
.sh-row .btn-ghost, .sh-row .btn-cta { flex:1 }
.sh-mood {
  display:flex; gap:8px; flex-wrap:wrap; padding:8px 16px 14px;
}
.sh textarea, .sh input:not([type=submit]) {
  width:100%; margin:0 16px 4px; padding:12px 14px;
  background:var(--bg2); border:1.5px solid var(--border);
  border-radius:14px; color:var(--fg); font-size:.9375rem; resize:none;
  box-sizing:border-box; width:calc(100% - 32px);
}
.sh textarea:focus, .sh input:focus { outline:none; border-color:var(--accent) }
.sh form { padding-top:4px }
.sh .inp-group { margin:4px 16px 8px }
.sh-submit { flex:2 }

/* ─── CONTACT SHEET (profile modal) ──────────────────────── */
.contact-sheet-header { text-align:center; padding:16px 16px 12px }
.contact-sheet-header .ava { margin:0 auto 10px; display:flex; align-items:center; justify-content:center; font-size:1.5rem }
.contact-sheet-name { font-size:1.25rem; font-weight:800 }
.contact-sheet-handle { color:var(--sub); font-size:.875rem; margin-top:4px }
.contact-sheet-bio { margin-top:8px; font-size:.9rem; color:var(--sub); line-height:1.4 }
.contact-sheet-stats { margin-top:12px; display:flex; gap:16px; justify-content:center; font-size:.875rem }
.contact-sheet-stats .stat-lbl { color:var(--sub); font-weight:500 }
.contact-online-badge { display:inline-block; margin-top:8px; background:rgba(34,197,94,.2); color:#22c55e; padding:4px 12px; border-radius:12px; font-size:.75rem; font-weight:700 }

.contact-action-row {
  display:flex; gap:10px; justify-content:center; padding:12px 16px;
  flex-wrap:wrap;
}
.contact-act-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 20px; border-radius:14px; border:1.5px solid var(--border2);
  background:var(--card2); color:var(--fg); font-size:.9rem; font-weight:600;
  cursor:pointer; transition:all .15s;
}
.contact-act-btn.prim { background:var(--grad); color:#fff; border:none }
.contact-act-btn:active { transform:scale(.97); opacity:.9 }
.contact-act-btn span { font-size:1.1rem }

/* ─── BUTTON GHOST ──────────────────────────────────────── */
.btn-ghost {
  padding:11px 18px; border:1.5px solid var(--border2);
  border-radius:14px; background:transparent;
  color:var(--sub); font-size:.875rem; font-weight:600; transition:all .15s;
}
.btn-ghost:active { background:var(--card2) }

/* ─── NAV ICON WRAPPER (legacy HTML structure) ───────────── */
.nb-ico-wrap { position:relative; display:flex; align-items:center; justify-content:center }
.nb-ico { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8 }
.nb .nb-badge {
  position:absolute; top:-4px; right:-4px;
  background:var(--red); color:#fff; font-size:.55rem; font-weight:700;
  border-radius:8px; padding:1px 5px; min-width:16px; text-align:center;
  border:2px solid var(--bg);
}
.nb-center-btn {
  width:56px; height:56px; border-radius:50%; background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 28px rgba(124,58,237,.7); color:#fff;
  transition:transform .2s, box-shadow .2s;
}
.nb-center-btn:active { transform:scale(.92) }
.nb.nb-center {
  flex:none; background:none; border:none;
  padding:0; width:64px;
  display:flex; align-items:center; justify-content:center;
  margin-top:-20px;
}

/* ─── QR SHEET ──────────────────────────────────────────── */
#qr-canvas {
  width:200px; height:200px; background:#fff;
  border-radius:16px; padding:8px; display:block;
}

/* ─── CHAT TYPE BUTTONS ─────────────────────────────────── */
.chat-type-row { display:flex; gap:10px; padding:8px 16px 16px }
.chat-type-btn {
  flex:1; padding:14px 8px; background:var(--bg2);
  border:1.5px solid var(--border); border-radius:16px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:pointer; font-size:.8125rem; font-weight:600; transition:all .2s;
}
.chat-type-btn.active { background:rgba(124,58,237,.15); border-color:var(--accent); color:var(--accent3) }
.ct-ico { font-size:1.5rem }

/* ─── STORY PREVIEW IN SHEET ────────────────────────────── */
.story-preview {
  margin:8px 16px; height:160px; border-radius:18px;
  background:var(--grad); display:flex; align-items:center;
  justify-content:center; overflow:hidden;
}
.sp-text { color:#fff; font-size:1.1rem; font-weight:700; text-align:center; padding:16px }
.story-bg-pick {
  display:flex; gap:8px; padding:0 16px 12px; overflow-x:auto;
}
.story-bg-pick::-webkit-scrollbar { display:none }
.bg-opt {
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  cursor:pointer; border:2px solid transparent; transition:transform .15s;
}
.bg-opt.active { border-color:#fff; transform:scale(1.1) }

/* ─── POLL OPTIONS IN SHEET ─────────────────────────────── */
.poll-opt-row {
  display:flex; align-items:center; gap:8px; padding:4px 16px;
}
.poll-opt-row .poll-opt, .poll-opt-row input {
  flex:1; background:var(--bg2); border:1.5px solid var(--border);
  border-radius:12px; padding:10px 12px; color:var(--fg); font-size:.9rem;
  margin:0;
}
.poll-rm { background:none; border:none; color:var(--sub); font-size:1.1rem; padding:6px }

/* ─── GREET / ONBOARDING SLIDE BG GRADIENT ──────────────── */
.ob-slide:nth-child(1)::before { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(124,58,237,.15); filter:blur(80px); top:10%; left:50%; transform:translateX(-50%); z-index:-1 }

/* ─── PROFILE PAGE SCROLL ───────────────────────────────────── */
.profile-pg,
#pg-profile {
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

/* ─── CHAT HEADER BACK BUTTON ───────────────────────────── */
#chat-back {
  width:36px; height:36px; background:var(--card2); border:none;
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:var(--fg); flex-shrink:0;
}

/* ─── PAGE SECTIONS NEEDING OVERFLOW ────────────────────── */
#pg-settings, #pg-notifications, #pg-wallet, #pg-shop, #pg-explore {
  overflow-y:auto;
}

/* ─── CONTACTS PAGE HEADER ───────────────────────────────── */
#contacts-hd {
  font-size:.78rem; font-weight:700; color:var(--sub2);
  text-transform:uppercase; letter-spacing:.07em;
  padding:12px 16px 6px; background:var(--bg);
}

/* ─── MISC FIXES ────────────────────────────────────────── */
.profile-scroll { flex:1; overflow-y:auto }
.feed-scroll    { flex:1; overflow-y:auto }
section[id^="pg-"] { position:relative }

/* Fix nb active state for icons */
.nb.active .nb-ico-wrap .nb-ico { filter:drop-shadow(0 0 8px rgba(192,132,252,.5)) }

/* Ensure pages with generated content scroll */
#pg-chats .list, #pg-contacts .list { flex:1; overflow-y:auto }

/* ═══════════════════════════════════════════════════════
   CHAT SCREEN OVERLAY
═══════════════════════════════════════════════════════ */
.chat-screen {
  position:absolute; inset:0; z-index:300;
  display:flex; flex-direction:column;
  background:var(--bg);
  transform:translateX(0);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
}
.chat-screen.hidden { display:none }
.slide-up { }  /* kept for compat */

/* ── Chat header bar ──────────────────────────────────── */
.cbar {
  display:flex; align-items:center; gap:8px;
  padding:0 8px; height:56px; flex-shrink:0;
  background:rgba(12,12,18,.95);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
}
.cbar-btn {
  width:38px; height:38px; border-radius:12px; border:none;
  background:transparent; color:var(--fg);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; cursor:pointer; transition:background .15s;
}
.cbar-btn:hover  { background:var(--card2) }
.cbar-btn:active { background:var(--card2); transform:scale(.92) }
.cbar-btn svg { width:20px; height:20px; display:block; pointer-events:none }
.cbar-info {
  flex:1; display:flex; align-items:center; gap:10px;
  min-width:0; overflow:hidden;
}
.cbar-ava {
  width:36px; height:36px; border-radius:50%;
  font-size:.95rem; font-weight:700; color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.cbar-name {
  font-size:.9375rem; font-weight:700; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.cbar-sub {
  font-size:.75rem; color:var(--sub); white-space:nowrap;
}
.cbar-actions { display:flex; gap:2px; flex-shrink:0 }

/* ── Pinned bar ───────────────────────────────────────── */
.pinned-bar {
  display:flex; align-items:center; gap:8px;
  padding:7px 14px; background:var(--card);
  border-bottom:1px solid var(--border);
  font-size:.8rem; flex-shrink:0;
}
.pinned-icon { font-size:1rem }
.pinned-text { flex:1; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pinned-close { background:none; border:none; color:var(--sub); font-size:.9rem; padding:4px }

/* ── Reply preview ────────────────────────────────────── */
.reply-preview {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; background:var(--card);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.reply-accent { width:3px; height:36px; border-radius:2px; background:var(--accent); flex-shrink:0 }
.reply-body   { flex:1; min-width:0 }
.reply-name   { font-size:.75rem; font-weight:700; color:var(--accent3) }
.reply-text   { font-size:.8rem; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.reply-close  { background:none; border:none; color:var(--sub); padding:4px; display:flex; align-items:center; justify-content:center }
.reply-close svg { width:16px; height:16px }

/* ── Messages area ────────────────────────────────────── */
.msgs-wrap {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:12px 12px 8px;
  display:flex; flex-direction:column;
  scroll-behavior:smooth;
}
.msgs-wrap::-webkit-scrollbar { width:3px }
.msgs-wrap::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px }
.msgs { display:flex; flex-direction:column; gap:4px; min-height:100% }

/* ── Message rows & bubbles ───────────────────────────── */
.msg-row {
  display:flex; align-items:flex-end; gap:7px;
  max-width:88%; animation:msg-in .2s ease;
}
@keyframes msg-in {
  from { opacity:0; transform:translateY(8px) }
  to   { opacity:1; transform:translateY(0)   }
}
.msg-row.me { align-self:flex-end; flex-direction:row-reverse }
.msg-sender-name { font-size:.72rem; font-weight:600; color:var(--accent3); padding:0 4px 2px }

.bubble {
  padding:9px 12px 6px; border-radius:18px;
  max-width:100%; word-break:break-word; font-size:.9375rem; line-height:1.45;
  position:relative;
}
.bubble.in {
  background:var(--card);
  border-radius:4px 18px 18px 18px;
}
.bubble.out {
  background:linear-gradient(135deg,#7C3AED,#6D28D9);
  color:#fff;
  border-radius:18px 18px 4px 18px;
}
.bubble-meta, .bubble-time {
  display:flex; align-items:center; justify-content:flex-end;
  gap:3px; margin-top:3px; flex-wrap:nowrap; white-space:nowrap;
}
.bubble-time .check { margin-left:2px; font-size:.68rem }
.btime { font-size:.68rem; color:rgba(255,255,255,.55) }
.bubble.in .btime { color:var(--sub) }
.btick { font-size:.68rem; color:rgba(255,255,255,.5) }
.btick.read { color:#93c5fd }
.bubble-reply {
  background:rgba(255,255,255,.12); border-left:3px solid rgba(255,255,255,.4);
  border-radius:8px; padding:5px 8px; margin-bottom:6px; cursor:pointer;
}
.bubble.in .bubble-reply { background:var(--bg2); border-left-color:var(--accent) }
.bubble-reply-name { font-size:.72rem; font-weight:700; color:var(--accent3) }
.bubble-reply-text { font-size:.78rem; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bubble-reactions { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px }
.react-chip {
  background:var(--card2); border:1px solid var(--border); border-radius:20px;
  padding:3px 8px; font-size:.8rem; display:flex; align-items:center; gap:3px;
  cursor:pointer; transition:all .15s;
}
.react-chip:active { transform:scale(.92) }
.rn { font-size:.72rem; color:var(--sub) }

/* ── Date divider ─────────────────────────────────────── */
.date-div {
  text-align:center; margin:8px 0; position:relative;
}
.date-div::before {
  content:''; position:absolute; top:50%; left:0; right:0;
  height:1px; background:var(--border);
}
.date-div span {
  position:relative; background:var(--bg);
  padding:2px 12px; font-size:.72rem; color:var(--sub);
  border-radius:20px; border:1px solid var(--border);
}

/* ── Voice message ────────────────────────────────────── */
.voice-msg {
  display:flex; align-items:center; gap:8px;
  min-width:160px;
}
.voice-play {
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.2); border:none; color:#fff;
  font-size:.85rem; display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
}
.bubble.in .voice-play { background:var(--accent); color:#fff }
.voice-wave { display:flex; align-items:center; gap:2px; flex:1; height:24px }
.voice-bar {
  width:3px; border-radius:2px; flex-shrink:0;
  background:rgba(255,255,255,.5); min-height:3px;
}
.bubble.in .voice-bar { background:var(--accent3) }
.voice-dur { font-size:.72rem; opacity:.7; white-space:nowrap }

/* ── Typing indicator ─────────────────────────────────── */
.typing-ind {
  display:flex; align-items:center; gap:8px;
  padding:6px 16px 4px; font-size:.8rem; color:var(--sub);
  flex-shrink:0;
}
.typing-dots { display:flex; gap:3px; align-items:center }
.typing-dots span {
  width:6px; height:6px; border-radius:50%;
  background:var(--sub2); animation:typing-dot .9s infinite;
}
.typing-dots span:nth-child(2) { animation-delay:.15s }
.typing-dots span:nth-child(3) { animation-delay:.3s }
@keyframes typing-dot {
  0%,60%,100% { transform:scale(1);   opacity:.5 }
  30%          { transform:scale(1.3); opacity:1  }
}

/* ── Message input row ────────────────────────────────── */
.msg-input-row {
  display:flex; align-items:center; gap:6px;
  padding:8px 10px;
  padding-bottom:calc(8px + var(--safe-b));
  flex-shrink:0;
  background:rgba(12,12,18,.95);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--border);
  position:relative;
  min-height:60px;
}
.msg-btn {
  width:42px; height:42px; border-radius:50%; border:none;
  background:var(--card2); color:var(--sub2);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; cursor:pointer; font-size:1.1rem;
  transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.msg-btn:active { transform:scale(.88); opacity:.8 }
.msg-btn svg { width:20px; height:20px; display:block; pointer-events:none }
.send-btn {
  background:var(--grad); color:#fff;
  box-shadow:0 2px 12px rgba(124,58,237,.5);
}
.voice-btn { background:var(--card2) }
.voice-btn.recording {
  background:rgba(239,68,68,.2);
  color:#ef4444;
  box-shadow:0 0 0 3px rgba(239,68,68,.3);
  animation:pulse-rec .8s ease-in-out infinite;
}
@keyframes pulse-rec {
  0%,100% { box-shadow:0 0 0 3px rgba(239,68,68,.3); }
  50% { box-shadow:0 0 0 6px rgba(239,68,68,.15); }
}
.msg-field-wrap {
  flex:1; background:var(--card);
  border:1.5px solid var(--border); border-radius:22px;
  padding:2px 14px; min-height:42px;
  display:flex; align-items:center;
  transition:border-color .15s;
}
.msg-field-wrap:focus-within { border-color:var(--accent) }
#msg-inp {
  flex:1; background:none; border:none; outline:none;
  color:var(--fg); font-size:.9375rem; line-height:1.4;
  padding:8px 0; resize:none; font-family:inherit;
}
#msg-inp::placeholder { color:var(--sub2) }

/* Voice recording overlay bar */
.voice-rec-bar {
  position:absolute; inset:0;
  background:rgba(12,12,18,.97);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px;
  padding-bottom:var(--safe-b);
  animation:fadeIn .15s ease;
}
.voice-rec-left {
  display:flex; align-items:center; gap:10px;
}
.voice-rec-dot {
  width:10px; height:10px; border-radius:50%; background:#ef4444;
  animation:pulse-rec .8s ease-in-out infinite;
}
.voice-rec-timer {
  font-size:1.1rem; font-weight:700; color:#ef4444; min-width:52px;
}
.voice-rec-hint {
  font-size:.8rem; color:var(--sub);
}
.voice-rec-cancel {
  padding:8px 16px; background:var(--card2); border:none; border-radius:20px;
  color:var(--sub); font-size:.875rem; cursor:pointer;
}
.voice-rec-send {
  padding:8px 18px; background:var(--grad); border:none; border-radius:20px;
  color:#fff; font-size:.875rem; font-weight:700; cursor:pointer;
  box-shadow:0 2px 8px rgba(124,58,237,.4);
}

/* ── Sticker / Emoji panels ───────────────────────────── */
.sticker-panel, .emoji-panel {
  background:var(--card); border-top:1px solid var(--border);
  height:220px; flex-shrink:0; display:flex; flex-direction:column;
}
.sticker-tabs, .emoji-cats {
  display:flex; gap:4px; padding:8px 12px 6px;
  overflow-x:auto; border-bottom:1px solid var(--border);
}
.sticker-tabs::-webkit-scrollbar, .emoji-cats::-webkit-scrollbar { display:none }
.sticker-grid, .emoji-grid {
  flex:1; display:flex; flex-wrap:wrap; gap:4px;
  padding:8px 12px; overflow-y:auto; align-content:flex-start;
}
.sticker-item, .emoji-item {
  width:56px; height:56px; display:flex; align-items:center;
  justify-content:center; font-size:1.8rem; border-radius:12px;
  cursor:pointer; transition:background .15s;
}
.sticker-item:hover, .emoji-item:hover { background:var(--card2) }

/* ── Message context menu ─────────────────────────────── */
.msg-ctx {
  position:absolute; background:var(--card);
  border:1px solid var(--border2); border-radius:16px;
  padding:4px; box-shadow:0 8px 32px rgba(0,0,0,.5);
  z-index:400; min-width:160px;
}
.msg-ctx button {
  display:flex; align-items:center; gap:8px;
  width:100%; padding:10px 14px;
  background:none; border:none; border-radius:12px;
  color:var(--fg); font-size:.875rem; cursor:pointer; text-align:left;
}
.msg-ctx button:hover { background:var(--card2) }

/* ── Attach menu ──────────────────────────────────────── */
.attach-menu {
  position:absolute; bottom:70px; left:12px;
  background:var(--card); border:1px solid var(--border2);
  border-radius:20px; padding:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  z-index:350; min-width:180px;
  display:none; flex-direction:column; gap:2px;
}
.attach-menu.open { display:flex }
.attach-menu button {
  padding:11px 16px; background:none; border:none; border-radius:14px;
  color:var(--fg); font-size:.9rem; text-align:left; cursor:pointer;
}
.attach-menu button:hover { background:var(--card2) }

/* ═══════════════════════════════════════════════════════
   INCOMING CALL OVERLAY
═══════════════════════════════════════════════════════ */
.incoming-call {
  position:absolute; inset:0; z-index:500;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:40px;
}
.incoming-call:not(.hidden) { display:flex }
.ic-blur-bg {
  position:absolute; inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
}
.ic-card {
  position:relative; width:calc(100% - 32px);
  background:var(--card); border-radius:28px;
  padding:32px 24px 24px; text-align:center;
  box-shadow:0 24px 64px rgba(0,0,0,.7);
  border:1px solid var(--border2);
  animation:ic-slide-up .4s cubic-bezier(.32,.72,0,1);
}
@keyframes ic-slide-up {
  from { transform:translateY(100px); opacity:0 }
  to   { transform:translateY(0);     opacity:1 }
}
.ic-pulse-ring {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:90px; height:90px; border-radius:50%;
  border:3px solid var(--accent);
  animation:ic-pulse 1.5s ease-out infinite;
  pointer-events:none;
}
@keyframes ic-pulse {
  0%   { transform:translate(-50%,-50%) scale(1);   opacity:.7 }
  100% { transform:translate(-50%,-50%) scale(2.2); opacity:0  }
}
.ic-ava {
  width:80px; height:80px; border-radius:50%; margin:0 auto 16px;
  font-size:2rem; font-weight:800; color:#fff;
  display:flex; align-items:center; justify-content:center;
  border:3px solid rgba(255,255,255,.15);
}
.ic-name { font-size:1.3rem; font-weight:800; margin-bottom:6px }
.ic-type { font-size:.9rem; color:var(--sub); margin-bottom:28px }
.ic-actions { display:flex; justify-content:space-around }
.ic-btn-wrap { display:flex; flex-direction:column; align-items:center; gap:8px }
.ic-btn {
  width:64px; height:64px; border-radius:50%; border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; transition:transform .15s, box-shadow .15s;
}
.ic-btn:active { transform:scale(.9) }
.ic-decline {
  background:#ef4444; color:#fff;
  box-shadow:0 4px 20px rgba(239,68,68,.5);
  transform:rotate(135deg);
}
.ic-decline:active { transform:rotate(135deg) scale(.9) }
.ic-accept {
  background:#22c55e; color:#fff;
  box-shadow:0 4px 20px rgba(34,197,94,.5);
}
.ic-btn-wrap span { font-size:.75rem; color:var(--sub); font-weight:600 }

/* ═══════════════════════════════════════════════════════
   VIDEO CALL OVERLAY
═══════════════════════════════════════════════════════ */
.video-call {
  position:absolute; inset:0; z-index:490;
  background:#000; flex-direction:column;
}
.video-call:not(.hidden) { display:flex }
.vc-remote {
  flex:1; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1a0533,#0f172a);
  position:relative;
}
.vc-remote-ava {
  width:100px; height:100px; border-radius:50%;
  font-size:2.5rem; font-weight:800; color:#fff;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad);
}
.vc-local {
  position:absolute; top:16px; right:16px;
  width:90px; height:120px; border-radius:16px;
  background:linear-gradient(135deg,#1e3a5f,#0369a1);
  border:2px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; color:rgba(255,255,255,.7); z-index:2;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}
.vc-header {
  position:absolute; top:0; left:0; right:0;
  padding:16px 20px;
  background:linear-gradient(to bottom,rgba(0,0,0,.7),transparent);
  z-index:3;
}
.vc-name { font-size:1.1rem; font-weight:700; color:#fff }
.vc-dur  { font-size:.85rem; color:rgba(255,255,255,.7) }
.vc-controls {
  position:absolute; bottom:0; left:0; right:0;
  display:flex; justify-content:space-around;
  padding:24px 16px 40px;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent);
  z-index:3;
}
.vc-btn-wrap { display:flex; flex-direction:column; align-items:center; gap:8px }
.vc-btn {
  width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.15); border:none; color:#fff;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(8px); transition:all .15s;
}
.vc-btn:active { transform:scale(.9) }
.vc-btn.muted, .vc-btn.cam-off { background:rgba(239,68,68,.4) }
.vc-end { background:#ef4444 !important; box-shadow:0 4px 20px rgba(239,68,68,.5) }
.vc-btn-wrap span { font-size:.7rem; color:rgba(255,255,255,.7); font-weight:600 }

/* ═══════════════════════════════════════════════════════
   EMOJI PICKER PANEL
═══════════════════════════════════════════════════════ */
.emoji-panel {
  background:var(--card); border-top:1px solid var(--border);
  height:260px; flex-shrink:0; display:flex; flex-direction:column;
  overflow:hidden;
}
.emoji-panel.hidden { display:none }
.emoji-cats {
  display:flex; gap:2px; padding:6px 10px;
  overflow-x:auto; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.emoji-cats::-webkit-scrollbar { display:none }
.emoji-cat-btn {
  padding:6px 10px; border-radius:10px; border:none;
  background:transparent; font-size:1.2rem; cursor:pointer;
  transition:background .15s; flex-shrink:0;
  font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji','Twemoji Mozilla',sans-serif;
}
.emoji-cat-btn.active { background:var(--card2) }
.emoji-grid {
  flex:1; display:flex; flex-wrap:wrap;
  padding:6px 8px; overflow-y:auto; align-content:flex-start; gap:2px;
  font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji','Twemoji Mozilla',sans-serif;
}
.emoji-grid::-webkit-scrollbar { width:3px }
.emoji-grid::-webkit-scrollbar-thumb { background:var(--border2) }
.emoji-item {
  width:40px; height:40px; display:flex; align-items:center;
  justify-content:center; font-size:1.5rem; border-radius:10px;
  cursor:pointer; transition:background .1s; user-select:none;
  font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji','Twemoji Mozilla',sans-serif;
  line-height:1;
}
.emoji-item:hover  { background:var(--card2) }
.emoji-item:active { transform:scale(.85) }

/* ═══════════════════════════════════════════════════════
   STICKER PANEL
═══════════════════════════════════════════════════════ */
.sticker-panel {
  background:var(--card); border-top:1px solid var(--border);
  height:220px; flex-shrink:0; display:flex; flex-direction:column;
}
.sticker-panel.hidden { display:none }
.sticker-tabs {
  display:flex; gap:4px; padding:6px 10px;
  overflow-x:auto; border-bottom:1px solid var(--border); flex-shrink:0;
}
.sticker-tabs::-webkit-scrollbar { display:none }
.sticker-tab-btn {
  padding:5px 10px; border-radius:10px; border:none;
  background:transparent; font-size:1.2rem; cursor:pointer; flex-shrink:0;
  font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji','Twemoji Mozilla',sans-serif;
}
.sticker-tab-btn.active { background:var(--card2) }
.sticker-grid {
  flex:1; display:flex; flex-wrap:wrap;
  padding:8px; overflow-y:auto; gap:4px; align-content:flex-start;
  font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji','Twemoji Mozilla',sans-serif;
}
.sticker-item {
  width:72px; height:72px; display:flex; align-items:center;
  justify-content:center; font-size:2.8rem; border-radius:16px;
  cursor:pointer; transition:all .12s;
  font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji','Twemoji Mozilla',sans-serif;
  line-height:1;
}
.sticker-item:hover  { background:var(--card2); transform:scale(1.08) }
.sticker-item:active { transform:scale(.9) }

/* ═══════════════════════════════════════════════════════
   MESSAGE CONTEXT MENU
═══════════════════════════════════════════════════════ */
.pulse-ctx {
  position:absolute; z-index:450;
  background:var(--card); border:1px solid var(--border2);
  border-radius:18px; padding:6px;
  box-shadow:0 12px 40px rgba(0,0,0,.6);
  min-width:190px;
  animation:ctx-pop .15s cubic-bezier(.32,.72,0,1);
}
@keyframes ctx-pop {
  from { transform:scale(.85); opacity:0 }
  to   { transform:scale(1);   opacity:1 }
}
.pulse-ctx.hidden { display:none }
.ctx-btn {
  display:flex; align-items:center; gap:10px;
  width:100%; padding:10px 14px; border-radius:12px;
  background:none; border:none; color:var(--fg);
  font-size:.9rem; cursor:pointer; text-align:left;
  transition:background .12s;
}
.ctx-btn:hover { background:var(--card2) }
.ctx-btn.danger { color:var(--red) }
.ctx-sep {
  height:1px; background:var(--border); margin:4px 8px;
}

/* ═══════════════════════════════════════════════════════
   REACTION PICKER (floats above bubble)
═══════════════════════════════════════════════════════ */
.pulse-react-pick {
  position:absolute; z-index:460;
  background:var(--card); border:1px solid var(--border2);
  border-radius:40px; padding:6px 10px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  animation:ctx-pop .15s cubic-bezier(.32,.72,0,1);
}
.pulse-react-pick.hidden { display:none }
.prp-row { display:flex; gap:4px }
.prp-emoji {
  font-size:1.7rem; padding:6px; border-radius:50%;
  cursor:pointer; transition:all .12s; user-select:none;
}
.prp-emoji:hover  { background:var(--card2); transform:scale(1.3) }
.prp-emoji:active { transform:scale(.9) }

/* ═══════════════════════════════════════════════════════
   CHAT INFO / SETTINGS SHEET
═══════════════════════════════════════════════════════ */
.chat-info-sh {
  position:absolute; inset:0; z-index:310;
  background:var(--bg); display:flex; flex-direction:column;
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
}
.chat-info-sh:not(.hidden) {
  display:flex; transform:translateX(0);
}
.ci-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; height:56px; flex-shrink:0;
  background:rgba(12,12,18,.95);
  backdrop-filter:blur(24px); border-bottom:1px solid var(--border);
}
.ci-back {
  width:38px; height:38px; border-radius:12px; border:none;
  background:transparent; color:var(--fg); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.ci-back:active { background:var(--card2) }
.ci-header h2 { font-size:1rem; font-weight:700 }
.ci-ava-wrap {
  display:flex; flex-direction:column; align-items:center;
  padding:24px 16px 16px; gap:10px;
}
.ci-ava {
  width:90px; height:90px; border-radius:50%;
  font-size:2.5rem; font-weight:800; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.ci-name { font-size:1.25rem; font-weight:800 }
.ci-sub  { font-size:.875rem; color:var(--sub) }
.ci-actions {
  display:flex; justify-content:center; gap:16px;
  padding:0 16px 16px;
}
.ci-act-btn {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  background:var(--card); border:none; border-radius:16px;
  padding:12px 16px; cursor:pointer; min-width:64px; flex:1; max-width:80px;
  transition:background .15s;
}
.ci-act-btn:active { background:var(--card2) }
.ci-act-icon { font-size:1.4rem }
.ci-act-lbl  { font-size:.68rem; color:var(--sub); font-weight:600 }
.ci-section {
  background:var(--card); border-radius:16px;
  margin:4px 12px 4px; overflow:hidden;
}
.ci-row {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--border);
  cursor:pointer; transition:background .15s;
}
.ci-row:last-child { border-bottom:none }
.ci-row:active { background:var(--card2) }
.ci-row-icon { font-size:1.2rem; width:28px; text-align:center }
.ci-row-text { flex:1; font-size:.9375rem }
.ci-row-text .sub { font-size:.8rem; color:var(--sub); margin-top:2px }
.ci-row-val  { font-size:.85rem; color:var(--sub) }
.ci-row.danger .ci-row-text { color:var(--red) }
.ci-media-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  margin:4px 12px;
}
.ci-media-cell {
  aspect-ratio:1; background:var(--card2); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; cursor:pointer;
}
.bubble.sticker-bubble {
  background:none !important; padding:4px; box-shadow:none;
  border-radius:0;
}

/* ─── CALL SCREEN ────────────────────────────────────────── */
.call-screen { z-index:480 }
.call-screen:not(.hidden) { display:flex; flex-direction:column }
.call-bg { position:absolute; inset:0; background:linear-gradient(135deg,#1a0533,#0c0a1e); z-index:0 }
.call-body { position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px }
.call-ava { width:100px; height:100px; border-radius:50%; font-size:2.5rem; font-weight:800; color:#fff; display:flex; align-items:center; justify-content:center; border:3px solid rgba(255,255,255,.15) }
.call-name { font-size:1.3rem; font-weight:800; color:#fff }
.call-status { font-size:.9rem; color:rgba(255,255,255,.6) }
.call-duration { font-size:1.5rem; font-weight:700; color:#fff; font-variant-numeric:tabular-nums }
.call-wave { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:3px; height:40px }
.cw-bar { width:3px; border-radius:2px; background:var(--accent); animation:cw-wave .8s ease-in-out infinite }
.cw-bar:nth-child(2) { animation-delay:.1s; height:60% }
.cw-bar:nth-child(3) { animation-delay:.2s; height:80% }
.cw-bar:nth-child(4) { animation-delay:.3s; height:100% }
.cw-bar:nth-child(5) { animation-delay:.4s; height:80% }
.cw-bar:nth-child(6) { animation-delay:.5s; height:60% }
.cw-bar:nth-child(7) { animation-delay:.6s; height:40% }
.cw-bar:nth-child(8) { animation-delay:.7s; height:20% }
@keyframes cw-wave {
  0%,100% { transform:scaleY(0.4) }
  50%      { transform:scaleY(1)   }
}
.call-btns { position:relative; z-index:1; display:flex; justify-content:space-around; width:100%; padding:16px 24px 48px }
.call-btn-wrap { display:flex; flex-direction:column; align-items:center; gap:8px }
.call-btn { width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.15); border:none; color:#fff; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px); transition:all .15s }
.call-btn:active { transform:scale(.9) }
.call-btn.muted { background:rgba(239,68,68,.4) }
.call-btn.speaker-on { background:rgba(34,197,94,.3) }
.call-end { background:#ef4444 !important; width:68px; height:68px; box-shadow:0 4px 24px rgba(239,68,68,.6) }
.call-btn-wrap span { font-size:.72rem; color:rgba(255,255,255,.65); font-weight:600 }

/* ─── NOTIFICATION BADGE ─────────────────────────────────── */
.notif-dot {
  position:fixed; top:12px; right:12px; z-index:600;
  background:var(--red); color:#fff; font-size:.7rem; font-weight:700;
  border-radius:20px; padding:4px 10px;
  box-shadow:0 2px 12px rgba(239,68,68,.5);
  animation:notif-in .3s cubic-bezier(.32,.72,0,1);
  cursor:pointer;
}
@keyframes notif-in {
  from { transform:translateY(-40px); opacity:0 }
  to   { transform:translateY(0);     opacity:1 }
}

/* ─── SEND BUTTON SHOW/HIDE ──────────────────────────────── */
#btn-send { transition:opacity .15s, transform .15s }
#btn-send.hidden { display:none }
#btn-voice { transition:opacity .15s }
#btn-voice.hidden { display:none }

/* ─── CHAT SEARCH BAR ─────────────────────────────────── */
.chat-search-bar {
  padding:8px 12px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.search-inp-wrap {
  display:flex; align-items:center; gap:8px;
  background:var(--card2); border-radius:14px; padding:8px 12px;
  border:1px solid var(--border);
}
.search-inp-wrap input {
  flex:1; border:none; background:transparent; outline:none;
  font-size:.9rem; color:var(--fg);
}
.search-inp-wrap svg { flex-shrink:0; color:var(--sub) }

/* ─── COMPOSE SHEET USERS ─────────────────────────────── */
.compose-user {
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius:14px; cursor:pointer;
  transition:background .15s;
}
.compose-user:hover { background:var(--card2) }
.compose-user.selected { background:rgba(124,58,237,.12) }
.compose-uname { flex:1; font-size:.9rem; font-weight:500 }
.compose-check {
  width:22px; height:22px; border-radius:50%; border:2px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:700; color:var(--accent);
  transition:all .15s;
}
.compose-user.selected .compose-check {
  background:var(--accent); color:#fff; border-color:var(--accent);
}

/* ─── XP BAR ──────────────────────────────────────────── */
.xp-bar-wrap { animation:fade-in .3s ease }
@keyframes fade-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* ─── RED ENVELOPE BUBBLE ─────────────────────────────── */
.envelope-bubble {
  background:linear-gradient(135deg,#7f1d1d,#ef4444) !important;
  min-width:160px; text-align:center;
}

/* ══════════════════════════════════════════════════════════
   LIVE STREAMS
══════════════════════════════════════════════════════════ */
.live-overlay {
  position:fixed;inset:0;z-index:900;display:flex;flex-direction:column;
  background:#000;overflow:hidden;
}
.live-bg {
  position:absolute;inset:0;z-index:0;
}
.live-emoji-bg {
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:30vw;opacity:.15;user-select:none;
}
.live-header {
  position:relative;z-index:1;display:flex;align-items:center;gap:10px;
  padding:12px 16px env(safe-area-inset-top,0);
}
.live-back {
  width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.5);
  border:none;color:#fff;font-size:1.2rem;cursor:pointer;
}
.live-badge {
  background:#ef4444;color:#fff;font-size:.7rem;font-weight:800;
  padding:3px 8px;border-radius:6px;letter-spacing:.05em;
}
.live-viewers {
  background:rgba(0,0,0,.4);color:#fff;font-size:.85rem;
  padding:4px 10px;border-radius:20px;backdrop-filter:blur(4px);
}
.live-streamer {
  position:relative;z-index:1;display:flex;align-items:center;gap:10px;
  padding:8px 16px;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);
}
.live-str-name { font-weight:700;color:#fff;font-size:.95rem }
.live-str-title { font-size:.8rem;color:rgba(255,255,255,.75) }
.live-comments {
  position:relative;z-index:1;flex:1;overflow-y:auto;padding:8px 12px;
  display:flex;flex-direction:column;gap:4px;
  mask-image:linear-gradient(to bottom,transparent,#000 30%);
}
.live-comment {
  display:inline-flex;gap:6px;align-items:center;
  background:rgba(0,0,0,.3);border-radius:20px;padding:4px 10px;
  max-width:90%;backdrop-filter:blur(4px);
}
.live-donation { background:rgba(124,58,237,.5)!important }
.live-cmnt-name { font-weight:600;font-size:.8rem }
.live-cmnt-name.av1{color:#a78bfa}.live-cmnt-name.av2{color:#fb7185}
.live-cmnt-name.av3{color:#34d399}.live-cmnt-name.av4{color:#60a5fa}
.live-cmnt-name.av5{color:#f9a8d4}.live-cmnt-name.av6{color:#fbbf24}
.live-cmnt-text { font-size:.85rem;color:#fff }
.live-gifts-row { display:flex;gap:8px;padding:4px 12px;position:relative;z-index:1 }
.live-input-row {
  position:relative;z-index:1;display:flex;align-items:center;gap:8px;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom,0));
  background:rgba(0,0,0,.5);backdrop-filter:blur(8px);
}
.live-input-row input {
  flex:1;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:24px;color:#fff;padding:10px 16px;font-size:.9rem;outline:none;
}
.live-input-row input::placeholder { color:rgba(255,255,255,.5) }
.live-gift-btn,.live-send-btn {
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.15);
  border:none;color:#fff;font-size:1.1rem;cursor:pointer;flex-shrink:0;
}
.live-send-btn { background:var(--accent) }
.live-list-item {
  display:flex;gap:12px;align-items:center;padding:12px 16px;cursor:pointer;
  border-radius:12px;transition:background .15s;
}
.live-list-item:hover { background:var(--card2) }
.live-list-thumb {
  width:64px;height:48px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;position:relative;overflow:hidden;
}

/* ══════════════════════════════════════════════════════════
   MINI APPS
══════════════════════════════════════════════════════════ */
.miniapps-overlay {
  position:fixed;inset:0;z-index:800;background:var(--bg);
  display:flex;flex-direction:column;
}
.ma-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:16px env(safe-area-inset-top,0) 16px 16px;
  border-bottom:1px solid var(--border);
}
.ma-header h2 { font-size:1.1rem;font-weight:700 }
.ma-close {
  width:36px;height:36px;border-radius:50%;background:var(--card2);
  border:none;color:var(--fg);font-size:1.2rem;cursor:pointer;
}
.ma-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  padding:20px 16px;overflow-y:auto;
}
.ma-item {
  background:var(--card);border-radius:20px;padding:20px 12px;
  text-align:center;cursor:pointer;border:1px solid var(--border);
  transition:transform .15s,background .15s;
}
.ma-item:active { transform:scale(.95) }
.ma-icon { font-size:2.5rem;margin-bottom:8px }
.ma-name { font-weight:600;font-size:.9rem;margin-bottom:4px }
.ma-desc { font-size:.75rem;color:var(--sub) }
.miniapp-screen {
  position:fixed;inset:0;z-index:850;background:var(--bg);
  display:flex;flex-direction:column;
}
.ma-app-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--border);
}
.ma-app-header button {
  background:none;border:none;color:var(--fg);cursor:pointer;padding:4px;
}
.ma-app-header span { font-weight:600;font-size:1rem }
.ma-app-body { flex:1;overflow-y:auto;padding:16px }

/* Weather App */
.weather-app { padding:0 }
.wa-main { text-align:center;padding:24px 16px;background:var(--card);border-radius:20px;margin-bottom:16px }
.wa-city { font-size:.9rem;color:var(--sub);margin-bottom:8px }
.wa-temp { font-size:4rem;font-weight:800;color:var(--fg) }
.wa-desc { color:var(--sub);font-size:.9rem;margin:8px 0 16px }
.wa-details { display:grid;grid-template-columns:1fr 1fr;gap:8px }
.wa-det-item { display:flex;gap:8px;align-items:center;font-size:.85rem;color:var(--sub) }
.wa-forecast { display:flex;gap:8px;overflow-x:auto;padding:4px 0 }
.wa-day { background:var(--card);border-radius:14px;padding:12px 8px;text-align:center;min-width:52px;flex-shrink:0 }
.wa-day-name { font-size:.75rem;color:var(--sub);margin-bottom:6px }
.wa-day-icon { font-size:1.4rem;margin-bottom:4px }
.wa-day-hi { font-weight:700;font-size:.9rem }
.wa-day-lo { font-size:.8rem }

/* Calc App */
.calc-app { display:flex;flex-direction:column;gap:12px }
.calc-display {
  background:var(--card2);border-radius:16px;padding:16px 20px;
  font-size:2.5rem;font-weight:300;text-align:right;
  color:var(--fg);word-break:break-all;min-height:72px;
}
.calc-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:8px }
.calc-btn {
  background:var(--card);border:none;border-radius:50%;aspect-ratio:1;
  color:var(--fg);font-size:1.2rem;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  min-height:64px;transition:background .12s;
}
.calc-btn:active { background:var(--card2) }
.calc-op { background:rgba(124,58,237,.2);color:var(--accent) }
.calc-fn { background:var(--card2) }
.calc-eq { background:var(--accent);color:#fff;grid-column:span 1 }

/* Notes App */
.notes-list { display:flex;flex-direction:column;gap:10px;margin-top:16px }
.note-item {
  background:var(--card);border-radius:14px;padding:14px;
  border:1px solid var(--border);
}
.note-text { font-size:.9rem;line-height:1.5;white-space:pre-wrap }

/* ══════════════════════════════════════════════════════════
   CREATOR STUDIO
══════════════════════════════════════════════════════════ */
.creator-studio-ov {
  position:fixed;inset:0;z-index:800;background:var(--bg);
  display:flex;flex-direction:column;overflow:hidden;
}
.cs-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--border);
}
.cs-header h2 { font-size:1.05rem;font-weight:700 }
.cs-header button { background:none;border:none;color:var(--fg);cursor:pointer;padding:4px }
.cs-body { flex:1;overflow-y:auto;padding:16px }
.cs-profile-row {
  display:flex;align-items:center;gap:12px;
  padding:12px;background:var(--card);border-radius:16px;margin-bottom:16px;
}
.cs-level {
  margin-left:auto;background:var(--accent);color:#fff;
  padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:700;
}
.cs-stats-grid {
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px;
}
.cs-stat {
  background:var(--card);border-radius:14px;padding:12px 8px;text-align:center;
}
.cs-stat-val { font-size:1.2rem;font-weight:800;color:var(--fg) }
.cs-stat-lbl { font-size:.7rem;color:var(--sub);margin-top:2px }
.cs-chart-title { font-size:.9rem;font-weight:600;margin-bottom:12px;color:var(--sub) }
.cs-chart {
  display:flex;align-items:flex-end;gap:6px;height:120px;
  background:var(--card);border-radius:14px;padding:12px 8px 24px;
  position:relative;
}
.cs-bar-wrap { flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;gap:4px }
.cs-bar {
  width:100%;background:var(--accent);border-radius:4px 4px 0 0;
  min-height:4px;position:relative;transition:height .4s ease;
}
.cs-bar-val { position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:.65rem;color:var(--sub);white-space:nowrap }
.cs-bar-day { font-size:.7rem;color:var(--sub) }
.cs-post-row {
  display:flex;gap:10px;align-items:flex-start;
  padding:12px;background:var(--card);border-radius:12px;margin-bottom:8px;
}
.cs-post-emoji { font-size:1.5rem;flex-shrink:0 }
.cs-post-stats { display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--sub);text-align:right;flex-shrink:0 }

/* ══════════════════════════════════════════════════════════
   SEND MONEY SHEET
══════════════════════════════════════════════════════════ */
.send-users {
  display:flex;gap:12px;overflow-x:auto;padding:8px 0;margin-bottom:12px;
}
.send-user-item {
  display:flex;flex-direction:column;align-items:center;gap:6px;
  min-width:64px;padding:8px;border-radius:14px;cursor:pointer;
  border:2px solid transparent;transition:all .15s;font-size:.8rem;
}
.send-user-item.selected { border-color:var(--accent);background:rgba(124,58,237,.1) }
.send-user-item:hover { background:var(--card2) }

/* ══════════════════════════════════════════════════════════
   CLOSE FRIENDS
══════════════════════════════════════════════════════════ */
.cf-row {
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  cursor:pointer;border-radius:12px;transition:background .15s;
}
.cf-row:hover { background:var(--card2) }
.cf-check { font-size:1.3rem;transition:transform .15s }
.cf-check.active { transform:scale(1.2) }

/* ══════════════════════════════════════════════════════════
   REELS IMPROVEMENTS
══════════════════════════════════════════════════════════ */
.reel-sound {
  font-size:.78rem;color:rgba(255,255,255,.75);margin-top:4px;
  display:flex;align-items:center;gap:4px;
}
.reel-duet-badge {
  position:absolute;top:60px;left:12px;
  background:rgba(124,58,237,.85);color:#fff;font-size:.7rem;font-weight:700;
  padding:3px 10px;border-radius:20px;backdrop-filter:blur(4px);z-index:5;
}
.reel-action.liked > span:first-child { animation:pop .2s ease }
@keyframes pop { 0%{transform:scale(1)} 50%{transform:scale(1.4)} 100%{transform:scale(1)} }
.reel-action-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:8px 0;
}
.reel-act-item {
  background:var(--card);border-radius:16px;padding:16px 8px;
  text-align:center;cursor:pointer;border:1px solid var(--border);
  transition:transform .15s;font-size:.85rem;
}
.reel-act-item:active { transform:scale(.93) }
.reel-act-ico { font-size:1.8rem;margin-bottom:6px }

/* ══════════════════════════════════════════════════════════
   GRAFFITI PAD
══════════════════════════════════════════════════════════ */
.graffiti-overlay {
  position:fixed;inset:0;z-index:900;background:#0a0a0f;
  display:flex;flex-direction:column;
}
.graffiti-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:rgba(0,0,0,.8);
}
.graffiti-header h2 { color:#fff;font-size:1rem;font-weight:600 }
.graffiti-header button {
  background:rgba(255,255,255,.15);border:none;color:#fff;
  padding:8px 16px;border-radius:20px;cursor:pointer;font-size:.9rem;
}
#graffiti-canvas { flex:1;display:block }
.graffiti-tools {
  background:rgba(0,0,0,.8);padding:12px 16px;
  display:flex;flex-direction:column;gap:10px;
}
.graffiti-colors { display:flex;gap:8px;flex-wrap:wrap }
.gc-swatch {
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  border:3px solid transparent;transition:transform .12s;
}
.gc-swatch.active { border-color:#fff;transform:scale(1.2) }
.graffiti-tool {
  background:rgba(255,255,255,.15);border:none;color:#fff;
  width:36px;height:36px;border-radius:8px;cursor:pointer;font-size:1rem;
}
.graffiti-tool.active { background:var(--accent) }

/* ══════════════════════════════════════════════════════════
   ADD CONTACT OPTIONS
══════════════════════════════════════════════════════════ */
.add-cont-opt {
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:20px 12px;text-align:center;cursor:pointer;font-size:.85rem;
  font-weight:500;color:var(--fg);transition:background .15s;
}
.add-cont-opt:hover { background:var(--card2) }

/* QR Sheet tweaks */
.qr-wrap { display:flex;justify-content:center;padding:20px 0 12px }
#qr-canvas { border-radius:16px;background:#fff;padding:12px }
.qr-hint { text-align:center;font-size:.85rem;color:var(--sub);padding:0 20px 16px }
.qr-copy { } /* handled inline */