/* ══════════════════════════════════════════════════════════════
   vibra-live.css — VibraLive: Real-time social layer
   Estilo para presencia real, posts en vivo, y live bar
══════════════════════════════════════════════════════════════ */

/* ── Live bar (aparece bajo el topnav) ─────────────────────── */
.vl-live-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 1rem;
  background: rgba(6,4,15,.95);
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: .52rem;
  color: rgba(240,235,255,.35);
  letter-spacing: .07em;
  transition: color .4s, border-color .4s;
  position: sticky;
  top: 52px;
  z-index: 50;
  backdrop-filter: blur(10px);
}

.vl-live-bar.vl-active {
  color: rgba(240,235,255,.75);
  border-bottom-color: rgba(0,230,118,.25);
}

.vl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(138,87,255,.4);
  flex-shrink: 0;
  transition: background .4s;
}

.vl-live-bar.vl-active .vl-dot {
  background: #00e676;
  box-shadow: 0 0 6px #00e67688;
  animation: vlDotPulse 1.8s ease-in-out infinite;
}

@keyframes vlDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .6; transform: scale(.75); }
}

.vl-live-users {
  font-weight: 500;
  color: #00e676;
  transition: color .3s;
}

.vl-live-bar:not(.vl-active) .vl-live-users {
  color: rgba(240,235,255,.35);
}

.vl-live-sep {
  opacity: .3;
  margin: 0 .15rem;
}

.vl-live-city {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vl-live-ping {
  font-size: .45rem;
  color: rgba(0,212,255,.5);
  animation: vlFadeIn .6s ease;
}

@keyframes vlFadeIn {
  from { opacity: 0; transform: translateX(4px); }
  to   { opacity: 1; transform: none; }
}

/* ── Real post card ─────────────────────────────────────────── */
.vl-real-post {
  border-left: 2px solid rgba(255,71,87,.55) !important;
  background: linear-gradient(
    135deg,
    rgba(255,71,87,.05) 0%,
    rgba(138,87,255,.03) 50%,
    transparent 80%
  ) !important;
  position: relative;
  opacity: 0;
  transform: translateY(-10px) scale(.98);
  transition: opacity .4s cubic-bezier(.2,0,.1,1), transform .4s cubic-bezier(.2,0,.1,1);
}

.vl-real-post.vl-post-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── REAL badge ─────────────────────────────────────────────── */
.vl-real-badge {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-family: var(--mono, monospace);
  font-size: .46rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #ff4757;
  background: rgba(255,71,87,.12);
  border: 1px solid rgba(255,71,87,.35);
  border-radius: 4px;
  padding: .08rem .3rem;
}

.vl-real-badge::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff4757;
  animation: vlBadgePulse 1.2s ease-in-out infinite;
}

@keyframes vlBadgePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}

/* ── NERHIA stamp on real posts ─────────────────────────────── */
.vl-nerhia-stamp {
  font-family: var(--mono, monospace);
  font-size: .48rem;
  color: rgba(138,87,255,.5);
  letter-spacing: .07em;
  padding: .2rem .75rem .3rem;
  border-top: 1px solid rgba(138,87,255,.08);
  display: flex;
  align-items: center;
  gap: .4rem;
}

.vl-nerhia-stamp::before {
  content: '●';
  color: #b088ff;
  font-size: .45rem;
  animation: vlDotPulse 2s ease-in-out infinite;
}

/* ── Live join toast (user joins city) ─────────────────────── */
.vl-join-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0,230,118,.12);
  border: 1px solid rgba(0,230,118,.3);
  border-radius: 20px;
  padding: .4rem .9rem;
  font-family: var(--mono, monospace);
  font-size: .52rem;
  color: #00e676;
  letter-spacing: .06em;
  white-space: nowrap;
  opacity: 0;
  transition: all .35s cubic-bezier(.2,0,.1,1);
  pointer-events: none;
  z-index: 500;
}

.vl-join-toast.vl-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Presence avatar strip ──────────────────────────────────── */
.vl-presence-strip {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .4rem 1rem;
  background: rgba(6,4,15,.85);
  border-bottom: 1px solid rgba(255,255,255,.04);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.vl-presence-strip::-webkit-scrollbar { display: none; }

.vl-presence-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(138,87,255,.2);
  border: 1.5px solid rgba(138,87,255,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  flex-shrink: 0;
  overflow: hidden;
  transition: border-color .3s;
}

.vl-presence-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vl-presence-label {
  font-family: var(--mono, monospace);
  font-size: .48rem;
  color: rgba(240,235,255,.4);
  letter-spacing: .05em;
  white-space: nowrap;
  margin-left: auto;
}