/* ══════════════════════════════════════════════════════════
   VIBRAWORLD · Red Social Digital Twin
   "El mundo vive para ti. Tú eres el protagonista."
   
   Motor: NERHIA Urban × MiroFish OASIS × VBC Protocol
   100,000,000,000 agentes IA en 5 departamentos
   
   Estética: Instagram × Palantir × Truman Show
   Dark premium · Micro-animaciones · Edge AI
   ══════════════════════════════════════════════════════════ */
:root {
  /* VibraOS base */
  --bg:       #06040f;
  --deep:     #090612;
  --surface:  #100d1a;
  --s2:       #161225;
  --s3:       #1e1830;
  --border:   rgba(255,255,255,.06);
  --b2:       rgba(138,87,255,.2);

  /* Neon accent system */
  --violet:   #8a57ff;
  --violet2:  #b088ff;
  --cyan:     #00d4ff;
  --teal:     #00e5cc;
  --green:    #00e676;
  --gold:     #ffc400;
  --gold2:    #ffdd6b;
  --orange:   #ff7043;
  --pink:     #f06292;
  --red:      #ff4757;

  /* Text */
  --text:     rgba(240,235,255,.93);
  --text2:    rgba(190,178,230,.65);
  --muted:    rgba(140,125,185,.42);

  /* Dept colors */
  --dept-mobility: #00d4ff;
  --dept-culture:  #b088ff;
  --dept-economy:  #ffc400;
  --dept-energy:   #00e676;
  --dept-vitality: #f06292;

  /* Typography */
  --serif:  'Instrument Serif', Georgia, serif;
  --sans:   'Syne', system-ui, sans-serif;
  --mono:   'DM Mono', monospace;

  /* Safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { font-size:16px; overflow-x:hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  min-height:100vh; min-height:100dvh;
  overflow-x:hidden;
}

/* Noise global */
body::after {
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9000;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.022'/%3E%3C/svg%3E");
}

/* ══ SCREENS ═══════════════════════════════════════════════ */
.screen { display:none; }
.screen.active { display:block; }

/* ══ SPLASH / ONBOARD ════════════════════════════════════════ */
#screen-splash {
  min-height:100vh; min-height:100dvh;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  padding:2rem 1.5rem calc(2rem + var(--safe-bot));
  text-align:center; gap:2rem;
  background: radial-gradient(ellipse 90% 70% at 50% 35%, rgba(138,87,255,.08) 0%, transparent 65%), var(--bg);
}
#screen-splash.active { display:flex; }

/* Orb animado */
.splash-orb {
  width:120px; height:120px; border-radius:50%;
  position:relative; margin:0 auto;
}
.splash-orb-inner {
  width:100%; height:100%; border-radius:50%;
  background: conic-gradient(from 0deg, var(--violet), var(--cyan), var(--teal), var(--violet));
  animation: spin-orb 4s linear infinite;
  opacity:.85;
}
.splash-orb::after {
  content:''; position:absolute; inset:12px; border-radius:50%;
  background: var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.splash-orb-text {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:1.6rem; font-weight:900;
  color:var(--violet2); z-index:1;
}
@keyframes spin-orb { to{ transform:rotate(360deg); } }

.splash-brand {
  font-family:var(--sans); font-size:2.6rem; font-weight:900;
  letter-spacing:-.03em; line-height:1;
}
.splash-brand .vw { color:var(--violet2); }

.splash-tagline {
  font-family:var(--serif); font-style:italic;
  font-size:1.15rem; color:var(--text2); line-height:1.55; max-width:300px;
}

.splash-agents {
  display:flex; flex-direction:column; gap:.35rem; align-items:center;
}
.sa-num {
  font-family:var(--mono); font-size:1.8rem; font-weight:500;
  color:var(--cyan); letter-spacing:-.02em;
  animation: num-pulse 3s ease-in-out infinite;
}
@keyframes num-pulse { 0%,100%{opacity:1}50%{opacity:.6} }
.sa-label { font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* Departamentos preview */
.dept-pills { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; }
.dept-pill {
  font-family:var(--mono); font-size:.55rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .75rem; border-radius:99px; border:1px solid;
}
.dp-mobility { border-color:rgba(0,212,255,.3);  color:var(--dept-mobility); background:rgba(0,212,255,.06); }
.dp-culture  { border-color:rgba(176,136,255,.3); color:var(--dept-culture); background:rgba(176,136,255,.06); }
.dp-economy  { border-color:rgba(255,196,0,.3);   color:var(--dept-economy); background:rgba(255,196,0,.06); }
.dp-energy   { border-color:rgba(0,230,118,.3);   color:var(--dept-energy); background:rgba(0,230,118,.06); }
.dp-vitality { border-color:rgba(240,98,146,.3);  color:var(--dept-vitality); background:rgba(240,98,146,.06); }

/* Buttons */
.btn-google {
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  width:100%; max-width:320px; padding:1rem 1.5rem;
  background:#fff; border:none; border-radius:14px;
  font-family:var(--sans); font-size:1rem; font-weight:700; color:#111;
  cursor:pointer; box-shadow:0 4px 28px rgba(0,0,0,.45); transition:.18s;
}
.btn-google:active { transform:scale(.97); }
.g-icon { width:22px; height:22px; flex-shrink:0; }

.btn-guest {
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); background:transparent; border:none; cursor:pointer; padding:.4rem;
  text-decoration:underline;
}

/* Kaldi sponsor */
.kaldi-sponsor {
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,196,0,.5);
}
.ks-dot { width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold);animation:breathe 2s ease-in-out infinite; }
@keyframes breathe { 0%,100%{opacity:1}50%{opacity:.2} }

