/* margin-top clears the fixed notify/profile bar floating in the
   top-right corner (see .shell-topright-bar in appshell.css) instead of
   overlapping the banner's rounded corner. */
.profile-banner-wrap { position: relative; margin-top: 2rem; margin-bottom: 5rem; }
.banner-slot {
  position: relative; aspect-ratio: 16 / 3; border-radius: 1.5rem; overflow: hidden;
  background: oklch(0.92 0.04 15 / 0.1); box-shadow: inset 0 0 0 1px oklch(0.92 0.04 15 / 0.15);
  cursor: pointer;
}
.avatar-slot-wrap {
  position: absolute; bottom: -3rem; left: 1.5rem;
  width: 6rem; height: 6rem; border-radius: 9999px;
  box-shadow: 0 0 0 4px var(--wine);
  overflow: hidden;
}
@media (min-width: 640px) { .avatar-slot-wrap { width: 7rem; height: 7rem; } }
.avatar-slot { position: relative; width: 100%; height: 100%; cursor: pointer; border-radius: 9999px; overflow: hidden; background: oklch(0.27 0.1 18); }
.avatar-slot:hover .upload-placeholder-btn { opacity: 1; }
.profile-initials-circle {
  position: absolute; inset: 0; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 2rem; color: var(--rose);
  user-select: none;
}

.upload-placeholder-btn {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.375rem; color: oklch(0.92 0.04 15 / 0.6); background: none; border: none; width: 100%; font-family: inherit;
  transition: color 0.15s ease;
}
.upload-placeholder-btn:hover { color: var(--rose-hot); }
.upload-placeholder-btn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.upload-placeholder-btn span { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.15em; }
.upload-slot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.upload-slot-img.shown { display: block; }
.upload-slot input[type="file"] { display: none; }

