/* =============================================
   LOPAOST v3.1 — STYLESHEET
   Pure Blue Theme · Everyday Social App
   Improved for daily use · Like modern social apps
   =============================================
*/

:root {
  /* Pure Blue primary palette */
  --pink:        #2563eb;   /* kept name for compatibility, now pure blue */
  --pink-light:  #60a5fa;
  --pink-pale:   #dbeafe;
  --pink-dark:   #1e40af;
  --pink-bg:     #eff6ff;
  
  --white:       #ffffff;

  --bg:          #f0f9ff;
  --bg-card:     #ffffff;
  --bg-input:    #f1f5f9;
  --bg-hover:    #e0f2fe;

  --text:        #0f172a;
  --text-sec:    #475569;
  --text-hint:   #94a3b8;
  --text-link:   #2563eb;

  --border:      #bae6fd;
  --divider:     #e0f2fe;

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 4px rgba(37,99,235,0.08);
  --shadow-lg:   0 8px 32px rgba(37,99,235,0.18);

  --top-h:  52px;
  --bot-h:  60px;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
}

body.dark {
  --bg:       #0a1628;
  --bg-card:  #0f1c33;
  --bg-input: #1a2a45;
  --bg-hover: #1e3a5f;
  --text:     #e0f2fe;
  --text-sec: #7dd3fc;
  --text-hint:#64748b;
  --border:   #1e40af;
  --divider:  #1e3a5f;
}

/* Purple theme alternative (user can switch in Settings) */
body.theme-purple {
  --pink:        #7c3aed;
  --pink-light:  #a78bfa;
  --pink-pale:   #ede9fe;
  --pink-dark:   #5b21b6;
  --pink-bg:     #f5f3ff;
  --bg:          #f5f3ff;
  --bg-hover:    #ede9fe;
  --text-link:   #7c3aed;
  --border:      #ddd6fe;
  --divider:     #ede9fe;
  --shadow-card: 0 1px 4px rgba(124,58,237,0.08);
  --shadow-lg:   0 8px 32px rgba(124,58,237,0.18);
}
body.theme-purple.dark {
  --bg:       #0f0a1e;
  --bg-card:  #1a0f2e;
  --bg-input: #2a1a3e;
  --bg-hover: #2a1a3e;
  --text:     #ede9fe;
  --text-sec: #a78bfa;
  --text-hint:#7c5cbf;
  --border:   #4c1d95;
  --divider:  #2e1065;
}

/* Pull-to-refresh indicator */
.ptr-indicator {
  height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
  transition: height 0.2s ease; color: var(--pink); font-size: 13px; font-weight: 600;
}
.ptr-indicator.visible { height: 48px; }
.ptr-spinner {
  width: 20px; height: 20px; border: 2.5px solid var(--border);
  border-top-color: var(--pink); border-radius: 50%;
  animation: spin 0.7s linear infinite; margin-right: 8px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font);
  background: var(--pink-pale);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
}
a { color:var(--text-link); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; display:block; }
input,textarea,select,button { font-family:var(--font); font-size:15px; }
button { cursor:pointer; border:none; background:none; padding:0; }
ul,ol { list-style:none; }
.hidden { display:none !important; }