/* ══ APP SHELL ═══════════════════════════════════════════════ */
#screen-app {
  padding-top: calc(52px + var(--safe-top));
  padding-bottom: calc(64px + var(--safe-bot));
}

/* TOP NAV */
.topnav {
  position:fixed; top:0; left:0; right:0; z-index:300;
  height:calc(52px + var(--safe-top));
  padding-top:var(--safe-top);
  background:rgba(6,4,15,.94); backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding-left:1rem; padding-right:1rem;
}
.tn-brand {
  font-family:var(--sans); font-size:1.1rem; font-weight:900;
  color:var(--violet2); letter-spacing:-.01em;
}
.tn-center { display:flex; align-items:center; gap:.5rem; }
.tn-nerhia {
  font-family:var(--mono); font-size:.55rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.22rem .6rem; border:1px solid rgba(0,228,204,.2);
  color:var(--teal); background:rgba(0,228,204,.04);
}
.tn-right { display:flex; align-items:center; gap:.75rem; }
.tn-vbc {
  display:flex; align-items:center; gap:.3rem;
  font-family:var(--mono); font-size:.7rem; color:var(--gold);
}
.tn-avatar {
  width:30px; height:30px; border-radius:50%;
  border:2px solid rgba(138,87,255,.4); object-fit:cover;
  cursor:pointer;
}
.tn-avatar-ph {
  width:30px; height:30px; border-radius:50%;
  background:var(--surface); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
}
.live-dot { width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:breathe 2s ease-in-out infinite; }

/* TRUMAN BANNER */
.truman-banner {
  margin:.75rem 1rem;
  background: linear-gradient(135deg, rgba(138,87,255,.12) 0%, rgba(0,212,255,.06) 100%);
  border:1px solid rgba(138,87,255,.2); padding:.9rem 1rem;
  display:flex; align-items:center; gap:.85rem;
  position:relative; overflow:hidden;
}
.truman-banner::before {
  content:''; position:absolute; top:0; left:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--violet),var(--cyan));
}
.tb-live { display:flex; align-items:center; gap:.4rem; flex-shrink:0; }
.tb-live-dot { width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:breathe 1s ease-in-out infinite; }
.tb-live-text { font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red); }
.tb-info { flex:1; min-width:0; }
.tb-title { font-family:var(--sans);font-size:.88rem;font-weight:800;color:var(--text); }
.tb-sub { font-family:var(--mono);font-size:.58rem;color:var(--text2);margin-top:.15rem; }
.tb-agents { text-align:right; flex-shrink:0; }
.tb-agents-num { font-family:var(--mono);font-size:.85rem;color:var(--violet2);font-weight:500; }
.tb-agents-label { font-family:var(--mono);font-size:.48rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); }