.profile-identity { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.profile-identity h2 { font-size: 1.875rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.profile-identity .gold-tick { font-size: 1.25rem; }
.profile-handle { font-size: 0.875rem; color: oklch(0.92 0.04 15 / 0.6); }
.profile-bio {
  margin-top: 0.5rem;
  max-width: 55ch;
  color: oklch(0.92 0.04 15 / 0.8);
  font-size: 0.875rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.profile-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.profile-pills .building { padding: 0.25rem 0.625rem; border-radius: 9999px; background: oklch(0.55 0.22 22 / 0.2); color: var(--rose-hot); font-size: 0.6875rem; }
.profile-pills .collab { padding: 0.25rem 0.625rem; border-radius: 9999px; background: oklch(0.86 0.07 15 / 0.4); color: var(--wine-deep); font-size: 0.6875rem; }
.profile-counts { display: flex; gap: 1rem; margin-top: 1rem; font-size: 0.875rem; }
.profile-counts strong { color: var(--rose); font-weight: 600; }
.profile-counts span.dim { color: oklch(0.92 0.04 15 / 0.6); }
.count-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  color: inherit; font: inherit; display: flex; align-items: center; gap: 0.3rem;
  transition: opacity 0.15s;
}
.count-btn:hover { opacity: 0.75; }

/* ── Followers / Following modal ────────────────────────────── */
.fl-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: oklch(0 0 0 / 0.6); backdrop-filter: blur(4px);
  animation: fade-in 0.15s ease;
}
.fl-modal {
  position: fixed; inset: 0; z-index: 81;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
@media (min-width: 480px) { .fl-modal { align-items: center; } }
.fl-modal-inner {
  pointer-events: all;
  background: oklch(0.2 0.08 18);
  border: 1px solid oklch(0.92 0.04 15 / 0.12);
  border-radius: 1.25rem 1.25rem 0 0;
  width: 100%; max-width: 420px;
  max-height: 80vh; display: flex; flex-direction: column;
  animation: sheet-up 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
@media (min-width: 480px) {
  .fl-modal-inner { border-radius: 1.25rem; max-height: 70vh; }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }

.fl-header {
  display: flex; align-items: center; justify-content: center;
  position: relative; padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid oklch(0.92 0.04 15 / 0.1);
  flex-shrink: 0;
}
.fl-header h3 { font-family: var(--font-serif); font-size: 1rem; font-weight: 500; margin: 0; }
.fl-close {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 0.375rem;
  color: oklch(0.92 0.04 15 / 0.5); line-height: 0; border-radius: 9999px;
  transition: color 0.15s, background 0.15s;
}
.fl-close:hover { color: var(--rose); background: oklch(0.92 0.04 15 / 0.08); }
.fl-close svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; }

.fl-list {
  list-style: none; margin: 0; padding: 0.5rem 0;
  overflow-y: auto; flex: 1;
}
.fl-list li.fl-loading {
  text-align: center; padding: 2rem; color: oklch(0.92 0.04 15 / 0.4);
  font-family: var(--font-mono); font-size: 0.8125rem;
}
.fl-list li.fl-empty {
  text-align: center; padding: 2.5rem 1rem; color: oklch(0.92 0.04 15 / 0.4);
  font-family: var(--font-mono); font-size: 0.8125rem;
}
.fl-user {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 1rem; text-decoration: none; color: inherit;
  transition: background 0.12s;
}
.fl-user:hover { background: oklch(0.92 0.04 15 / 0.05); }
.fl-av {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px; flex-shrink: 0;
  background: oklch(0.27 0.1 18);
  border: 1.5px solid oklch(0.92 0.04 15 / 0.15);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.fl-av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fl-av-letter { font-family: var(--font-serif); font-size: 1rem; color: var(--rose); }
.fl-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fl-name { font-size: 0.875rem; font-weight: 600; color: var(--rose); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-handle { font-size: 0.75rem; color: oklch(0.92 0.04 15 / 0.5); font-family: var(--font-mono); }

.fl-item { display: flex; align-items: center; }
.fl-item .fl-user { flex: 1; }
.fl-actions { display: flex; gap: 0.375rem; padding-right: 1rem; flex-shrink: 0; }

.fl-btn {
  padding: 0.35rem 0.75rem; border-radius: 0.5rem; font-size: 0.75rem;
  font-weight: 600; font-family: var(--font-sans); cursor: pointer;
  border: none; transition: opacity 0.15s, background 0.15s;
  white-space: nowrap;
}
.fl-btn:disabled { opacity: 0.5; cursor: default; }
.fl-btn-primary { background: var(--rose-hot); color: #fff; }
.fl-btn-primary:hover:not(:disabled) { opacity: 0.85; }
.fl-btn-ghost {
  background: oklch(0.92 0.04 15 / 0.1);
  color: var(--rose);
  border: 1px solid oklch(0.92 0.04 15 / 0.2);
}
.fl-btn-ghost:hover:not(:disabled) { background: oklch(0.92 0.04 15 / 0.18); }
.fl-btn-remove {
  background: none; color: oklch(0.92 0.04 15 / 0.5);
  border: 1px solid oklch(0.92 0.04 15 / 0.15);
}
.fl-btn-remove:hover:not(:disabled) { color: var(--rose); border-color: oklch(0.92 0.04 15 / 0.35); }
.profile-actions { display: flex; gap: 0.625rem; flex-wrap: wrap; }
.edit-profile-btn {
  background: oklch(0.92 0.04 15 / 0.1); color: var(--rose); border: none; cursor: pointer;
  padding: 0.5rem 1.25rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500;
  transition: background 0.15s ease; text-decoration: none; display: inline-block;
}
.edit-profile-btn:hover { background: oklch(0.92 0.04 15 / 0.2); }
.follow-btn {
  padding: 0.5rem 1.5rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600;
  cursor: pointer; border: none; transition: background 0.15s, color 0.15s, opacity 0.15s;
  background: var(--rose); color: var(--wine-deep);
}
.follow-btn:hover { opacity: 0.88; }
.follow-btn.following {
  background: oklch(0.92 0.04 15 / 0.1); color: var(--rose);
  border: 1px solid oklch(0.92 0.04 15 / 0.25);
}
.follow-btn.following:hover { background: oklch(0.6 0.22 22 / 0.15); color: oklch(0.75 0.2 22); border-color: oklch(0.6 0.22 22 / 0.4); }
.follow-btn:disabled { opacity: 0.5; cursor: default; }
.follow-btn.requested {
  background: oklch(0.92 0.04 15 / 0.08); color: oklch(0.92 0.04 15 / 0.55);
  border: 1px solid oklch(0.92 0.04 15 / 0.2);
}
.yap-dm-btn {
  padding: 0.5rem 1.25rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600;
  cursor: pointer; border: 1px solid oklch(0.55 0.22 22 / 0.45);
  background: oklch(0.55 0.22 22 / 0.12); color: var(--rose-hot);
  text-decoration: none; display: inline-block; transition: background 0.15s, border-color 0.15s;
}
.yap-dm-btn:hover { background: oklch(0.55 0.22 22 / 0.22); border-color: oklch(0.55 0.22 22 / 0.7); }

.stack-section { margin-bottom: 2.5rem; }
.stack-section .label { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.15em; color: oklch(0.92 0.04 15 / 0.5); margin-bottom: 0.625rem; }
.stack-pills { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.stack-pills span { padding: 0.25rem 0.625rem; border-radius: 9999px; background: oklch(0.86 0.07 15 / 0.18); color: var(--rose); font-size: 0.8125rem; border: 1px solid oklch(0.92 0.04 15 / 0.1); }
.stack-empty { font-size: 0.8125rem; color: oklch(0.92 0.04 15 / 0.4); }
.stack-empty a { color: var(--rose); }

.profile-tabs { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid oklch(0.92 0.04 15 / 0.15); overflow-x-auto; }
.profile-tabs button {
  background: none; border: none; cursor: pointer; padding-bottom: 0.75rem; font-size: 0.875rem; font-weight: 500;
  white-space: nowrap; color: oklch(0.92 0.04 15 / 0.5); border-bottom: 2px solid transparent;
  transition: color 0.15s ease;
}
.profile-tabs button:hover { color: var(--rose); }
.profile-tabs button.active { color: var(--rose); border-bottom-color: var(--rose); }

.profile-vibes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
  align-items: start;
}

/* ── Vibe card (matches /feed exactly) ───────────────────────── */
.vibe-card {
  display: flex; flex-direction: column;
  border-radius: 1rem; overflow: visible;
  background: oklch(0.19 0.07 18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.vibe-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px oklch(0 0 0 / 0.45); }
.vibe-card-link {
  display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
  border-radius: 1rem; overflow: hidden; flex: 1;
}
/* 3-dot button on vibe card */
.vibe-dots-btn {
  position: absolute; top: 0.5rem; right: 0.5rem;
  width: 1.75rem; height: 1.75rem;
  border: none; border-radius: 50%; cursor: pointer;
  background: oklch(0 0 0 / 0.55); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; z-index: 10;
  opacity: 0; transition: opacity 0.15s;
}
.vibe-card:hover .vibe-dots-btn { opacity: 1; }
.vibe-dots-btn svg { width: 0.9rem; height: 0.9rem; fill: currentColor; stroke: none; }
.vibe-dots-menu {
  position: absolute; top: 2.5rem; right: 0.5rem; z-index: 50;
  background: oklch(0.2 0.08 18);
  border: 1px solid oklch(0.92 0.04 15 / 0.12);
  border-radius: 0.75rem; overflow: hidden;
  box-shadow: 0 8px 32px oklch(0 0 0 / 0.5); min-width: 9rem;
}
.vibe-dots-item {
  display: flex; align-items: center; gap: 0.625rem;
  width: 100%; padding: 0.625rem 0.875rem; border: none; background: none;
  color: oklch(0.92 0.04 15 / 0.85); font-size: 0.8125rem; cursor: pointer;
  transition: background 0.1s;
}
.vibe-dots-item:hover { background: oklch(0.92 0.04 15 / 0.08); }
.vibe-dots-item svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.75; flex-shrink: 0; }
.vibe-dots-item.danger { color: oklch(0.65 0.22 22); }
.vibe-dots-item.danger:hover { background: oklch(0.55 0.22 22 / 0.12); }
.vibe-thumb-wrap { position: relative; }
.vibe-thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; transition: transform 0.3s ease; background: #111; }
.vibe-card:hover .vibe-thumb { transform: scale(1.04); }
.vibe-thumb-empty {
  width: 100%; aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.15 0.07 18 / 0.55);
  color: oklch(0.92 0.04 15 / 0.45);
  font-family: var(--font-mono); font-size: 0.75rem;
}
.vibe-thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, oklch(0 0 0 / 0.6) 0%, transparent 45%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0.625rem; opacity: 0; transition: opacity 0.2s ease;
}
.vibe-card:hover .vibe-thumb-overlay { opacity: 1; }
.vibe-overlay-title {
  font-size: 0.75rem; font-weight: 700; color: #fff; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 4px oklch(0 0 0 / 0.5);
}
.vibe-badge {
  position: absolute; top: 0.5rem; left: 0.5rem;
  padding: 0.2rem 0.45rem; background: oklch(0.96 0.02 20 / 0.88); backdrop-filter: blur(6px);
  border-radius: 0.25rem; font-size: 0.55rem; font-weight: 600; color: var(--wine-deep);
}
.vibe-creator {
  position: absolute; bottom: 0.5rem; left: 0.5rem;
  display: flex; align-items: center; gap: 0.375rem;
  padding: 0.2rem 0.45rem; background: oklch(0.96 0.02 20 / 0.88); backdrop-filter: blur(6px);
  border-radius: 9999px; font-size: 0.55rem; color: var(--wine-deep);
}
.vibe-creator img { width: 0.875rem; height: 0.875rem; border-radius: 9999px; object-fit: cover; }
.vibe-meta {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.375rem; padding: 0.4rem 0.5rem 0.5rem;
}
.vibe-meta h3 { font-size: 0.75rem; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vibe-stats { display: flex; gap: 0.25rem; flex-shrink: 0; font-size: 0.6rem; color: oklch(0.92 0.04 15 / 0.55); }
.vibe-stats span { display: inline-flex; align-items: center; gap: 0.2rem; }
.vibe-stats svg { width: 0.625rem; height: 0.625rem; fill: none; stroke: currentColor; stroke-width: 2; }

/* ── Reveal animation ────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: none; }
.reveal.in-view { animation: reveal-in 0.6s cubic-bezier(0.22,0.61,0.36,1) both; }
@keyframes reveal-in { to { opacity: 1; transform: translateY(0); } }

.tab-empty { grid-column: 1 / -1; padding: 2.5rem 0; text-align: center; color: oklch(0.92 0.04 15 / 0.5); font-family: var(--font-mono); font-size: 0.875rem; }
.profile-thread-list {
  display: flex; flex-direction: column; gap: 0;
}
.profile-thread-list .thread-card {
  border-radius: 0;
  border-left: none; border-right: none;
}
.profile-thread-list .thread-card:first-child { border-top: none; }
.profile-thread-list .tab-empty {
  padding: 5rem 1rem; text-align: center;
  color: oklch(0.92 0.04 15 / 0.45); font-family: var(--font-mono); font-size: 0.875rem;
}

.tab-soon {
  display: flex; flex-direction: column; align-items: center; gap: 0.625rem;
  padding: 5rem 1rem; text-align: center;
  color: oklch(0.92 0.04 15 / 0.45); font-family: var(--font-mono); font-size: 0.875rem;
}
.tab-soon svg { width: 2.5rem; height: 2.5rem; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0.35; }
.tab-soon p { font-size: 1rem; font-family: var(--font-serif); color: var(--rose); margin: 0; }
.tab-soon span { font-size: 0.75rem; }

/* ── Image lightbox ─────────────────────────────────────────── */
.lb-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: oklch(0 0 0 / 0.88); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  animation: fade-in 0.15s ease;
  cursor: zoom-out;
}
.lb-img {
  max-width: min(90vw, 800px); max-height: 90vh;
  object-fit: contain; border-radius: 0.75rem;
  box-shadow: 0 24px 80px oklch(0 0 0 / 0.6);
  animation: lb-pop 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes lb-pop { from { transform: scale(0.88); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lb-close {
  position: fixed; top: 1.25rem; right: 1.25rem;
  background: oklch(0.92 0.04 15 / 0.12); border: none; cursor: pointer;
  padding: 0.5rem; border-radius: 9999px; line-height: 0;
  color: oklch(0.92 0.04 15 / 0.8); transition: background 0.15s, color 0.15s;
}
.lb-close:hover { background: oklch(0.92 0.04 15 / 0.22); color: #fff; }
.lb-close svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; }

/* Make avatar and banner visually clickable on any profile */
#avatar-slot img, #banner-slot img { cursor: pointer; }

.private-gate {
  display: flex; flex-direction: column; align-items: center; gap: 0.625rem;
  padding: 4rem 1rem; text-align: center;
  border-top: 1px solid oklch(0.92 0.04 15 / 0.1);
}
.private-gate svg { width: 2.5rem; height: 2.5rem; fill: none; stroke: oklch(0.92 0.04 15 / 0.3); stroke-width: 1.5; margin-bottom: 0.25rem; }
.private-gate-title { font-size: 1rem; font-weight: 600; color: var(--rose); }
.private-gate-sub { font-size: 0.875rem; color: oklch(0.92 0.04 15 / 0.5); }