/* ── Phone Shell ── */
.phone-shell {
  width: 390px;
  height: 844px;
  border-radius: 44px;
  background: var(--bg);
  box-shadow: 0 0 0 10px #0f0a1e, 0 30px 80px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.1);
  overflow: hidden;
  position: relative;
}
.phone-screen {
  width:100%; height:100%;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
@media (max-width:430px) {
  body { background:#dbeafe; align-items:flex-start; justify-content:flex-start; }
  .phone-shell { width:100vw; height:100vh; border-radius:0; box-shadow:none; }
}

/* ── Screens ── */
.screen { display:none; flex-direction:column; height:100%; width:100%; overflow:hidden; }
.screen.active { display:flex; }

/* ══════════════════════════════════════════
   AUTH SCREEN
══════════════════════════════════════════ */
#screen-auth { background:var(--bg); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.auth-wrap { padding:28px 22px 40px; display:flex; flex-direction:column; min-height:100%; }

.auth-brand { text-align:center; padding:12px 0 22px; }
.brand-logo { width:68px; height:68px; margin:0 auto 10px; }
.brand-logo svg { width:100%; height:100%; }
.brand-name {
  font-size:27px; font-weight:800;
  background:linear-gradient(135deg,var(--pink-light),var(--pink-dark));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; letter-spacing:-0.5px;
}
.brand-sub { font-size:13px; color:var(--text-sec); margin-top:3px; }

.offline-notice {
  background:#fff3cd; border:1px solid #ffc107; color:#856404;
  border-radius:var(--radius-md); padding:9px 12px;
  font-size:12px; margin-bottom:14px; line-height:1.4;
}

.auth-tabs {
  display:flex; background:var(--bg-input);
  border-radius:var(--radius-pill); padding:3px; margin-bottom:18px;
}
.auth-tab {
  flex:1; padding:9px 0; border-radius:var(--radius-pill);
  font-size:14px; font-weight:600; color:var(--text-sec);
  transition:all 0.2s; -webkit-tap-highlight-color:transparent;
}
.auth-tab.active { background:var(--pink); color:white; box-shadow:0 2px 8px rgba(124,58,237,0.3); }

.auth-panel { display:flex; flex-direction:column; }
.auth-panel.hidden { display:none; }

/* ── Forms ── */
.form-group { margin-bottom:13px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.form-label { display:block; font-size:11px; font-weight:700; color:var(--text-sec); margin-bottom:5px; text-transform:uppercase; letter-spacing:0.4px; }
.label-hint { font-weight:400; text-transform:none; color:var(--text-hint); letter-spacing:0; }
.form-input {
  width:100%; padding:11px 14px; background:var(--bg-input);
  border:1.5px solid var(--border); border-radius:var(--radius-md);
  color:var(--text); font-size:15px; outline:none;
  transition:border-color 0.15s, box-shadow 0.15s; -webkit-appearance:none;
}
.form-input:focus { border-color:var(--pink); box-shadow:0 0 0 3px rgba(124,58,237,0.12); background:var(--bg-card); }
.form-input::placeholder { color:var(--text-hint); }
textarea.form-input { resize:none; min-height:70px; }
.pw-wrap { position:relative; }
.pw-wrap .form-input { padding-right:42px; }
.pw-toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--text-sec); display:flex; align-items:center; justify-content:center; }
.pw-toggle:hover { color:var(--pink); }
.gender-row { display:flex; gap:7px; flex-wrap:wrap; }
.gender-opt { display:flex; align-items:center; gap:5px; cursor:pointer; font-size:13px; padding:7px 11px; border:1.5px solid var(--border); border-radius:var(--radius-pill); transition:border-color 0.15s, background 0.15s; }
.gender-opt:hover { border-color:var(--pink); background:var(--pink-pale); }
.gender-opt input { accent-color:var(--pink); }
.terms-row { margin-bottom:14px; padding:11px 12px; background:var(--pink-pale); border-radius:var(--radius-md); border:1.5px solid var(--border); }
.terms-label { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.terms-label input[type="checkbox"] { width:18px; height:18px; accent-color:var(--pink); flex-shrink:0; margin-top:1px; cursor:pointer; }
.terms-text { font-size:13px; color:var(--text-sec); line-height:1.5; }
.terms-text a { color:var(--pink); font-weight:600; }
.form-error { background:#fff0f4; border:1px solid #ffc0d4; color:var(--pink-dark); border-radius:var(--radius-md); padding:9px 12px; font-size:13px; margin-bottom:11px; }
body.dark .form-error { background:#2a1020; border-color:#6a2040; color:#a78bfa; }
.auth-switch { text-align:center; font-size:13px; color:var(--text-sec); margin-top:13px; }
.auth-switch a { color:var(--pink); font-weight:600; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:12px 20px; border-radius:var(--radius-pill); font-size:15px; font-weight:700; cursor:pointer; border:none; transition:background 0.15s, opacity 0.15s, transform 0.1s; -webkit-tap-highlight-color:transparent; white-space:nowrap; }
.btn:active { transform:scale(0.97); }
.btn-primary { background:linear-gradient(135deg,var(--pink-light),var(--pink-dark)); color:#fff; }
.btn-primary:hover { opacity:0.9; }
.btn-outline { background:transparent; color:var(--pink); border:2px solid var(--pink); padding:10px 20px; }
.btn-outline:hover { background:var(--pink-pale); }
.btn-ghost { background:var(--bg-input); color:var(--text); border:1.5px solid var(--border); }
.btn-ghost:hover { background:var(--bg-hover); }
.btn-danger { background:#ef4444; color:#fff; }
.btn-danger:hover { background:#dc2626; }
.btn-ghost-danger { background:transparent; color:#ef4444; border:1.5px solid #ef4444; }
.btn-full { width:100%; }

/* ══════════════════════════════════════════
   MAIN APP
══════════════════════════════════════════ */
#screen-app { background:var(--bg); display:none; flex-direction:column; height:100vh; overflow:hidden; }
#screen-app.active { display:flex; }

/* Top bar — pinned, never scrolls away */
.top-bar {
  height:var(--top-h);
  background:var(--bg-card);
  border-bottom:1px solid var(--divider);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px;
  flex-shrink:0;          /* ← never shrink */
  position:sticky;
  top:0; z-index:50;
  box-shadow: 0 1px 8px rgba(124,58,237,0.08);
}
.top-bar-logo { display:flex; align-items:center; gap:8px; }
.top-bar-title { font-size:18px; font-weight:800; background:linear-gradient(135deg,var(--pink-light),var(--pink-dark)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.top-bar-right { display:flex; align-items:center; gap:5px; }
.top-icon-btn { width:38px; height:38px; border-radius:50%; background:var(--bg-input); color:var(--text-sec); display:flex; align-items:center; justify-content:center; position:relative; transition:background 0.15s; -webkit-tap-highlight-color:transparent; }
.top-icon-btn:hover { background:var(--bg-hover); color:var(--pink); }
.notif-dot { position:absolute; top:5px; right:5px; width:9px; height:9px; background:var(--pink); border-radius:50%; border:2px solid var(--bg-card); }

.tab-content-area { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; padding-bottom:calc(var(--bot-h) + env(safe-area-inset-bottom, 0px)); min-height:0; }
.tab-content-area::-webkit-scrollbar { display:none; }
.tab-panel { display:none; flex-direction:column; min-height:calc(100% - 1px); padding-bottom:10px; }
.tab-panel.active { display:flex; }
.panel-heading { font-size:18px; font-weight:700; color:var(--text); padding:14px 16px 8px; }

/* ── Sticky bottom nav — always pinned to bottom ── */
.bottom-nav {
  height:var(--bot-h);
  background:var(--bg-card);
  border-top:1px solid var(--divider);
  display:flex;
  align-items:center;
  flex-shrink:0;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:9999;
  width:100%;
  padding-bottom:env(safe-area-inset-bottom,0);
  box-shadow: 0 -2px 12px rgba(124,58,237,0.10);
}
/* Inside phone shell on desktop, keep it inside the shell */
.phone-shell .bottom-nav {
  position:absolute;
  left:0;
  right:0;
  width:100%;
}
.bnav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:8px 0; color:var(--text-hint); font-size:10px; font-weight:600; transition:color 0.15s; -webkit-tap-highlight-color:transparent; border:none; background:transparent; position:relative; }
.bnav-item.active { color:var(--pink); }
.bnav-item:hover { color:var(--pink-light); }
.bnav-post { background:linear-gradient(135deg,var(--pink-light),var(--pink-dark)); color:white!important; border-radius:var(--radius-xl); margin:0 4px; height:48px; flex:0.9; box-shadow:0 4px 16px rgba(124,58,237,0.35); font-size:10px; font-weight:700; }
.msg-badge { position:absolute; top:4px; right:8px; background:var(--pink); color:white; font-size:9px; font-weight:700; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px; border:1.5px solid var(--bg-card); }

/* ══════════════════════════════════════════
   HOME TAB
══════════════════════════════════════════ */
.stories-row { display:flex; gap:10px; padding:12px 14px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; background:var(--bg-card); margin-bottom:6px; }
.stories-row::-webkit-scrollbar { display:none; }
.story-add-card { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; flex-shrink:0; }
.story-add-icon { width:56px; height:56px; border-radius:50%; background:var(--pink-pale); border:2px dashed var(--pink); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--pink); font-weight:300; }
.story-add-card span { font-size:10px; color:var(--text-sec); font-weight:600; }
.story-bubble { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; flex-shrink:0; }
.story-ring { width:60px; height:60px; border-radius:50%; padding:2.5px; background:linear-gradient(135deg,var(--pink-light),var(--pink-dark)); }
.story-ring-inner { width:100%; height:100%; border-radius:50%; background:var(--bg-card); padding:2px; display:flex; align-items:center; justify-content:center; }
.story-avatar-sm { width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:white; background-size:cover; background-position:center; }
.story-name { font-size:10px; color:var(--text-sec); font-weight:600; white-space:nowrap; max-width:60px; overflow:hidden; text-overflow:ellipsis; text-align:center; }

.create-post-box { display:flex; align-items:center; gap:10px; padding:11px 14px 7px; background:var(--bg-card); }
.create-post-trigger { flex:1; text-align:left; padding:10px 15px; background:var(--bg-input); border-radius:var(--radius-pill); border:1.5px solid var(--border); color:var(--text-hint); font-size:14px; cursor:pointer; transition:background 0.15s; }
.create-post-trigger:hover { background:var(--bg-hover); border-color:var(--pink); }
.create-post-actions { display:flex; border-bottom:1px solid var(--divider); background:var(--bg-card); padding:0 8px 9px; }
.post-action-shortcut { flex:1; display:flex; align-items:center; justify-content:center; gap:5px; padding:7px 4px; border-radius:var(--radius-md); font-size:12px; font-weight:600; color:var(--text-sec); transition:background 0.15s; -webkit-tap-highlight-color:transparent; }
.post-action-shortcut:hover { background:var(--bg-hover); }

#feed-container { display:flex; flex-direction:column; gap:8px; padding-bottom:16px; }

/* ============================================================
   SKELETON SHIMMER — shown while feed is loading
   ============================================================ */
/* ── Shimmer keyframe ── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
/* ── Shared shimmer mixin via CSS var ── */
.skel-block {
  background: linear-gradient(90deg, #ede0e8 25%, #f9f0f6 50%, #ede0e8 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 6px;
}
body.dark .skel-block {
  background: linear-gradient(90deg, #0f0a1e 25%, #1a0f2e 50%, #0f0a1e 75%);
  background-size: 600px 100%;
}

/* ── Full Facebook-style post skeleton ── */
.post-skeleton {
  background: var(--bg-card);
  border-radius: 0;
  margin-bottom: 8px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.skel-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 10px;
}
.skel-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
}
.skel-header-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.skel-body-text {
  padding: 0 14px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.skel-image {
  width: 100%; height: 180px;
  border-radius: 0;
  margin-bottom: 0;
}
.skel-actions {
  display: flex; gap: 0;
  padding: 8px 14px;
  border-top: 1px solid var(--divider);
}
.skel-action-btn {
  flex: 1; height: 14px; border-radius: 6px; margin: 0 6px;
}
.skel-line {
  height: 12px; border-radius: 6px;
}
.skel-line.w80 { width: 80%; }
.skel-line.w60 { width: 60%; }
.skel-line.w50 { width: 50%; }
.skel-line.w40 { width: 40%; }
.skel-line.w30 { width: 30%; }
.skel-line.w90 { width: 90%; }
.skel-line.w70 { width: 70%; }
/* Legacy compat */
.skel-card { background:var(--bg-card); padding:14px; display:flex; gap:12px; margin-bottom:6px; }

/* ── Post enter animation ── */
@keyframes postFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.post-card-entering {
  animation: postFadeIn 0.22s ease forwards;
}

.post-card { background:var(--bg-card); box-shadow:var(--shadow-card); animation:fadeUp 0.25s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.post-header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px 8px; }
.post-author { display:flex; align-items:center; gap:10px; }
.post-author-name { font-size:14px; font-weight:700; color:var(--text); }
.feeling-inline { font-weight:400; color:var(--text-sec); }
.post-meta { font-size:11px; color:var(--text-hint); margin-top:1px; }
.post-menu-btn { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-sec); transition:background 0.15s; }
.post-menu-btn:hover { background:var(--bg-hover); }
.post-body { padding:0 14px 10px; }
.post-text { font-size:15px; color:var(--text); line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.post-text.big { font-size:20px; font-weight:700; text-align:center; padding:8px 0; }
.post-img { width:100%; max-height:300px; object-fit:cover; border-radius:var(--radius-md); margin-top:9px; cursor:pointer; display:block; }
.post-bg-card { min-height:150px; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; margin:0 14px 10px; padding:20px; }
.post-bg-text { font-size:20px; font-weight:700; text-align:center; line-height:1.4; }
.post-reactions-bar { display:flex; justify-content:space-between; align-items:center; padding:5px 14px; border-top:1px solid var(--divider); border-bottom:1px solid var(--divider); font-size:12px; color:var(--text-sec); }
.like-emojis { display:flex; }
.like-emoji { width:16px; height:16px; border-radius:50%; font-size:10px; display:flex; align-items:center; justify-content:center; background:var(--pink); color:white; margin-left:-3px; border:1.5px solid var(--bg-card); }
.comment-count-btn { cursor:pointer; font-size:12px; color:var(--text-sec); }
.comment-count-btn:hover { color:var(--pink); text-decoration:underline; }
.post-actions { display:flex; padding:2px 8px; }
.post-act-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:5px; padding:9px 0; border-radius:var(--radius-md); font-size:13px; font-weight:600; color:var(--text-sec); transition:background 0.15s, color 0.15s; -webkit-tap-highlight-color:transparent; }
.post-act-btn:hover { background:var(--bg-hover); }
.post-act-btn.liked { color:var(--pink); }
.comments-section { border-top:1px solid var(--divider); padding:8px 14px 12px; }
.comment-item { display:flex; gap:8px; margin-bottom:8px; }
.comment-bubble { flex:1; background:var(--bg-input); border-radius:var(--radius-lg); padding:8px 11px; }
.comment-author { font-size:12px; font-weight:700; color:var(--text); margin-bottom:2px; }
.comment-text { font-size:13px; color:var(--text); word-break:break-word; }
.comment-time { font-size:10px; color:var(--text-hint); margin-top:3px; }
.comment-input-row { display:flex; align-items:flex-end; gap:8px; margin-top:6px; }
.comment-field-wrap { flex:1; background:var(--bg-input); border-radius:var(--radius-pill); display:flex; align-items:center; padding:0 12px; }
.comment-field { flex:1; background:transparent; border:none; outline:none; padding:9px 0; font-size:13px; color:var(--text); resize:none; max-height:80px; scrollbar-width:none; }
.comment-field::placeholder { color:var(--text-hint); }
.comment-send-btn { width:30px; height:30px; background:var(--pink); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; flex-shrink:0; border:none; cursor:pointer; }
.comment-send-btn:hover { opacity:0.85; }
/* skel-card kept for legacy compat — definitions consolidated above */

/* ══════════════════════════════════════════
   MESSAGES TAB
══════════════════════════════════════════ */
/* Messages tab needs position:relative for chat-view absolute overlay */
#tab-messages { position:relative; overflow:hidden; }
#conv-list-view { display:flex; flex-direction:column; padding-bottom:16px; }
.messages-top-bar { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 8px; }
.btn-new-msg { width:38px; height:38px; border-radius:50%; background:var(--pink); color:white; display:flex; align-items:center; justify-content:center; transition:opacity 0.15s; }
.btn-new-msg:hover { opacity:0.85; }

.conv-item { display:flex; align-items:center; gap:12px; padding:11px 14px; cursor:pointer; transition:background 0.15s; border-bottom:1px solid var(--divider); position:relative; }
.conv-item:hover { background:var(--bg-hover); }
.ai-conv { background:linear-gradient(135deg,rgba(124,58,237,0.06),rgba(167,139,250,0.06)); }
.conv-avatar { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--pink-light),var(--pink-dark)); display:flex; align-items:center; justify-content:center; font-weight:700; color:white; font-size:15px; flex-shrink:0; background-size:cover; background-position:center; overflow:hidden; }
.ai-avatar { background:linear-gradient(135deg,var(--purple),var(--pink))!important; }
.conv-info { flex:1; min-width:0; }
.conv-name { font-size:14px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:6px; }
.ai-badge { font-size:10px; font-weight:700; background:linear-gradient(135deg,var(--pink-light),var(--pink-dark)); color:white; padding:1px 7px; border-radius:99px; }
.conv-preview { font-size:12px; color:var(--text-sec); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.conv-time { font-size:11px; color:var(--text-hint); }
.ai-online-dot { width:9px; height:9px; background:#22c55e; border-radius:50%; }
.conv-unread-badge { background:var(--pink); color:white; font-size:10px; font-weight:700; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.conv-divider { font-size:11px; font-weight:700; color:var(--text-hint); text-transform:uppercase; letter-spacing:0.5px; padding:10px 16px 4px; }
.empty-conv-hint { display:flex; flex-direction:column; align-items:center; gap:8px; padding:28px 20px; color:var(--text-hint); text-align:center; }
.empty-conv-hint p { font-size:13px; line-height:1.5; color:var(--text-sec); }
.empty-conv-hint p strong { color:var(--text); }

/* Chat View */
.chat-view { display:flex; flex-direction:column; height:100%; background:var(--bg); position:absolute; inset:0; z-index:20; transform:translateX(100%); transition:transform 0.25s ease; }
.chat-view.open { transform:translateX(0); }
.chat-view.hidden { display:none; }
.chat-view-header { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bg-card); border-bottom:1px solid var(--divider); flex-shrink:0; }
.chat-peer-info { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.chat-peer-name { font-size:15px; font-weight:700; color:var(--text); }
.chat-peer-status { font-size:11px; color:#22c55e; font-weight:600; }
.chat-header-actions { display:flex; gap:4px; flex-shrink:0; }
.back-btn { width:36px; height:36px; border-radius:50%; background:var(--bg-input); display:flex; align-items:center; justify-content:center; color:var(--text); transition:background 0.15s; flex-shrink:0; -webkit-tap-highlight-color:transparent; }
.back-btn:hover { background:var(--bg-hover); color:var(--pink); }
.chat-messages { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; -webkit-overflow-scrolling:touch; }
.chat-messages::-webkit-scrollbar { display:none; }
.chat-date-divider { text-align:center; font-size:11px; color:var(--text-hint); font-weight:600; padding:4px 0 8px; }
.chat-msg { display:flex; gap:7px; max-width:82%; animation:fadeUp 0.2s ease; }
.chat-msg.me { align-self:flex-end; flex-direction:row-reverse; }
.chat-msg.them { align-self:flex-start; }
.chat-bubble { padding:10px 14px; border-radius:18px; font-size:14px; line-height:1.5; word-break:break-word; white-space:pre-wrap; }
.me .chat-bubble { background:linear-gradient(135deg,var(--pink-light),var(--pink-dark)); color:white; border-bottom-right-radius:4px; }
.them .chat-bubble { background:var(--bg-card); color:var(--text); border:1px solid var(--border); border-bottom-left-radius:4px; box-shadow:var(--shadow-card); }
.ai-msg .chat-bubble { background:var(--bg-card); color:var(--text); border:1px solid var(--border); border-bottom-left-radius:4px; box-shadow:var(--shadow-card); }
.chat-msg-time { font-size:10px; color:var(--text-hint); padding:0 3px; align-self:flex-end; flex-shrink:0; }
.typing-indicator { align-self:flex-start; display:flex; gap:7px; animation:fadeUp 0.2s ease; }
.typing-bubble { background:var(--bg-card); border:1px solid var(--border); border-radius:18px; border-bottom-left-radius:4px; padding:10px 16px; box-shadow:var(--shadow-card); }
.typing-dots { display:flex; gap:4px; align-items:center; height:14px; }
.typing-dot { width:6px; height:6px; background:var(--text-hint); border-radius:50%; animation:bounce 1.2s infinite; }
.typing-dot:nth-child(2){animation-delay:0.2s;} .typing-dot:nth-child(3){animation-delay:0.4s;}
@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}

.ai-suggestions-bar { display:flex; gap:7px; padding:8px 12px; overflow-x:auto; scrollbar-width:none; background:var(--bg-card); border-top:1px solid var(--divider); flex-shrink:0; }
.ai-suggestions-bar::-webkit-scrollbar { display:none; }
.ai-suggest-pill { padding:6px 13px; background:var(--pink-pale); border:1.5px solid rgba(233,30,140,0.2); border-radius:var(--radius-pill); font-size:12px; font-weight:600; color:var(--pink); cursor:pointer; white-space:nowrap; transition:background 0.15s; flex-shrink:0; }
.ai-suggest-pill:hover { background:rgba(124,58,237,0.18); }

.chat-input-bar { padding:9px 11px; border-top:1px solid var(--divider); background:var(--bg-card); flex-shrink:0; }
.chat-input-wrap { display:flex; align-items:flex-end; gap:8px; background:var(--bg-input); border-radius:var(--radius-pill); padding:6px 8px 6px 14px; border:1.5px solid var(--border); transition:border-color 0.15s; }
.chat-input-wrap:focus-within { border-color:var(--pink); }
.chat-input { flex:1; background:transparent; border:none; outline:none; resize:none; font-size:14px; color:var(--text); max-height:100px; padding:4px 0; scrollbar-width:none; line-height:1.45; }
.chat-input::placeholder { color:var(--text-hint); }
.send-btn { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--pink-light),var(--pink-dark)); color:white; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:none; cursor:pointer; transition:opacity 0.15s; }
.send-btn:hover { opacity:0.85; }

/* User Search */
.search-user-wrap { position:relative; display:flex; align-items:center; margin-bottom:12px; }
.search-icon-inline { position:absolute; left:12px; color:var(--text-sec); pointer-events:none; }
.user-search-input { width:100%; padding:11px 14px 11px 38px; background:var(--bg-input); border:1.5px solid var(--border); border-radius:var(--radius-pill); color:var(--text); font-size:14px; outline:none; transition:border-color 0.15s; }
.user-search-input:focus { border-color:var(--pink); }
.user-search-results { display:flex; flex-direction:column; gap:2px; max-height:280px; overflow-y:auto; }
.search-hint { font-size:13px; color:var(--text-hint); text-align:center; padding:20px 0; }
.search-user-item { display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:var(--radius-lg); cursor:pointer; transition:background 0.15s; }
.search-user-item:hover { background:var(--bg-hover); }
.search-user-name { font-size:14px; font-weight:600; color:var(--text); }
.search-user-email { font-size:12px; color:var(--text-sec); }

/* ══════════════════════════════════════════
   POST TAB
══════════════════════════════════════════ */
.create-full-card { background:var(--bg-card); margin:8px 12px; border-radius:var(--radius-xl); padding:15px; box-shadow:var(--shadow-card); }
.post-user-row { display:flex; align-items:center; gap:11px; margin-bottom:13px; }
.post-user-name { font-size:14px; font-weight:700; color:var(--text); }
.audience-select { font-size:11px; color:var(--text-sec); background:var(--bg-input); border:none; border-radius:var(--radius-sm); padding:3px 6px; outline:none; cursor:pointer; margin-top:2px; display:block; }
.post-textarea-full { width:100%; border:none; outline:none; resize:none; font-size:16px; color:var(--text); background:transparent; line-height:1.55; min-height:90px; padding:0; }
.post-textarea-full::placeholder { color:var(--text-hint); }
.img-preview-wrap { position:relative; margin:10px 0; border-radius:var(--radius-md); overflow:hidden; background:var(--bg-input); }
.img-preview-wrap img { width:100%; max-height:240px; object-fit:contain; display:block; }
.remove-img-btn { position:absolute; top:7px; right:7px; width:27px; height:27px; background:rgba(0,0,0,0.55); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; border:none; cursor:pointer; }
.feeling-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; background:var(--pink-pale); border:1.5px solid rgba(124,58,237,0.25); border-radius:var(--radius-pill); font-size:13px; color:var(--pink); font-weight:600; margin:5px 0; }
.feeling-chip .remove-chip { background:none; border:none; cursor:pointer; color:var(--pink); font-size:13px; line-height:1; padding:0; margin-left:2px; }
.post-tab-tools { display:flex; gap:8px; border-top:1px solid var(--divider); padding-top:11px; margin-top:9px; }
.tool-btn { width:37px; height:37px; border-radius:50%; background:var(--bg-input); display:flex; align-items:center; justify-content:center; transition:background 0.15s; }
.tool-btn:hover { background:var(--bg-hover); }
.feeling-picker-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:9px; padding-top:9px; border-top:1px solid var(--divider); }
.fp-btn { padding:7px 4px; border-radius:var(--radius-md); background:var(--bg-input); border:none; cursor:pointer; font-size:13px; color:var(--text); transition:background 0.15s; text-align:center; }
.fp-btn:hover { background:var(--pink-pale); color:var(--pink); }

/* ══════════════════════════════════════════
   VIDEO TAB
══════════════════════════════════════════ */
#video-feed { display:flex; flex-direction:column; gap:8px; padding:8px 0 16px; }
.video-card { background:var(--bg-card); box-shadow:var(--shadow-card); overflow:hidden; }
.video-thumb { width:100%; height:195px; background:linear-gradient(135deg,var(--pink-pale),#f3e5f5); display:flex; align-items:center; justify-content:center; position:relative; cursor:pointer; }
.video-play-icon { width:50px; height:50px; background:rgba(233,30,140,0.8); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; }
.video-info { padding:10px 14px 13px; }
.video-title { font-size:14px; font-weight:700; color:var(--text); }
.video-author { font-size:12px; color:var(--text-sec); margin-top:3px; }

/* ══════════════════════════════════════════
   PROFILE TAB
══════════════════════════════════════════ */
.profile-cover { height:155px; background:linear-gradient(135deg,var(--pink-light),var(--pink-dark)); position:relative; overflow:hidden; }
.profile-cover img { width:100%; height:100%; object-fit:cover; }
.cover-edit-btn { position:absolute; bottom:9px; right:9px; display:flex; align-items:center; gap:5px; padding:6px 11px; background:rgba(0,0,0,0.45); color:white; border-radius:var(--radius-pill); font-size:12px; font-weight:600; backdrop-filter:blur(4px); border:none; cursor:pointer; }
.cover-edit-btn:hover { background:rgba(0,0,0,0.65); }
.profile-info-block { background:var(--bg-card); display:flex; flex-direction:column; align-items:center; padding:0 16px 15px; border-bottom:8px solid var(--bg); text-align:center; }
.profile-avatar-wrap { position:relative; margin-top:-40px; margin-bottom:9px; }
.avatar-xl { width:82px; height:82px; border-radius:50%; background:linear-gradient(135deg,var(--pink-light),var(--pink-dark)); display:flex; align-items:center; justify-content:center; font-size:29px; font-weight:700; color:white; border:4px solid var(--bg-card); cursor:pointer; background-size:cover; background-position:center; overflow:hidden; }
.avatar-edit-btn { position:absolute; bottom:2px; right:2px; width:25px; height:25px; background:var(--bg-input); border:2px solid var(--bg-card); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.profile-name { font-size:19px; font-weight:800; color:var(--text); margin-bottom:4px; }
.profile-bio-display { font-size:13px; color:var(--text-sec); margin-bottom:11px; max-width:250px; line-height:1.5; }
.profile-stats-row { display:flex; gap:26px; margin-bottom:13px; }
.profile-stat { display:flex; flex-direction:column; align-items:center; }
.stat-num { font-size:19px; font-weight:800; color:var(--pink); }
.stat-lbl { font-size:10px; color:var(--text-sec); text-transform:uppercase; letter-spacing:0.3px; }
.profile-subtabs { display:flex; background:var(--bg-card); border-bottom:1px solid var(--divider); position:sticky; top:var(--top-h); z-index:30; }
.psub-tab { flex:1; padding:11px 0; border-bottom:2.5px solid transparent; font-size:13px; font-weight:700; color:var(--text-sec); cursor:pointer; transition:color 0.15s, border-color 0.15s; border-top:none; border-left:none; border-right:none; background:transparent; text-align:center; -webkit-tap-highlight-color:transparent; }
.psub-tab.active { color:var(--pink); border-bottom-color:var(--pink); }
.psub-panel { padding:11px 11px 60px; }
.psub-panel.hidden { display:none; }
.about-card { background:var(--bg-card); border-radius:var(--radius-xl); padding:15px; box-shadow:var(--shadow-card); }
.about-row { display:flex; align-items:flex-start; gap:11px; padding:9px 0; border-bottom:1px solid var(--divider); }
.about-row:last-child { border-bottom:none; }
.about-icon { font-size:17px; flex-shrink:0; margin-top:1px; }
.about-lbl { font-size:10px; font-weight:700; color:var(--text-sec); text-transform:uppercase; letter-spacing:0.3px; }
.about-val { font-size:14px; font-weight:600; color:var(--text); margin-top:2px; }
.photos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.photo-thumb { aspect-ratio:1; border-radius:var(--radius-md); overflow:hidden; cursor:pointer; background:var(--bg-input); }
.photo-thumb:hover { opacity:0.85; }
.photo-thumb img { width:100%; height:100%; object-fit:cover; }

/* ══════════════════════════════════════════
   NOTIFICATIONS TAB
══════════════════════════════════════════ */
#notif-list { display:flex; flex-direction:column; }
.notif-item { display:flex; align-items:flex-start; gap:11px; padding:11px 14px; border-bottom:1px solid var(--divider); cursor:pointer; transition:background 0.15s; }
.notif-item:hover { background:var(--bg-hover); }
.notif-item.unread { background:var(--pink-pale); }
.notif-icon-wrap { position:relative; flex-shrink:0; }
.notif-type-badge { position:absolute; bottom:-2px; right:-2px; width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; border:1.5px solid var(--bg-card); }
.badge-like{background:var(--pink);} .badge-comment{background:#22c55e;} .badge-post{background:var(--purple);}
.notif-body { flex:1; min-width:0; }
.notif-text { font-size:13px; color:var(--text); line-height:1.4; }
.notif-text strong { font-weight:700; }
.notif-time { font-size:11px; color:var(--pink); margin-top:3px; font-weight:600; }
.notif-unread-dot { width:9px; height:9px; background:var(--pink); border-radius:50%; flex-shrink:0; margin-top:4px; }

/* ══════════════════════════════════════════
   AVATARS
══════════════════════════════════════════ */
.avatar-sm,.avatar-md,.avatar-lg { border-radius:50%; background:linear-gradient(135deg,var(--pink-light),var(--pink-dark)); display:flex; align-items:center; justify-content:center; font-weight:700; color:white; flex-shrink:0; background-size:cover; background-position:center; overflow:hidden; }
.avatar-sm { width:38px; height:38px; font-size:14px; }
.avatar-md { width:46px; height:46px; font-size:16px; }
.avatar-lg { width:54px; height:54px; font-size:19px; }

/* ══════════════════════════════════════════
   SETTINGS SLIDE
══════════════════════════════════════════ */
.slide-screen { position:absolute; inset:0; background:var(--bg); z-index:200; display:flex; flex-direction:column; transform:translateX(100%); transition:transform 0.28s ease; overflow:hidden; }
.slide-screen.open { transform:translateX(0); }
.slide-screen.hidden { display:none; }
.slide-header { height:var(--top-h); background:var(--bg-card); border-bottom:1px solid var(--divider); display:flex; align-items:center; gap:10px; padding:0 14px; flex-shrink:0; }
.slide-title { font-size:17px; font-weight:800; color:var(--text); }
.settings-body { flex:1; overflow-y:auto; padding:14px 13px 40px; display:flex; flex-direction:column; gap:13px; }
.settings-body::-webkit-scrollbar { display:none; }
.settings-user-card { background:var(--bg-card); border-radius:var(--radius-xl); padding:13px 15px; display:flex; align-items:center; gap:13px; box-shadow:var(--shadow-card); }
.settings-user-info { flex:1; min-width:0; }
.settings-username { font-size:15px; font-weight:700; color:var(--text); }
.settings-useremail { font-size:12px; color:var(--text-sec); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.settings-section { background:var(--bg-card); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-card); }
.settings-section-title { font-size:11px; font-weight:700; color:var(--text-sec); text-transform:uppercase; letter-spacing:0.5px; padding:11px 14px 5px; }
.settings-row { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-top:1px solid var(--divider); gap:12px; }
.settings-row:first-of-type { border-top:none; }
.settings-row-tap { cursor:pointer; transition:background 0.15s; }
.settings-row-tap:hover { background:var(--bg-hover); }
.settings-row-left { display:flex; align-items:center; gap:11px; flex:1; min-width:0; }
.settings-row-title { font-size:14px; font-weight:600; color:var(--text); }
.settings-row-sub { font-size:11px; color:var(--text-sec); margin-top:1px; }
.settings-icon { width:31px; height:31px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dark-icon{background:#1c1c1e;} .notif-icon{background:var(--pink);} .pw-icon{background:#f59e0b;} .edit-icon{background:#8b5cf6;} .info-icon{background:#3b82f6;} .terms-icon{background:#10b981;}
.toggle { position:relative; display:inline-block; width:46px; height:26px; cursor:pointer; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; position:absolute; }
.toggle-track { position:absolute; inset:0; background:var(--border); border-radius:13px; transition:background 0.2s; }
.toggle input:checked + .toggle-track { background:var(--pink); }
.toggle-thumb { position:absolute; left:3px; width:20px; height:20px; background:white; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,0.25); transition:transform 0.2s; }
.toggle input:checked + .toggle-track .toggle-thumb { transform:translateX(20px); }

/* ══════════════════════════════════════════
   MODALS
══════════════════════════════════════════ */
.modal { position:absolute; inset:0; z-index:300; display:flex; align-items:flex-end; justify-content:center; }
.modal:not(.hidden) { display:flex; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(2px); }
.modal-sheet { position:relative; background:var(--bg-card); border-radius:24px 24px 0 0; width:100%; max-height:92%; overflow-y:auto; padding:0 0 22px; animation:sheetUp 0.25s ease; }
.modal-sheet::-webkit-scrollbar { display:none; }
@keyframes sheetUp { from{transform:translateY(100%);opacity:0.5} to{transform:translateY(0);opacity:1} }
.modal-handle { width:38px; height:4px; border-radius:2px; background:var(--border); margin:11px auto 3px; }
.modal-title { font-size:17px; font-weight:800; color:var(--text); text-align:center; padding:7px 16px 0; }
.modal-body { padding:13px 15px 7px; }
.modal-scroll { max-height:240px; overflow-y:auto; }
.modal-scroll p { font-size:13px; color:var(--text-sec); line-height:1.6; margin-bottom:7px; }
.modal-scroll h4 { font-size:14px; font-weight:700; color:var(--text); }
.modal-footer-row { display:flex; gap:9px; padding:0 15px; }
.modal-footer-row .btn { flex:1; }
.story-type-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:13px; }
.story-type-btn { display:flex; flex-direction:column; align-items:center; gap:7px; padding:18px 11px; background:var(--bg-input); border-radius:var(--radius-xl); border:none; cursor:pointer; font-size:13px; font-weight:600; color:var(--text); transition:background 0.15s; }
.story-type-btn:hover { background:var(--pink-pale); color:var(--pink); }
.story-bg-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:9px 0; }
.story-bg-dot { width:27px; height:27px; border-radius:50%; border:2.5px solid transparent; cursor:pointer; transition:border-color 0.15s, transform 0.15s; }
.story-bg-dot:hover,.story-bg-dot.active { border-color:var(--text); transform:scale(1.15); }
.about-sheet { text-align:center; padding-bottom:26px; }
.about-logo { width:76px; height:76px; margin:18px auto 8px; }
.about-logo svg { width:100%; height:100%; }
.about-app-name { font-size:21px; font-weight:800; color:var(--text); }
.about-version { font-size:12px; color:var(--text-sec); margin-bottom:11px; }
.about-desc { font-size:13px; color:var(--text-sec); line-height:1.6; padding:0 22px 15px; }

/* Story Viewer */
.story-viewer { position:absolute; inset:0; z-index:400; background:#000; display:flex; flex-direction:column; }
.story-viewer.hidden { display:none; }
.story-progress-bar { height:3px; background:rgba(255,255,255,0.3); margin:12px 12px 0; border-radius:2px; flex-shrink:0; }
.story-progress-fill { height:100%; background:white; border-radius:2px; width:0%; transition:width 5s linear; }
.story-close { position:absolute; top:20px; right:12px; z-index:10; width:35px; height:35px; border-radius:50%; background:rgba(255,255,255,0.15); display:flex; align-items:center; justify-content:center; }
.story-user-info { position:absolute; top:24px; left:12px; display:flex; align-items:center; gap:8px; z-index:10; }
.story-user-avatar { width:33px; height:33px; border-radius:50%; background:var(--pink); border:2px solid white; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:white; background-size:cover; background-position:center; }
.story-user-name { font-size:13px; font-weight:700; color:white; }
.story-user-time { font-size:11px; color:rgba(255,255,255,0.7); margin-left:4px; }
.story-content { flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.story-content img { max-width:100%; max-height:100%; object-fit:contain; }
.story-text-content { display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:40px 26px; font-size:25px; font-weight:800; text-align:center; word-break:break-word; line-height:1.35; }
.story-prev-btn,.story-next-btn { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:80px; z-index:5; background:transparent; color:rgba(255,255,255,0.65); font-size:36px; display:flex; align-items:center; border:none; cursor:pointer; }
.story-prev-btn { left:0; justify-content:flex-start; padding-left:5px; }
.story-next-btn { right:0; justify-content:flex-end; padding-right:5px; }

/* Context Menu */
.ctx-menu { position:absolute; right:0; top:calc(100% + 2px); background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); z-index:100; overflow:hidden; min-width:155px; animation:sheetUp 0.15s ease; }
.ctx-item { display:flex; align-items:center; gap:9px; padding:10px 13px; font-size:13px; color:var(--text); cursor:pointer; transition:background 0.12s; }
.ctx-item:hover { background:var(--bg-hover); }
.ctx-item.danger { color:#ef4444; }
.ctx-item svg { width:15px; height:15px; flex-shrink:0; }

/* Empty State */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:36px 22px; text-align:center; gap:9px; color:var(--text-hint); }
.empty-title { font-size:15px; font-weight:700; color:var(--text); }
.empty-sub   { font-size:13px; color:var(--text-sec); line-height:1.5; }

/* Toast */
.toast-container { position:absolute; bottom:calc(var(--bot-h) + 10px); left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; align-items:center; gap:5px; pointer-events:none; width:90%; }
.toast { background:#1a1a1a; color:white; padding:10px 20px; border-radius:var(--radius-pill); font-size:13px; font-weight:600; box-shadow:0 4px 16px rgba(0,0,0,0.25); animation:toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards; max-width:100%; text-align:center; }
body.dark .toast { background:#ede9fe; color:#0f0a1e; }
.toast.success{background:#16a34a;} .toast.error{background:#dc2626;} .toast.info{background:var(--pink);}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateY(12px)}}

/* ══════════════════════════════════════════
   NEW FEATURES — FORGOT PASSWORD, SEARCH, VIDEO, PROFILE SAVE
══════════════════════════════════════════ */

/* Forgot password link */
.forgot-pw-row { text-align:right; margin:-6px 0 10px; }
.forgot-pw-link { font-size:12px; color:var(--pink); font-weight:600; }
.forgot-pw-link:hover { text-decoration:underline; }

/* Form success state */
.form-success {
  background:#f0fdf4; border:1px solid #86efac; color:#16a34a;
  border-radius:var(--radius-md); padding:9px 12px; font-size:13px; margin-bottom:11px;
}
body.dark .form-success { background:#0a2015; border-color:#166534; color:#86efac; }

/* Search tabs in modal */
.search-tabs-row { display:flex; background:var(--bg-input); border-radius:var(--radius-pill); padding:3px; margin-bottom:12px; }
.search-tab { flex:1; padding:8px 0; border-radius:var(--radius-pill); font-size:13px; font-weight:600; color:var(--text-sec); transition:all 0.2s; border:none; background:none; cursor:pointer; }
.search-tab.active { background:var(--pink); color:white; box-shadow:0 2px 8px rgba(124,58,237,0.3); }

/* Search post results */
.search-posts-list { display:flex; flex-direction:column; gap:4px; max-height:320px; overflow-y:auto; }
.search-post-result { padding:10px; border-radius:var(--radius-lg); background:var(--bg-input); cursor:pointer; transition:background 0.15s; }
.search-post-result:hover { background:var(--bg-hover); }
.search-post-author { display:flex; align-items:center; gap:9px; margin-bottom:6px; font-size:13px; color:var(--text); }
.search-post-text { font-size:13px; color:var(--text-sec); line-height:1.45; word-break:break-word; }

/* Video in post card */
.post-video {
  width:100%; max-height:320px; object-fit:contain;
  border-radius:var(--radius-md); margin-top:9px;
  background:#000; display:block;
}

/* Video preview wrap in compose */
.video-preview-wrap { position:relative; margin:10px 0; border-radius:var(--radius-md); overflow:hidden; background:#000; }

/* Video tab header */
.video-tab-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 8px; }
.btn-upload-video {
  display:flex; align-items:center; gap:6px;
  padding:8px 14px; background:linear-gradient(135deg,var(--pink-light),var(--pink-dark));
  color:white; border-radius:var(--radius-pill); font-size:13px; font-weight:700;
  border:none; cursor:pointer; transition:opacity 0.15s;
}
.btn-upload-video:hover { opacity:0.88; }

/* Video player card in video tab */
.video-card .video-thumb { height:auto; background:#000; }
.video-player { width:100%; display:block; max-height:240px; object-fit:contain; background:#000; }


/* ══════════════════════════════════════════
   FRIENDS & FOLLOWERS TAB
══════════════════════════════════════════ */
.friends-section { padding:12px 12px 6px; }
.friends-section-title { font-size:11px; font-weight:700; color:var(--text-sec); text-transform:uppercase; letter-spacing:0.5px; padding:8px 4px 6px; }
.friend-item { display:flex; align-items:center; gap:11px; padding:10px 12px; background:var(--bg-card); border-radius:var(--radius-lg); margin-bottom:6px; box-shadow:var(--shadow-card); }
.friend-item-info { flex:1; min-width:0; }
.friend-item-name { font-size:14px; font-weight:700; color:var(--text); }
.friend-item-meta { font-size:11px; color:var(--text-sec); margin-top:2px; }
.friend-item-actions { display:flex; gap:6px; }
.btn-friend-msg { padding:6px 12px; background:var(--pink); color:white; border-radius:var(--radius-pill); font-size:12px; font-weight:700; border:none; cursor:pointer; }
.btn-friend-msg:hover { opacity:0.85; }
.btn-unfollow { padding:6px 12px; background:var(--bg-input); color:var(--text-sec); border-radius:var(--radius-pill); font-size:12px; font-weight:700; border:1.5px solid var(--border); cursor:pointer; }
.btn-unfollow:hover { background:var(--bg-hover); border-color:var(--pink); color:var(--pink); }
.friends-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px 22px; text-align:center; gap:7px; color:var(--text-hint); }
.friends-counts-row { display:flex; gap:10px; padding:0 12px 10px; }
.friends-count-card { flex:1; background:var(--bg-card); border-radius:var(--radius-lg); padding:12px; text-align:center; box-shadow:var(--shadow-card); cursor:pointer; transition:background 0.15s; }
.friends-count-card:hover { background:var(--bg-hover); }
.friends-count-num { font-size:22px; font-weight:800; color:var(--pink); }
.friends-count-lbl { font-size:11px; color:var(--text-sec); text-transform:uppercase; letter-spacing:0.3px; margin-top:2px; }

/* Follow button on profile */
.btn-follow { padding:8px 18px; border-radius:var(--radius-pill); font-size:13px; font-weight:700; border:none; cursor:pointer; transition:all 0.15s; }
.btn-follow.not-following { background:var(--pink); color:white; }
.btn-follow.not-following:hover { opacity:0.88; }
.btn-follow.following { background:var(--bg-input); color:var(--text-sec); border:1.5px solid var(--border); }
.btn-follow.following:hover { background:var(--bg-hover); border-color:var(--pink); color:var(--pink); }

/* Followers/Following count on own profile stats */
.profile-stat.clickable { cursor:pointer; padding:4px 8px; border-radius:var(--radius-md); transition:background 0.15s; }
.profile-stat.clickable:hover { background:var(--bg-hover); }

/* ══════════════════════════════════════════
   IMPROVED MESSAGING
══════════════════════════════════════════ */
.chat-view { position:absolute; inset:0; background:var(--bg); z-index:10; display:flex; flex-direction:column; transform:translateX(100%); transition:transform 0.28s ease; }
.chat-view.open { transform:translateX(0); }
.chat-view.hidden { display:none; }
.chat-messages { flex:1; overflow-y:auto; padding:10px 12px 10px; display:flex; flex-direction:column; gap:4px; }
.chat-messages::-webkit-scrollbar { display:none; }
.msg-bubble-row { display:flex; gap:7px; align-items:flex-end; margin-bottom:2px; }
.msg-bubble-row.mine { flex-direction:row-reverse; }
.msg-bubble { max-width:75%; padding:9px 13px; border-radius:18px; font-size:14px; line-height:1.45; word-break:break-word; }
.msg-bubble-row.mine .msg-bubble { background:linear-gradient(135deg,var(--pink-light),var(--pink-dark)); color:white; border-bottom-right-radius:4px; }
.msg-bubble-row:not(.mine) .msg-bubble { background:var(--bg-card); color:var(--text); border-bottom-left-radius:4px; box-shadow:var(--shadow-card); }
.msg-time { font-size:10px; color:var(--text-hint); margin-top:2px; text-align:right; }
.msg-bubble-row:not(.mine) .msg-time { text-align:left; }
.chat-input-bar { padding:8px 10px; background:var(--bg-card); border-top:1px solid var(--divider); flex-shrink:0; padding-bottom:max(8px,env(safe-area-inset-bottom,8px)); }
.chat-input-wrap { display:flex; align-items:flex-end; gap:8px; background:var(--bg-input); border-radius:22px; padding:6px 8px 6px 14px; border:1.5px solid var(--border); }
.chat-input-wrap:focus-within { border-color:var(--pink); }
.chat-input { flex:1; border:none; background:transparent; resize:none; outline:none; font-size:14px; color:var(--text); max-height:100px; line-height:1.4; }
.chat-input::placeholder { color:var(--text-hint); }
.send-btn { width:33px; height:33px; border-radius:50%; background:linear-gradient(135deg,var(--pink-light),var(--pink-dark)); color:white; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:opacity 0.15s; }
.send-btn:hover { opacity:0.85; }

/* ══════════════════════════════════════════
   IMPROVED SEARCH
══════════════════════════════════════════ */
.search-result-follow-btn { padding:5px 11px; background:var(--pink); color:white; border-radius:var(--radius-pill); font-size:11px; font-weight:700; border:none; cursor:pointer; flex-shrink:0; }
.search-result-follow-btn.following { background:var(--bg-input); color:var(--text-sec); border:1.5px solid var(--border); }
.search-result-follow-btn:hover { opacity:0.85; }
.search-user-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius-lg); cursor:pointer; transition:background 0.12s; }
.search-user-item:hover { background:var(--bg-hover); }
.search-user-name { font-size:14px; font-weight:700; color:var(--text); }
.search-user-email { font-size:11px; color:var(--text-sec); margin-top:2px; }
.search-user-results { display:flex; flex-direction:column; max-height:340px; overflow-y:auto; }
.search-user-results::-webkit-scrollbar { display:none; }
.search-hint { font-size:13px; color:var(--text-hint); text-align:center; padding:20px 0; }
.user-search-input { flex:1; border:none; background:transparent; outline:none; font-size:14px; color:var(--text); }
.user-search-input::placeholder { color:var(--text-hint); }
.search-bar-wrap { display:flex; align-items:center; gap:8px; background:var(--bg-input); border-radius:var(--radius-pill); border:1.5px solid var(--border); padding:8px 14px; margin-bottom:12px; }
.search-bar-wrap:focus-within { border-color:var(--pink); }

/* ══════════════════════════════════════════
   LOPAOST v3 — NEW FEATURES CSS
   Reactions · Share · People You May Know
   Birthday Card · AI Memory · FB-like extras
══════════════════════════════════════════ */

/* ── Reaction Picker ── */
.reaction-picker {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 7px 10px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  gap: 4px;
  animation: sheetUp 0.18s ease;
  white-space: nowrap;
}
.reaction-picker.open { display: flex; }
.reaction-btn {
  font-size: 22px;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  background: transparent;
  border: none;
  line-height: 1;
}
.reaction-btn:hover { transform: scale(1.35) translateY(-4px); background: var(--bg-hover); }
.post-act-btn-wrap { position: relative; flex: 1; }
.post-reaction-summary {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-sec);
}
.reaction-icon-stack { display: flex; }
.reaction-icon-item {
  width: 19px; height: 19px; border-radius: 50%; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--bg-card);
  margin-left: -5px;
  background: var(--pink-pale);
}
.reaction-icon-item:first-child { margin-left: 0; }

/* ── Share Modal ── */
#share-modal .share-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 8px 0 4px;
}
.share-opt {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 6px;
  border-radius: var(--radius-lg);
  background: var(--bg-input);
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  font-size: 12px; font-weight: 600; color: var(--text-sec);
}
.share-opt:hover { background: var(--bg-hover); color: var(--pink); }
.share-opt-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.share-copy-row {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 0 0;
}
.share-copy-link {
  flex: 1; padding: 10px 12px;
  background: var(--bg-input); border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  font-size: 12px; color: var(--text-sec);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── People You May Know ── */
.pymk-section {
  background: var(--bg-card);
  margin-bottom: 8px;
  padding: 12px 0 4px;
}
.pymk-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px 10px;
}
.pymk-title { font-size: 15px; font-weight: 800; color: var(--text); }
.pymk-see-all { font-size: 13px; color: var(--pink); font-weight: 600; cursor: pointer; }
.pymk-scroll {
  display: flex; gap: 10px; padding: 0 14px 10px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pymk-scroll::-webkit-scrollbar { display: none; }
.pymk-card {
  flex-shrink: 0; width: 130px;
  background: var(--bg-input); border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 10px 12px;
  gap: 7px; transition: box-shadow 0.15s;
}
.pymk-card:hover { box-shadow: var(--shadow-lg); }
.pymk-avatar {
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-light), var(--pink-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: white;
  flex-shrink: 0; background-size: cover; background-position: center;
  overflow: hidden;
}
.pymk-name {
  font-size: 13px; font-weight: 700; color: var(--text);
  text-align: center; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.pymk-mutual { font-size: 10px; color: var(--text-sec); text-align: center; }
.pymk-follow-btn {
  padding: 6px 14px;
  background: var(--pink); color: white;
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700;
  border: none; cursor: pointer;
  transition: opacity 0.15s; width: 100%;
}
.pymk-follow-btn:hover { opacity: 0.85; }
.pymk-follow-btn.following-pymk {
  background: var(--bg-card); color: var(--text-sec);
  border: 1.5px solid var(--border);
}

/* ── Birthday / On This Day Banner ── */
.birthday-banner {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
  border-left: 4px solid #ff9800;
  margin: 8px 12px 0;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  animation: fadeUp 0.3s ease;
}
body.dark .birthday-banner {
  background: linear-gradient(135deg, #2a1e00, #3a2500);
  border-left-color: #ff9800;
}
.birthday-banner-icon { font-size: 28px; flex-shrink: 0; }
.birthday-banner-text .bb-title {
  font-size: 14px; font-weight: 700; color: #e65100;
}
body.dark .birthday-banner-text .bb-title { color: #ffb74d; }
.birthday-banner-text .bb-sub { font-size: 12px; color: #bf360c; margin-top: 2px; }
body.dark .birthday-banner-text .bb-sub { color: #ff8a65; }

/* On This Day */
.on-this-day-banner {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  border-left: 4px solid #4caf50;
  margin: 8px 12px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  animation: fadeUp 0.3s ease;
}
body.dark .on-this-day-banner {
  background: linear-gradient(135deg, #0a1f0a, #122012);
  border-left-color: #4caf50;
}
.on-this-day-banner .otd-title { font-size: 14px; font-weight: 700; color: #2e7d32; }
body.dark .on-this-day-banner .otd-title { color: #81c784; }
.on-this-day-banner .otd-sub { font-size: 12px; color: #388e3c; margin-top: 2px; }
body.dark .on-this-day-banner .otd-sub { color: #a5d6a7; }

/* ── AI Memory Indicator ── */
.ai-memory-indicator {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-sec);
  padding: 4px 8px;
  background: var(--bg-input);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.ai-memory-indicator:hover { background: var(--bg-hover); }
.ai-memory-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.chat-header-actions { display: flex; gap: 6px; align-items: center; }

/* ── Settings: AI Memory row icon ── */
.ai-icon { background: linear-gradient(135deg, #7c4dff, var(--pink)); }

/* ── Reactions in notifications ── */
.notif-item .reaction-notif-icon {
  font-size: 16px; margin-right: 4px;
}

/* ── Post share count ── */
.post-share-count {
  font-size: 12px; color: var(--text-hint);
  margin-left: auto; padding-right: 2px;
}

/* ── Trending Widget ── */
.trending-widget {
  background: var(--bg-card);
  margin: 0 0 8px;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.trending-widget-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 8px;
  font-size: 15px; font-weight: 800; color: var(--text);
}
.trending-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px;
  background: var(--pink-pale);
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; color: var(--pink);
  cursor: pointer; border: 1.5px solid rgba(233,30,140,0.15);
  transition: background 0.15s; margin: 0 4px 8px;
}
.trending-tag:hover { background: rgba(124,58,237,0.18); }
.trending-tags-wrap { padding: 0 10px 4px; display: flex; flex-wrap: wrap; }

/* ── Repost / Shared post indicator ── */
.shared-post-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-sec);
  padding: 6px 14px 0;
  border-top: 1px solid var(--divider);
}

/* ── Marketplace ── */
.marketplace-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px;
  background: #e3f2fd; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 700; color: #1565c0;
  margin-left: 6px;
}
body.dark .marketplace-badge { background: #0a1a2a; color: #64b5f6; }

/* ── Persistent login splash ── */
#auth-loading-splash {
  position: absolute; inset: 0; z-index: 9999;
  background: var(--bg); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
}
#auth-loading-splash.hidden { display: none; }
.splash-logo {
  width: 80px; height: 80px;
  animation: splashPop 0.5s ease forwards;
}
@keyframes splashPop {
  0% { opacity: 0; transform: scale(0.7); }
  60% { transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
.splash-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--pink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.splash-text { font-size: 13px; color: var(--text-sec); font-weight: 600; }

/* ── Pulse animation for new content ── */
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(233,30,140,0.4); }
  70% { box-shadow: 0 0 0 10px rgba(233,30,140,0); }
  100% { box-shadow: 0 0 0 0 rgba(233,30,140,0); }
}
.new-content-pulse { animation: pulse-ring 1.5s ease 2; }

/* ══════════════════════════════════════════
   FULL SEARCH EXPERIENCE — v3
   People cards with Message + Add Friend + View
══════════════════════════════════════════ */

/* Full-height search sheet */
.search-modal-sheet {
  max-height: 95% !important;
  display: flex;
  flex-direction: column;
  padding-bottom: 0 !important;
}
.search-modal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 10px;
  border-bottom: 1px solid var(--divider);
}
.search-cancel-btn {
  font-size: 14px; font-weight: 600;
  color: var(--pink); background: none; border: none;
  cursor: pointer; flex-shrink: 0; padding: 4px 2px;
  white-space: nowrap;
}
.search-cancel-btn:hover { opacity: 0.75; }
.search-clear-btn {
  background: var(--text-hint); color: white;
  border: none; border-radius: 50%;
  width: 18px; height: 18px; font-size: 10px;
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
  line-height: 1;
}
.search-results-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 10px 20px;
}
.search-results-scroll::-webkit-scrollbar { display: none; }

/* Search result people card */
.srp-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 12px 13px;
  margin-bottom: 9px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s;
}
.srp-card:hover { box-shadow: var(--shadow-lg); }
.srp-top {
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 11px; cursor: pointer;
}
.srp-avatar {
  width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-light), var(--pink-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: white;
  flex-shrink: 0; background-size: cover; background-position: center;
  overflow: hidden; cursor: pointer;
  transition: opacity 0.15s;
}
.srp-avatar:hover { opacity: 0.85; }
.srp-info { flex: 1; min-width: 0; cursor: pointer; }
.srp-name {
  font-size: 15px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.srp-sub {
  font-size: 12px; color: var(--text-sec);
  margin-top: 2px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.srp-actions {
  display: flex; gap: 7px;
}
.srp-btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 5px; padding: 8px 6px;
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700;
  cursor: pointer; border: none;
  transition: opacity 0.15s, background 0.15s;
  white-space: nowrap;
}
.srp-btn:active { transform: scale(0.96); }
.srp-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.srp-msg {
  background: linear-gradient(135deg, var(--pink-light), var(--pink-dark));
  color: white;
}
.srp-msg:hover { opacity: 0.88; }

.srp-follow {
  background: var(--pink-pale);
  color: var(--pink);
  border: 1.5px solid rgba(124,58,237,0.25);
}
.srp-follow:hover { background: rgba(124,58,237,0.18); }
.srp-follow.srp-following {
  background: var(--bg-input);
  color: var(--text-sec);
  border: 1.5px solid var(--border);
}
.srp-follow.srp-following:hover {
  background: var(--bg-hover);
  color: var(--pink);
  border-color: var(--pink);
}

.srp-view {
  background: var(--bg-input);
  color: var(--text-sec);
  border: 1.5px solid var(--border);
  flex: 0.6;
}
.srp-view:hover { background: var(--bg-hover); color: var(--text); }

/* Empty / loading states inside search */
.search-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-sec);
}
.search-loading {
  display: flex; justify-content: center;
  padding: 24px 0;
}

/* Suggestion chips shown before user types */
.search-suggestions {
  padding: 6px 0 4px;
}
.search-suggestions-title {
  font-size: 11px; font-weight: 700;
  color: var(--text-sec); text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 8px;
}

/* ══════════════════════════════════════════
   ONLINE USERS STRIP (search modal & home)
══════════════════════════════════════════ */
.online-users-strip {
  padding: 8px 12px 4px;
  border-bottom: 1px solid var(--divider);
  background: var(--bg-card);
}
.online-strip-title {
  font-size: 11px; font-weight: 700;
  color: var(--text-sec); text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.online-dot-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  animation: pulse-green 1.8s infinite;
  flex-shrink: 0;
}
.online-users-row {
  display: flex; gap: 10px;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 8px;
}
.online-users-row::-webkit-scrollbar { display: none; }
.online-user-bubble {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; cursor: pointer; flex-shrink: 0;
}
.online-user-avatar-wrap {
  position: relative;
  width: 44px; height: 44px;
}
.online-user-av {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: white;
  background-size: cover; background-position: center;
  border: 2.5px solid var(--bg-card);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  overflow: hidden;
}
.online-indicator {
  position: absolute; bottom: 1px; right: 1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #22c55e; border: 2px solid var(--bg-card);
}
.online-user-name {
  font-size: 10px; color: var(--text-sec);
  font-weight: 600; white-space: nowrap;
  max-width: 50px; overflow: hidden;
  text-overflow: ellipsis; text-align: center;
}
.online-username-tag {
  font-size: 10px; color: var(--pink); font-weight: 700;
}

/* ══════════════════════════════════════════
   USERNAME CLAIM MODAL
══════════════════════════════════════════ */
.claim-username-row {
  display: flex; gap: 6px; align-items: center;
}
.claim-username-row .form-input {
  flex: 1;
}
.username-status {
  font-size: 12px; margin-top: 5px; font-weight: 600;
  min-height: 18px;
}
.username-status.ok   { color: #22c55e; }
.username-status.err  { color: #ef4444; }
.username-status.checking { color: var(--text-hint); }

/* username badge shown on profile */
.profile-username-badge {
  font-size: 13px; font-weight: 700; color: var(--pink);
  margin-top: 2px; letter-spacing: 0.2px;
}
.profile-username-badge::before { content: "@"; opacity: 0.7; }

/* settings row for username claim */
.username-claim-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid var(--divider);
  cursor: pointer;
  transition: background 0.15s;
}
.username-claim-row:hover { background: var(--bg-hover); }
.username-claimed-badge {
  font-size: 12px; font-weight: 700;
  color: var(--pink); background: var(--pink-pale);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  border: 1.5px solid rgba(124,58,237,0.25);
}

/* form success message */
.form-success {
  background: #f0fdf4; border: 1px solid #86efac; color: #166534;
  border-radius: var(--radius-md); padding: 9px 12px;
  font-size: 13px; margin-bottom: 11px;
}
body.dark .form-success { background: #052e16; border-color: #166534; color: #86efac; }


/* ── Facebook Features & Data Use modal extras ── */
.data-use-grid { display:grid; gap:10px; margin-bottom:16px; }
.data-use-card { display:flex; gap:12px; align-items:flex-start; padding:12px; background:var(--bg-input); border-radius:10px; }
.data-use-icon { font-size:22px; flex-shrink:0; }
.data-use-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:3px; }
.data-use-desc  { font-size:12px; line-height:1.6; color:var(--text-sec); }

/* Facebook connect button */
.fb-connect-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #1877f2; color: white; border-radius: var(--radius-pill);
  padding: 12px 20px; font-size: 15px; font-weight: 700; width: 100%;
  border: none; cursor: pointer; margin: 10px 0;
  box-shadow: 0 4px 16px rgba(24,119,242,0.35);
  transition: background 0.2s;
}
.fb-connect-btn:hover { background: #145dbf; }

/* Purple AI suggestion pills */
.ai-suggest-pill {
  background: var(--pink-pale) !important;
  color: var(--pink) !important;
  border: 1.5px solid var(--pink) !important;
}
.ai-suggest-pill:hover {
  background: var(--pink) !important;
  color: white !important;
}

/* Settings icon purple tones */
.settings-icon.dark-icon  { background: linear-gradient(135deg, var(--pink), var(--pink-dark)); }
.settings-icon.notif-icon { background: linear-gradient(135deg, var(--pink-light), var(--pink)); }
.settings-icon.edit-icon  { background: linear-gradient(135deg, var(--pink), #6d28d9); }
.settings-icon.pw-icon    { background: linear-gradient(135deg, var(--pink-dark), #4c1d95); }
.settings-icon.info-icon  { background: linear-gradient(135deg, var(--pink), var(--pink-light)); }
.settings-icon.terms-icon { background: linear-gradient(135deg, #6d28d9, var(--pink-dark)); }
.settings-icon.ai-icon    { background: linear-gradient(135deg, var(--pink), #4c1d95); }

/* ============================================================
   MENU TAB — Facebook-style layout for everyday use
   ============================================================ */
.menu-profile-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-card); margin: 8px 14px; padding: 14px;
  border-radius: var(--radius-xl); border: 1px solid var(--border);
  cursor: pointer; box-shadow: var(--shadow-card); transition: background 0.15s;
}
.menu-profile-card:hover { background: var(--bg-hover); }
.avatar-lg {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-light), var(--pink-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: white; flex-shrink: 0;
  background-size: cover; background-position: center; overflow: hidden;
}
.menu-name { font-size: 17px; font-weight: 800; color: var(--text); }
.menu-sub { font-size: 13px; color: var(--pink); font-weight: 600; margin-top: 2px; }

.menu-card {
  background: var(--bg-card); margin: 0 14px 10px; padding: 14px;
  border-radius: var(--radius-xl); border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.invite-card { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-color: #93c5fd; }
body.dark .invite-card { background: linear-gradient(135deg, #0f1c33, #1e3a5f); border-color: #1e40af; }

.menu-shortcuts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 0 14px 14px;
}
.menu-shortcut {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 8px; text-align: center;
  font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer;
  transition: all 0.15s;
}
.menu-shortcut:hover { background: var(--bg-hover); border-color: var(--pink); transform: translateY(-1px); }
.shortcut-icon { font-size: 26px; margin-bottom: 6px; display: block; }

.menu-section-header {
  font-size: 13px; font-weight: 800; color: var(--text-sec);
  padding: 14px 14px 6px; text-transform: uppercase; letter-spacing: 0.5px;
}

.menu-list {
  background: var(--bg-card); margin: 0 14px 12px;
  border-radius: var(--radius-xl); border: 1px solid var(--border); overflow: hidden;
}
.menu-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; font-size: 15px; font-weight: 600; color: var(--text);
  border-bottom: 1px solid var(--divider); cursor: pointer; transition: background 0.1s;
}
.menu-list-item:last-child { border-bottom: none; }
.menu-list-item:hover { background: var(--bg-hover); }
.menu-icon { font-size: 20px; width: 26px; text-align: center; }

.menu-group-item, .menu-page-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--bg-input); margin: 4px 0;
  border-radius: var(--radius-md); border: 1px solid var(--border);
}
.menu-group-item .group-name, .menu-page-item .group-name { font-weight: 700; font-size: 14px; }
.menu-group-item .group-meta, .menu-page-item .group-meta { font-size: 12px; color: var(--text-sec); }

/* Make bottom nav comfortable with 6 items */
.bottom-nav .bnav-item { font-size: 9px; }
.bottom-nav .bnav-item svg { width: 20px; height: 20px; }

/* Better comments UI */
.comments-section {
  background: var(--bg-input);
  border-top: 1px solid var(--divider);
  padding: 10px 12px 12px;
}
.comments-empty {
  text-align: center;
  padding: 16px 8px;
  font-size: 13px;
  color: var(--text-sec);
}
.comment-item {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  align-items: flex-start;
}
.comment-bubble {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 8px 12px;
  flex: 1;
  border: 1px solid var(--border);
}
.comment-author { font-size: 13px; font-weight: 700; color: var(--text); }
.comment-text { font-size: 14px; color: var(--text); margin-top: 2px; line-height: 1.4; word-break: break-word; }
.comment-time { font-size: 11px; color: var(--text-hint); margin-top: 3px; }
.comment-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--divider);
}
.comment-field {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 8px 14px;
  background: var(--bg-card);
  resize: none;
  min-height: 36px;
  max-height: 100px;
  font-size: 14px;
  outline: none;
}
.comment-field:focus { border-color: var(--pink); }

/* Explore sheet */
.explore-section-title {
  font-size: 14px; font-weight: 800; color: var(--text);
  padding: 14px 4px 8px; text-transform: uppercase; letter-spacing: 0.4px;
}
.explore-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--pink-pale); color: var(--pink);
  font-size: 13px; font-weight: 600; margin: 0 6px 8px 0;
  border: 1.5px solid rgba(37,99,235,0.2); cursor: pointer;
}
.explore-chip:hover { background: var(--pink); color: white; }
.explore-person-row, .explore-entity-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px; border-bottom: 1px solid var(--divider);
}
.explore-person-row:last-child, .explore-entity-row:last-child { border-bottom: none; }

/* Group badge on posts */
.post-group-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--pink);
  background: var(--pink-pale); padding: 2px 8px;
  border-radius: 999px; margin-left: 6px;
}