/* DEPARTAMENTOS STRIP */
.dept-strip {
  display:flex; gap:.4rem; padding:.6rem 1rem;
  overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--border);
}
.dept-strip::-webkit-scrollbar { display:none; }
.dept-tab {
  flex-shrink:0; display:flex; align-items:center; gap:.35rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.08em;
  padding:.3rem .75rem; border:1px solid var(--border); border-radius:99px;
  background:transparent; cursor:pointer; transition:.18s; color:var(--muted);
  white-space:nowrap;
}
.dept-tab.active { color:var(--text); }
.dept-tab[data-dept="all"].active    { border-color:rgba(138,87,255,.5); background:rgba(138,87,255,.08); color:var(--violet2); }
.dept-tab[data-dept="mobility"].active  { border-color:rgba(0,212,255,.5); background:rgba(0,212,255,.08); color:var(--dept-mobility); }
.dept-tab[data-dept="culture"].active   { border-color:rgba(176,136,255,.5); background:rgba(176,136,255,.08); color:var(--dept-culture); }
.dept-tab[data-dept="economy"].active   { border-color:rgba(255,196,0,.5); background:rgba(255,196,0,.08); color:var(--dept-economy); }
.dept-tab[data-dept="energy"].active    { border-color:rgba(0,230,118,.5); background:rgba(0,230,118,.08); color:var(--dept-energy); }
.dept-tab[data-dept="vitality"].active  { border-color:rgba(240,98,146,.5); background:rgba(240,98,146,.08); color:var(--dept-vitality); }
.dt-dot { width:5px;height:5px;border-radius:50%; }

/* FEED */
.feed { padding:.5rem 0; }

/* POST CARD */
.post-card {
  border-bottom:1px solid var(--border);
  padding:.95rem 1rem 1rem;
  animation: postIn .4s ease both;
}
@keyframes postIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

.pc-header { display:flex; align-items:center; gap:.65rem; margin-bottom:.75rem; }
.pc-avatar {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  object-fit:cover; border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; background:var(--surface);
}
.pc-avatar.sim { border-style:dashed; }
.pc-info { flex:1; min-width:0; }
.pc-name { font-size:.88rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-name.protagonist { color:var(--violet2); }
.pc-meta { font-family:var(--mono); font-size:.56rem; color:var(--muted); display:flex; align-items:center; gap:.35rem; margin-top:.12rem; }
.pc-dept { font-family:var(--mono);font-size:.48rem;letter-spacing:.08em;text-transform:uppercase;padding:.1rem .35rem;border-radius:3px; }
.pc-dept.mobility { background:rgba(0,212,255,.1); color:var(--dept-mobility); }
.pc-dept.culture  { background:rgba(176,136,255,.1); color:var(--dept-culture); }
.pc-dept.economy  { background:rgba(255,196,0,.1); color:var(--dept-economy); }
.pc-dept.energy   { background:rgba(0,230,118,.1); color:var(--dept-energy); }
.pc-dept.vitality { background:rgba(240,98,146,.1); color:var(--dept-vitality); }
.pc-menu { color:var(--muted); font-size:1.1rem; cursor:pointer; padding:.3rem; }

/* Post content */
.pc-text { font-size:.9rem; line-height:1.55; color:var(--text); margin-bottom:.75rem; }
.pc-text .mention { color:var(--violet2); }
.pc-text .hashtag { color:var(--cyan); }

/* Post image placeholder (canvas-generated) */
.pc-image {
  width:100%; aspect-ratio:4/3; border-radius:6px;
  overflow:hidden; margin-bottom:.75rem; position:relative;
  background:var(--surface);
}
.pc-canvas { width:100%; height:100%; display:block; }

/* Reactions */
.pc-reactions { display:flex; align-items:center; gap:1.1rem; margin-bottom:.5rem; }
.pc-btn {
  display:flex; align-items:center; gap:.35rem;
  font-family:var(--mono); font-size:.65rem; color:var(--muted);
  background:transparent; border:none; cursor:pointer; transition:.18s;
  padding:.25rem;
}
.pc-btn:hover { color:var(--text); }
.pc-btn.liked { color:var(--red); }
.pc-btn.vbc-tipped { color:var(--gold); }

/* Comentarios AI */
.pc-comments { display:flex; flex-direction:column; gap:.6rem; padding-top:.5rem; }
.pc-comment { display:flex; gap:.55rem; }
.pcc-av {
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  background:var(--surface); border:1px dashed var(--border);
  display:flex; align-items:center; justify-content:center; font-size:.6rem;
}
.pcc-body { flex:1; }
.pcc-name { font-size:.72rem; font-weight:700; }
.pcc-text { font-size:.72rem; color:var(--text2); line-height:1.45; }
.pcc-vbc { font-family:var(--mono);font-size:.52rem;color:var(--gold);margin-top:.12rem; }

/* Kaldi Ad Card */
.kaldi-ad {
  border:1px solid rgba(255,196,0,.15);
  background:rgba(255,196,0,.03);
  padding:1rem; margin:.5rem 0;
  position:relative; overflow:hidden;
}
.kaldi-ad::before { content:''; position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent); }
.ka-tag { font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,196,0,.5);margin-bottom:.4rem; }
.ka-content { display:flex; align-items:center; gap:.75rem; }
.ka-logo { font-size:1.6rem; }
.ka-text { flex:1; }
.ka-name { font-family:var(--sans);font-size:.9rem;font-weight:800;color:var(--gold2); }
.ka-sub { font-family:var(--mono);font-size:.6rem;color:var(--text2);line-height:1.5; }
.ka-vbc { font-family:var(--mono);font-size:.58rem;color:var(--gold);margin-top:.3rem; }

