/* ProfileView: premium spacing + hierarchy polish (visual-only)
   Scoped to the profile card so no other views change. */

.vibes-profile-card {
  /* Dark premium glass (reduce outlined-panel feel) */
  background: linear-gradient(180deg, rgba(10, 15, 30, 0.72), rgba(10, 15, 30, 0.52));
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Tighter vertical spacing to reduce empty top/bottom space */
  padding-top: 10px;
  padding-bottom: 10px;
}

@media (min-width: 640px) {
  .vibes-profile-card {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* Soften the top highlight so it reads as glass, not a framed panel */
.vibes-profile-card > .absolute.top-0.left-0 {
  opacity: 0.75;
}

/* Avatar/name/status block */
.vibes-profile-header {
  /* bring the card content slightly closer to the sheet header */
  margin-bottom: 20px;
}

.vibes-profile-avatar-wrap {
  margin-bottom: 16px;
}

.vibes-profile-meta {
  margin-top: 10px;
}

/* Energy aura behind avatar (subtle, cinematic, slow breathe) */
.vibes-profile-avatar-wrap {
  position: relative;
}

.vibes-profile-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 168px;
  height: 168px;
  transform: translate(-50%, -52%);
  border-radius: 9999px;
  background:
    radial-gradient(circle at 50% 45%, rgba(99, 102, 241, 0.22), rgba(59, 130, 246, 0.12) 34%, rgba(59, 130, 246, 0) 68%),
    radial-gradient(circle at 35% 35%, rgba(147, 197, 253, 0.08), rgba(147, 197, 253, 0) 58%);
  filter: blur(18px);
  opacity: 0.55;
  pointer-events: none;
  animation: vibes-profile-aura-breathe 9.5s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes vibes-profile-aura-breathe {
  0%,
  100% {
    transform: translate(-50%, -52%) scale(0.96);
    opacity: 0.42;
  }
  50% {
    transform: translate(-50%, -52%) scale(1.06);
    opacity: 0.62;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vibes-profile-aura {
    animation: none !important;
  }
}

/* Live presence avatar ring (ONLINE only): layered ring + soft pulse */
.vibes-profile-avatar-btn {
  position: relative;
}

.vibes-profile-avatar-btn.is-online {
  border-color: rgba(99, 102, 241, 0.38) !important;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(99, 102, 241, 0.18) inset,
    0 0 22px rgba(99, 102, 241, 0.16);
}

.vibes-profile-avatar-btn.is-online::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 9999px;
  background: radial-gradient(circle at 50% 45%, rgba(99, 102, 241, 0.22), rgba(59, 130, 246, 0) 62%);
  filter: blur(10px);
  opacity: 0.55;
  pointer-events: none;
}

.vibes-profile-avatar-btn.is-online::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 9999px;
  border: 1px solid rgba(99, 102, 241, 0.22);
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.12),
    0 0 26px rgba(99, 102, 241, 0.14);
  opacity: 0.35;
  transform: scale(0.98);
  animation: vibes-profile-online-pulse 2.9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes vibes-profile-online-pulse {
  0%,
  100% {
    transform: scale(0.98);
    opacity: 0.22;
  }
  50% {
    transform: scale(1.04);
    opacity: 0.42;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vibes-profile-avatar-btn.is-online::after {
    animation: none !important;
  }
}

/* Self profile micro label */
.vibes-profile-self-label {
  margin-top: -4px;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
}

/* Info cards: less cramped + less "frame inside frame" */
.vibes-profile-info-grid {
  margin-bottom: 22px;
}

.vibes-profile-info-card {
  height: 5.15rem;
  border-color: rgba(255, 255, 255, 0.055);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.012));
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.vibes-profile-info-card:hover {
  border-color: rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.014));
}

.vibes-profile-info-card .vibes-profile-info-label {
  margin-bottom: 4px;
}

.vibes-profile-info-card .vibes-profile-info-sub {
  margin-top: 4px;
}

/* Recent Stories: cleaner, more intentional row */
.vibes-profile-stories .scrollbar-hide {
  padding-bottom: 6px;
}

/* Reduce the gap after the header divider (sheet) by tightening the outer wrapper spacing
   without changing structure/typography. */
.vibes-profile-card {
  margin-top: -6px;
}

.vibes-profile-story-thumb {
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.vibes-profile-story-thumb:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

/* Social: slightly more elegant + integrated */
.vibes-profile-social > div.rounded-3xl {
  border-color: rgba(255, 255, 255, 0.065);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.012));
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.vibes-profile-social button {
  padding-top: 14px;
  padding-bottom: 14px;
}

.vibes-profile-social button + button {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Bio: cleaner quote feel */
.vibes-profile-bio {
  margin-bottom: 14px;
}

.vibes-profile-bio p {
  letter-spacing: 0.02em;
}

/* Lower section (own profile): make it feel integrated, not a dark box-in-box */
.vibes-profile-bottom-actions {
  /* Softer fade so it blends into the card instead of reading as a hard block */
  background: linear-gradient(
    to top,
    rgba(10, 15, 30, 0.72),
    rgba(10, 15, 30, 0.38),
    rgba(10, 15, 30, 0)
  );

  /* Reduce dead space above/below the action buttons */
  margin-top: 6px;
  padding-bottom: 0px;
}

/* Own-profile action buttons: slightly tighter vertical rhythm */
.vibes-profile-bottom-actions > div {
  gap: 10px;
}

/* Activity Center: still premium, slightly less dominant + less neon */
.vibes-profile-activity-btn {
  /* Slightly less dominant than before (still primary) */
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.74), rgba(37, 99, 235, 0.64));
  border: 1px solid rgba(147, 197, 253, 0.14);
  color: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 8px 22px rgba(37, 99, 235, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.vibes-profile-activity-btn:hover {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.78), rgba(37, 99, 235, 0.68));
  box-shadow:
    0 10px 26px rgba(37, 99, 235, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Open Settings: more elegant + integrated (glass, not a separate panel) */
.vibes-profile-settings-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.028));
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.78);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.vibes-profile-settings-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.032));
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
}

.vibes-profile-settings-btn svg {
  color: rgba(255, 255, 255, 0.5);
}

.vibes-profile-settings-btn:hover svg {
  color: rgba(255, 255, 255, 0.7);
}

/* Premium bottom CTA (self profile) */
.vibes-profile-cta {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.72), rgba(37, 99, 235, 0.62));
  border: 1px solid rgba(147, 197, 253, 0.16);
  color: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 14px 34px rgba(37, 99, 235, 0.16),
    0 0 26px rgba(99, 102, 241, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.vibes-profile-cta:hover {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.78), rgba(37, 99, 235, 0.66));
  box-shadow:
    0 16px 40px rgba(37, 99, 235, 0.2),
    0 0 30px rgba(99, 102, 241, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.vibes-profile-cta:active {
  transform: scale(0.985);
}