/* NERHIA Pulse */
.nerhia-pulse {
  margin:.75rem 1rem;
  background:var(--surface); border:1px solid var(--border); padding:.8rem 1rem;
}
.np-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem; }
.np-title { font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal); }
.np-live { display:flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.55rem;color:var(--green); }
.np-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem; }
.np-item { text-align:center; }
.np-val { font-family:var(--mono);font-size:.85rem;font-weight:500;line-height:1; }
.np-label { font-family:var(--mono);font-size:.46rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:.1rem; }

/* BOTTOM NAV */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:300;
  height:calc(64px + var(--safe-bot));
  padding-bottom:var(--safe-bot);
  background:rgba(6,4,15,.96); backdrop-filter:blur(24px);
  border-top:1px solid var(--border);
  display:flex; align-items:center;
}
.bn-tab {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.2rem; padding:.5rem; cursor:pointer; border:none; background:transparent;
  transition:.15s; color:var(--muted);
}
.bn-tab.active { color:var(--violet2); }
.bn-icon { font-size:1.2rem; line-height:1; }
.bn-label { font-family:var(--mono);font-size:.48rem;letter-spacing:.08em;text-transform:uppercase; }

/* PROFILE PANEL */
.profile-panel {
  position:fixed; top:0; right:-100%; bottom:0; width:min(360px,100vw);
  background:var(--deep); border-left:1px solid var(--border);
  z-index:400; transition:right .35s cubic-bezier(.2,0,.1,1);
  padding-top:var(--safe-top); overflow-y:auto;
}
.profile-panel.open { right:0; }
.pp-header { padding:1rem; border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between; }
.pp-close { font-size:1.4rem;cursor:pointer;color:var(--muted);background:transparent;border:none; }

.pp-hero { padding:1.5rem 1rem; text-align:center; border-bottom:1px solid var(--border); }
.pp-avatar { width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid var(--violet);margin:0 auto .8rem;display:block; }
.pp-avatar-ph { width:80px;height:80px;border-radius:50%;background:var(--surface);border:2px solid var(--violet);margin:0 auto .8rem;display:flex;align-items:center;justify-content:center;font-size:2.5rem; }
.pp-name { font-family:var(--sans);font-size:1.2rem;font-weight:800;color:var(--violet2); }
.pp-badge { display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .6rem;background:rgba(138,87,255,.1);border:1px solid rgba(138,87,255,.3);color:var(--violet2);margin-top:.4rem; }

.pp-stats { display:grid;grid-template-columns:repeat(3,1fr);padding:.8rem 1rem;border-bottom:1px solid var(--border); }
.pp-stat { text-align:center; }
.pps-val { font-family:var(--mono);font-size:1.1rem;font-weight:500;color:var(--text); }
.pps-label { font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); }

.pp-vbc { padding:1rem; border-bottom:1px solid var(--border); }
.pp-vbc-title { font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem; }
.pp-vbc-val { font-family:var(--sans);font-size:2rem;font-weight:900;color:var(--gold2); }
.pp-vbc-sub { font-family:var(--mono);font-size:.58rem;color:var(--muted); }

.btn-logout { width:calc(100% - 2rem);margin:1rem;padding:.85rem;background:rgba(255,71,87,.08);border:1px solid rgba(255,71,87,.25);color:var(--red);font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;cursor:pointer;transition:.18s; }
.btn-logout:hover { background:rgba(255,71,87,.14); }

/* COMPOSE (camera/post) */
.compose-btn {
  position:fixed; bottom:calc(72px + var(--safe-bot)); right:1.2rem; z-index:200;
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  border:none;cursor:pointer;font-size:1.4rem;
  box-shadow:0 4px 20px rgba(138,87,255,.45);
  transition:.18s; display:flex;align-items:center;justify-content:center;
}
.compose-btn:active { transform:scale(.93); }

/* OVERLAY compose */
.compose-overlay {
  position:fixed;inset:0;z-index:500;background:rgba(6,4,15,.95);
  display:none;flex-direction:column;
  padding:var(--safe-top) 0 var(--safe-bot);
}
.compose-overlay.open { display:flex; }
.co-header { display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;border-bottom:1px solid var(--border); }
.co-cancel { font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;color:var(--muted);background:transparent;border:none;cursor:pointer; }
.co-title { font-family:var(--sans);font-size:.9rem;font-weight:800; }
.co-post { font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;padding:.4rem .9rem;background:var(--violet);color:#fff;border:none;cursor:pointer;font-weight:700; }
.co-body { flex:1;display:flex;flex-direction:column;gap:.75rem;padding:1rem;overflow-y:auto; }
.co-textarea { flex:1;background:transparent;border:none;outline:none;font-family:var(--sans);font-size:1rem;color:var(--text);resize:none;min-height:120px;line-height:1.55; }
.co-textarea::placeholder { color:var(--muted); }
.co-edge-ai { background:var(--surface);border:1px solid var(--border);padding:.7rem;display:flex;align-items:center;gap:.6rem; }
.co-ai-label { font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);flex:1; }

/* Toast */
.toast { position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.6rem 1.2rem;font-size:.78rem;color:var(--text);opacity:0;transition:all .3s;pointer-events:none;white-space:nowrap;z-index:600; }
.toast.show { opacity:1;transform:translateX(-50%) translateY(0); }

/* Full loader */
.full-loader { position:fixed;inset:0;z-index:700;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem; }
.full-loader.gone { display:none; }
.fl-brand { font-family:var(--sans);font-size:2rem;font-weight:900;color:var(--violet2); }
.spin { width:28px;height:28px;border-radius:50%;border:2px solid rgba(138,87,255,.15);border-top-color:var(--violet);animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ══ RESPONSIVE ════════════════════════════════════════════ */
@media(min-width:768px) {
  #screen-app { max-width:480px; margin:0 auto; }
  .topnav { max-width:480px; left:50%; transform:translateX(-50%); }
  .bottom-nav { max-width:480px; left:50%; transform:translateX(-50%); }
  .compose-btn { right:calc(50% - 240px + 1.2rem); }
}

/* ══ UX IMPROVEMENTS ══════════════════════════════════════════ */

/* Skeleton loader */
.skeleton-card { border-bottom:1px solid var(--border); padding:.95rem 1rem 1rem; }
.skel-row {
  border-radius:4px; background:var(--surface);
  overflow:hidden; position:relative;
}
.skel-row::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.045) 50%,transparent 100%);
  animation:shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
.skel-header { display:flex; gap:.65rem; align-items:center; margin-bottom:.75rem; }
.skel-avatar { width:38px; height:38px; border-radius:50%; background:var(--s3); flex-shrink:0; }
.skel-lines { flex:1; display:flex; flex-direction:column; gap:6px; }
.skel-line { height:10px; border-radius:4px; }
.skel-line.w80 { width:80%; }
.skel-line.w50 { width:50%; }
.skel-line.w100 { width:100%; }
.skel-line.w70 { width:70%; }
.skel-image { width:100%; aspect-ratio:4/3; border-radius:6px; margin-bottom:.75rem; }

/* NERHIA mini progress bars */
.np-bar-wrap {
  height:3px; background:rgba(255,255,255,.05);
  border-radius:2px; margin-top:.35rem; overflow:hidden;
}
.np-bar {
  height:100%; border-radius:2px;
  transition:width .8s cubic-bezier(.4,0,.2,1); width:0%;
}

/* VBC float animation */
.vbc-float {
  position:fixed; font-family:var(--mono); font-size:.72rem; font-weight:500;
  color:var(--gold); pointer-events:none; z-index:800; white-space:nowrap;
  animation:vbc-rise 1.4s ease forwards;
}
@keyframes vbc-rise {
  0%   { opacity:1; transform:translateY(0) scale(1); }
  20%  { opacity:1; transform:translateY(-6px) scale(1.1); }
  100% { opacity:0; transform:translateY(-28px) scale(.9); }
}

/* New posts pill */
.new-posts-pill {
  display:none; position:fixed; z-index:250;
  top:calc(52px + var(--safe-top) + 10px); left:50%; transform:translateX(-50%);
  align-items:center; gap:.4rem;
  padding:.38rem 1rem; border-radius:99px;
  background:var(--violet); color:#fff;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.06em;
  cursor:pointer; box-shadow:0 4px 18px rgba(138,87,255,.45);
  border:none; white-space:nowrap;
}
.new-posts-pill.visible {
  display:flex;
  animation:pill-drop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pill-drop {
  from { opacity:0; transform:translateX(-50%) translateY(-10px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* Toast variants */
.toast.t-reward {
  border-color:rgba(255,196,0,.35);
  background:rgba(255,196,0,.06);
  color:var(--gold2);
}
.toast.t-success {
  border-color:rgba(0,230,118,.3);
  background:rgba(0,230,118,.05);
}
.toast.t-info {
  border-color:rgba(0,212,255,.3);
  background:rgba(0,212,255,.04);
}

/* Bottom nav active indicator */
.bn-tab { position:relative; }
.bn-tab::after {
  content:''; position:absolute; bottom:8px; left:50%;
  width:18px; height:2px; border-radius:2px;
  background:var(--violet2);
  transform:translateX(-50%) scaleX(0);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.bn-tab.active::after { transform:translateX(-50%) scaleX(1); }

/* Like burst animation */
@keyframes heart-pop {
  0%   { transform:scale(1); }
  35%  { transform:scale(1.55); }
  65%  { transform:scale(.88); }
  100% { transform:scale(1); }
}
.pc-btn.like-anim { animation:heart-pop .35s ease; }

/* Splash staggered entrance */
@keyframes splash-in {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
.splash-appear { opacity:0; }
#screen-splash.active .splash-appear { animation:splash-in .5s ease forwards; }
#screen-splash.active .splash-appear:nth-child(1) { animation-delay:.04s; }
#screen-splash.active .splash-appear:nth-child(2) { animation-delay:.13s; }
#screen-splash.active .splash-appear:nth-child(3) { animation-delay:.22s; }
#screen-splash.active .splash-appear:nth-child(4) { animation-delay:.30s; }
#screen-splash.active .splash-appear:nth-child(5) { animation-delay:.38s; }
#screen-splash.active .splash-appear:nth-child(6) { animation-delay:.46s; }
#screen-splash.active .splash-appear:nth-child(7) { animation-delay:.52s; }

/* Compose char counter */
.co-char-count {
  font-family:var(--mono); font-size:.58rem; color:var(--muted);
  text-align:right; padding:0 .25rem; transition:color .2s;
}
.co-char-count.warn  { color:var(--orange); }
.co-char-count.limit { color:var(--red); }

/* Compose open animation */
.compose-overlay.open { animation:compose-up .22s cubic-bezier(.2,0,.1,1); }
@keyframes compose-up {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:none; }
}

/* Post card hover (desktop) */
@media(hover:hover) { .post-card:hover { background:rgba(255,255,255,.012); } }

/* Dept tab smooth transition */
.dept-tab { transition:color .18s, background .18s, border-color .18s; }

/* ══ ENGAGEMENT ENGINE ════════════════════════════════════════ */

/* Dept left accent border on post cards */
.post-card {
  border-left: 3px solid transparent;
  transition: border-color .3s;
}
.post-card.dept-mobility { border-left-color: rgba(0,212,255,.45); }
.post-card.dept-culture  { border-left-color: rgba(176,136,255,.45); }
.post-card.dept-economy  { border-left-color: rgba(255,196,0,.45); }
.post-card.dept-energy   { border-left-color: rgba(0,230,118,.45); }
.post-card.dept-vitality { border-left-color: rgba(240,98,146,.45); }

/* Protagonist post card — gold */
.post-card.is-protagonist {
  border-left-color: var(--gold);
  background: linear-gradient(135deg, rgba(255,196,0,.05) 0%, transparent 55%);
}

/* Mention glow pulse */
.pc-text .mention {
  color: var(--violet2);
  text-shadow: 0 0 10px rgba(138,87,255,.5);
  animation: mention-glow 2.2s ease-in-out infinite;
}
@keyframes mention-glow {
  0%,100% { text-shadow:0 0 6px rgba(138,87,255,.35); }
  50%      { text-shadow:0 0 18px rgba(138,87,255,.85), 0 0 30px rgba(0,212,255,.3); }
}

/* Typing indicator */
.feed-typing {
  display:flex; align-items:center; gap:.55rem;
  padding:.55rem 1rem; opacity:0; transition:opacity .4s;
  font-family:var(--mono); font-size:.6rem; color:var(--muted);
}
.feed-typing.visible { opacity:1; }
.typing-dots { display:flex; gap:3px; align-items:center; }
.typing-dot {
  width:4px; height:4px; border-radius:50%;
  background:var(--violet2); opacity:.4;
  animation:typing-bounce .9s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay:.18s; }
.typing-dot:nth-child(3) { animation-delay:.36s; }
@keyframes typing-bounce {
  0%,80%,100% { transform:translateY(0); opacity:.4; }
  40%          { transform:translateY(-5px); opacity:1; }
}

/* Notification badge */
.bn-tab { position:relative; }
.bn-badge {
  position:absolute; top:5px; right:calc(50% - 16px);
  min-width:14px; height:14px; border-radius:99px; padding:0 3px;
  background:var(--red); color:#fff;
  font-family:var(--mono); font-size:.45rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--bg); pointer-events:none;
  animation:badge-pop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes badge-pop { from{transform:scale(0)} to{transform:scale(1)} }

/* NERHIA surge banner */
.surge-banner {
  display:none; position:fixed;
  top:calc(52px + var(--safe-top)); left:0; right:0; z-index:290;
  padding:.45rem 1rem; text-align:center;
  background:linear-gradient(90deg, rgba(255,196,0,.1), rgba(138,87,255,.1));
  border-bottom:1px solid rgba(255,196,0,.25);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold2);
  animation:surge-slide .4s ease;
}
.surge-banner.visible { display:block; }
@keyframes surge-slide { from{transform:translateY(-100%)} to{transform:translateY(0)} }

/* VBC milestone burst */
.burst-particle {
  position:fixed; width:7px; height:7px; border-radius:50%;
  pointer-events:none; z-index:900;
  animation:burst-fly .9s ease forwards;
}
@keyframes burst-fly {
  0%   { transform:translate(0,0) scale(1.2); opacity:1; }
  100% { transform:translate(var(--tx),var(--ty)) scale(0); opacity:0; }
}

/* Compose pulse ring */
.compose-btn { position:relative; }
.compose-btn::before {
  content:''; position:absolute; inset:-5px; border-radius:50%;
  border:2px solid rgba(138,87,255,.35);
  animation:compose-ring 2.8s ease-in-out infinite; pointer-events:none;
}
@keyframes compose-ring {
  0%,100% { transform:scale(1); opacity:.55; }
  50%      { transform:scale(1.18); opacity:.1; }
}

/* Dept tab pulse when new post */
@keyframes tab-ping {
  0%   { box-shadow:0 0 0 0 currentColor; }
  70%  { box-shadow:0 0 0 5px transparent; }
  100% { box-shadow:0 0 0 0 transparent; }
}
.dept-tab.pinged { animation:tab-ping .5s ease; }

/* Live agents counter */
.tb-agents-num { transition:color .3s; }

/* ══ NERHIA SPARKLINES ════════════════════════════════════════ */
.np-sparkline { width:100%; height:18px; display:block; margin-top:.3rem; }
.np-trend { font-family:var(--mono); font-size:.42rem; margin-top:.15rem; }
.np-trend.up   { color:var(--green); }
.np-trend.down { color:var(--red); }

/* ══ EXPLORE PANEL (Google Discover style) ═══════════════════ */
.panel-section { display:none; }
.panel-section.active { display:block; }

.ex-search-wrap {
  padding:.75rem 1rem .5rem;
  position:sticky; top:calc(52px + var(--safe-top)); z-index:150;
  background:rgba(6,4,15,.96); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.ex-search {
  width:100%; padding:.7rem 1rem; border-radius:24px;
  background:var(--surface); border:1px solid var(--border);
  color:var(--text); font-family:var(--sans); font-size:.9rem;
  outline:none; transition:border-color .2s;
}
.ex-search::placeholder { color:var(--muted); }
.ex-search:focus { border-color:rgba(138,87,255,.4); }

.ex-body { padding:.75rem 1rem; display:flex; flex-direction:column; gap:1.25rem; }

.ex-section-label {
  font-family:var(--mono); font-size:.56rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.55rem;
}

/* Trending chips */
.ex-trending { display:flex; flex-direction:column; gap:.45rem; }
.ex-trend-item {
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem .75rem; background:var(--surface);
  border:1px solid var(--border); border-radius:10px;
  cursor:pointer; transition:.18s;
}
.ex-trend-item:active { background:var(--s2); }
.ex-trend-rank { font-family:var(--mono); font-size:.58rem; color:var(--muted); width:16px; }
.ex-trend-body { flex:1; }
.ex-trend-tag { font-size:.82rem; font-weight:700; }
.ex-trend-vol { font-family:var(--mono); font-size:.56rem; color:var(--muted); margin-top:.08rem; }
.ex-trend-dept { font-family:var(--mono); font-size:.5rem; letter-spacing:.06em;
  text-transform:uppercase; padding:.15rem .4rem; border-radius:3px; }

/* Agent cards grid */
.ex-agents { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
.ex-agent-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:.75rem; cursor:pointer; transition:.18s;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.35rem;
}
.ex-agent-card:active { background:var(--s2); }
.ex-agent-avatar { font-size:1.6rem; }
.ex-agent-name { font-size:.75rem; font-weight:700; line-height:1.2; }
.ex-agent-persona { font-family:var(--mono); font-size:.5rem; color:var(--muted); }
.ex-agent-stats { display:flex; gap:.5rem; font-family:var(--mono); font-size:.52rem; color:var(--text2); }
.ex-agent-follow {
  width:100%; padding:.3rem; border-radius:6px; border:1px solid var(--border);
  background:transparent; color:var(--violet2); font-family:var(--mono);
  font-size:.55rem; letter-spacing:.06em; cursor:pointer; transition:.18s;
  margin-top:.1rem;
}
.ex-agent-follow:active { background:rgba(138,87,255,.1); }

/* ══ NOTIFICATIONS PANEL ═════════════════════════════════════ */
.notif-panel { padding:.5rem 0; }
.notif-item {
  display:flex; gap:.7rem; padding:.85rem 1rem;
  border-bottom:1px solid var(--border); align-items:flex-start;
  animation:postIn .35s ease both;
}
.notif-icon { font-size:1.1rem; flex-shrink:0; margin-top:.1rem; }
.notif-body { flex:1; }
.notif-text { font-size:.82rem; line-height:1.45; color:var(--text); }
.notif-text strong { color:var(--violet2); }
.notif-time { font-family:var(--mono); font-size:.52rem; color:var(--muted); margin-top:.2rem; }
.notif-vbc { font-family:var(--mono); font-size:.56rem; color:var(--gold); margin-top:.15rem; }
.notif-unread { background:rgba(138,87,255,.04); }

/* ══ RANKING PANEL ═══════════════════════════════════════════ */
.ranking-panel { padding:.5rem 0; }
.rank-item {
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1rem; border-bottom:1px solid var(--border);
}
.rank-pos { font-family:var(--mono); font-size:.75rem; font-weight:500;
  color:var(--muted); width:24px; text-align:center; flex-shrink:0; }
.rank-pos.gold   { color:var(--gold); }
.rank-pos.silver { color:rgba(200,200,220,.7); }
.rank-pos.bronze { color:rgba(200,140,80,.7); }
.rank-avatar { font-size:1.2rem; flex-shrink:0; }
.rank-info { flex:1; }
.rank-name { font-size:.85rem; font-weight:700; }
.rank-dept { font-family:var(--mono); font-size:.52rem; color:var(--muted); }
.rank-vbc { font-family:var(--mono); font-size:.78rem; color:var(--gold); font-weight:500; }

.panel-empty {
  padding:3rem 1rem; text-align:center;
  font-family:var(--mono); font-size:.65rem; color:var(--muted); letter-spacing:.1em;
}