/* Vibes — a single-card carousel (peek left/right, arrows, dot + stats
   footer) instead of a vertical scroll stack. Layout/typography mirrors
   the lovable_codes/ reference prototype; media (video/photo), likes,
   comments, follow, save, share, report/archive/delete are wired to the
   real Backend API underneath it. */

.shell-page-vibes {
  overflow: hidden;
  background: #1a0308;
}

.shell-page-vibes .shell-blobs {
  display: none;
}

.shell-page-vibes .shell-layout {
  width: 100%;
  max-width: none;
  height: calc(100dvh - 64px);
  margin: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.shell-page-vibes .shell-main {
  height: 100%;
  padding: 0;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .shell-page-vibes .shell-layout {
    height: 100dvh;
  }

  .shell-page-vibes .shell-sidebar {
    display: none;
  }
}

.vibes-page {
  --vibe-wine-deep: #1a0308;
  --vibe-wine: #2a0810;
  --vibe-cream: #f4ead9;
  --vibe-cream-60: rgb(244 234 217 / 0.6);
  --vibe-cream-40: rgb(244 234 217 / 0.4);
  --vibe-cream-10: rgb(244 234 217 / 0.1);
  --vibe-pink: #ff3f83;
  --vibe-lime: #beff50;
  --vibe-gold: #e6be5a;
  --vibe-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--vibe-wine-deep);
  color: var(--vibe-cream);
}

/* Default outline-icon look for every svg on this page — anything that
   needs a solid fill (the 3-dot menu, play/pause, the boost bolt, active
   like/save) overrides this further down, closer to its own rule. */
.vibes-page svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Every <button> on this page gets its native chrome stripped first —
   without this, any button whose class doesn't set its own background
   (the peek cards, the rail buttons, follow) keeps the browser's default
   light button face, which showed up as ugly white boxes. */
.vibes-page button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* Ambient glows */
.vibes-glows {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.vibes-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
}

.vibes-glow--pink {
  top: 28%;
  left: 50%;
  width: 46rem;
  height: 46rem;
  transform: translateX(-50%);
  background: rgb(255 63 131 / 0.1);
}

.vibes-glow--lime {
  right: 0;
  bottom: 0;
  width: 26rem;
  height: 26rem;
  background: rgb(190 255 80 / 0.06);
}

.vibes-glow--gold {
  top: 0;
  left: 0;
  width: 26rem;
  height: 26rem;
  background: rgb(230 190 90 / 0.05);
}

/* Top chrome */
.vibes-top-chrome {
  position: relative;
  z-index: 20;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(20rem, 31.5rem) minmax(16rem, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1.3rem 2rem 0;
}

.vibes-brand {
  display: inline-flex;
  width: max-content;
  align-items: center;
  color: #fff4f2;
  line-height: 0.86;
}

.vibes-brand img {
  height: 2.5rem;
  width: auto;
  display: block;
}

.vibes-brand strong {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0;
}

.vibes-brand strong span {
  color: var(--vibe-pink);
}

.vibes-brand small {
  margin-left: 0.12rem;
  color: var(--vibe-cream-60);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.55em;
}

.vibes-back-arena {
  width: max-content;
  justify-self: center;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 1.1rem;
  border-radius: 999px;
  background: rgb(244 234 217 / 0.04);
  box-shadow: inset 0 0 0 1px var(--vibe-cream-10);
  color: var(--vibe-cream-60);
  font-size: 0.85rem;
  font-weight: 650;
  transition: background 0.2s ease, color 0.2s ease;
}

.vibes-back-arena:hover {
  background: rgb(244 234 217 / 0.08);
  color: var(--vibe-cream);
}

.vibes-back-arena svg {
  width: 1.05rem;
  height: 1.05rem;
}

.vibes-top-actions {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 0.65rem;
}

.vibes-share-vibe,
.vibes-top-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 999px;
  font-weight: 700;
  transition: background 0.2s ease;
}

.vibes-share-vibe {
  gap: 0.5rem;
  padding: 0 1.15rem;
  box-shadow: inset 0 0 0 1px rgb(255 63 131 / 0.6);
  color: var(--vibe-pink);
  font-size: 0.9rem;
}

.vibes-share-vibe:hover {
  background: rgb(255 63 131 / 0.1);
}

.vibes-share-vibe svg,
.vibes-top-icon svg {
  width: 1rem;
  height: 1rem;
}

.vibes-share-vibe svg {
  fill: var(--vibe-pink);
  stroke: var(--vibe-pink);
}

.vibes-top-icon {
  position: relative;
  width: 46px;
  color: rgb(244 234 217 / 0.8);
  box-shadow: inset 0 0 0 1px var(--vibe-cream-10);
}

.vibes-top-icon:hover {
  background: rgb(244 234 217 / 0.05);
}

.vibes-top-icon span {
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
  min-width: 1rem;
  height: 1rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--vibe-pink);
  color: var(--vibe-wine-deep);
  font-size: 0.55rem;
  font-weight: 700;
}

/* Profile pill + dropdown — ported verbatim (same tokens/rules) from
   css/feed.css's .arena-profile-* so this looks exactly like the one on
   the Arena (home) page, not a reinterpretation of it. */
.arena-profile-wrap {
  position: relative;
  flex-shrink: 0;
}

/* .vibes-page prefix (not just .arena-profile-btn) is load-bearing: the
   page-wide ".vibes-page button" reset above (border/padding/background
   all zeroed) has higher specificity than a bare single class, so without
   this qualifier it silently wins and strips this button back to an
   invisible shape — this is the actual button element (unlike the
   notify/share links, which are <a> tags the reset never touches). */
.vibes-page .arena-profile-btn {
  min-height: 46px;
  gap: 10px;
  padding: 5px 12px 5px 5px;
  border: 1px solid oklch(0.92 0.04 15 / 0.18);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, oklch(0.96 0.02 20 / 0.13), oklch(0.96 0.02 20 / 0.04));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.16), 0 16px 42px oklch(0 0 0 / 0.22);
  backdrop-filter: blur(18px) saturate(1.35);
  color: var(--rose);
  cursor: pointer;
}

.arena-profile-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.arena-profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bubble);
  color: var(--wine-deep);
  font-weight: 900;
  position: relative;
}

.top-profile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  object-fit: cover;
}

.top-profile-img.shown {
  display: block;
}

.arena-profile-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.arena-profile-copy strong {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}

.arena-profile-copy small {
  color: oklch(0.92 0.04 15 / 0.55);
  font-size: 0.62rem;
}

.arena-profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  /* Vibes' backdrop is already a dark wine tone close to this dropdown's
     own background, so the plain shared values (fine on home's brighter
     spotlight backdrop) read as edgeless/undefined here — a brighter
     border, backdrop blur and stronger shadow give it the same clear
     card silhouette home's version gets for free from its background. */
  background: oklch(0.28 0.11 18 / 0.96);
  border: 1px solid oklch(0.92 0.04 15 / 0.22);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 8px 32px oklch(0 0 0 / 0.6);
  backdrop-filter: blur(18px) saturate(1.35);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* .vibes-page prefix here too — "Log out" is a real <button>, same
   reset-specificity issue as .arena-profile-btn above. "View profile" is
   an <a> (untouched by the button reset) but shares this rule, so the
   extra qualifier is harmless for it. */
.vibes-page .arena-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--rose);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  transition: background 0.13s;
}

.arena-dd-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke-width: 1.75;
}

.vibes-page .arena-dd-item:hover {
  background: oklch(0.92 0.04 15 / 0.08);
}

.vibes-page .arena-dd-logout {
  color: oklch(0.72 0.18 22);
  border-top: 1px solid oklch(0.92 0.04 15 / 0.14);
  margin-top: 2px;
  padding-top: 10px;
}

/* Stage */
.vibes-stage {
  position: relative;
  z-index: 5;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vibes-active-wrap {
  /* fit-content (not a fixed width) so this hugs whatever size/shape
     .vibes-card currently is — portrait for a vertical vibe, wider for a
     landscape one (see .vibes-card.is-landscape below) — and the rail,
     anchored to this box via a negative right offset, always sits flush
     against the card's actual right edge either way. */
  position: relative;
  width: fit-content;
}

.vibes-empty {
  min-height: 20rem;
  width: min(90vw, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: rgb(244 234 217 / 0.72);
  text-align: center;
}

.vibes-empty p {
  margin: 0;
  line-height: 1.3;
}

.vibes-empty-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--vibe-cream);
  margin-bottom: 2px;
}

.vibes-empty a {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--vibe-cream);
  color: var(--vibe-wine-deep);
  font-weight: 800;
}

/* End of the unseen queue — celebratory, not a dead end. */
.vibes-caught-up {
  position: relative;
  isolation: isolate;
  width: min(90vw, 34rem);
  min-height: 31rem;
  padding: clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 99 142 / 0.34);
  border-radius: 2rem;
  color: var(--vibe-cream);
  text-align: center;
  background:
    radial-gradient(circle at 50% 18%, rgb(255 63 131 / 0.3), transparent 12rem),
    radial-gradient(circle at 90% 90%, rgb(190 255 80 / 0.11), transparent 14rem),
    linear-gradient(155deg, #3d0615, #170207 72%);
  box-shadow: 0 2rem 6rem rgb(0 0 0 / 0.48), inset 0 1px 0 rgb(255 255 255 / 0.07);
  transform-origin: 50% 55%;
  animation: caught-card-arrive 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.vibes-caught-up::before {
  content: "✦  NO  RERUNS  ✦  FRESH  VIBES  ONLY  ✦";
  position: absolute;
  left: -3rem;
  right: -3rem;
  bottom: 2.1rem;
  z-index: -1;
  padding: 0.55rem;
  border-block: 1px solid rgb(255 103 145 / 0.22);
  color: rgb(255 178 198 / 0.22);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  transform: rotate(-4deg);
  animation: caught-tape-arrive 0.9s 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.caught-up-orbit {
  position: relative;
  width: 7.5rem;
  height: 7.5rem;
  margin-bottom: 1.4rem;
  display: grid;
  place-items: center;
  border: 1px dashed rgb(255 126 160 / 0.36);
  border-radius: 50%;
  animation:
    caught-orbit-arrive 0.72s 0.12s cubic-bezier(0.16, 1, 0.3, 1) both,
    caught-spin 14s 0.84s linear infinite;
}
.caught-up-orbit::before,
.caught-up-orbit::after {
  content: "";
  position: absolute;
  inset: 0.8rem;
  border: 1px solid rgb(190 255 80 / 0.17);
  border-radius: 50%;
}
.caught-up-orbit::after { inset: 1.65rem; border-color: rgb(255 255 255 / 0.13); }
.caught-up-orbit svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: #ff3f83;
  filter: drop-shadow(0 0 0.9rem rgb(255 63 131 / 0.9));
  animation: caught-counter-spin 14s linear infinite, caught-pulse 1.8s ease-in-out infinite;
}
.caught-up-orbit i {
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #beff50;
  box-shadow: 0 0 1rem rgb(190 255 80 / 0.9);
}
.caught-up-orbit i:nth-child(1) { top: -0.25rem; left: 50%; }
.caught-up-orbit i:nth-child(2) { right: 0.45rem; bottom: 1.1rem; background: #ffcc68; box-shadow: 0 0 1rem rgb(255 204 104 / 0.9); }
.caught-up-orbit i:nth-child(3) { left: 0.25rem; bottom: 1.7rem; background: #ff78a5; box-shadow: 0 0 1rem rgb(255 120 165 / 0.9); }
.caught-up-kicker {
  margin: 0 0 0.75rem;
  color: #beff50;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation: caught-copy-arrive 0.55s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.vibes-caught-up h2 {
  max-width: 11ch;
  color: #fff;
  font-family: var(--font-sans);
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.06em;
  animation: caught-copy-arrive 0.62s 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.vibes-caught-up h2 em { color: #ff5c91; font-family: var(--font-serif); font-weight: 650; }
.caught-up-copy {
  margin: 1.2rem 0 1.4rem;
  color: rgb(244 234 217 / 0.68);
  line-height: 1.5;
  animation: caught-copy-arrive 0.58s 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.caught-up-copy strong { color: #fff; }
.caught-up-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  animation: caught-copy-arrive 0.58s 0.64s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.caught-up-actions a,
.caught-up-actions button {
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.16s ease;
}
.caught-up-actions a { display: inline-flex; align-items: center; gap: 0.55rem; background: #ff3f83; color: #190108; }
.caught-up-actions button { background: rgb(255 255 255 / 0.06); color: rgb(255 235 240 / 0.78); }
.caught-up-actions a:hover,
.caught-up-actions button:hover { transform: translateY(-2px); }
@keyframes caught-spin { to { transform: rotate(360deg); } }
@keyframes caught-counter-spin { to { transform: rotate(-360deg); } }
@keyframes caught-pulse { 50% { scale: 1.18; } }
@keyframes caught-card-arrive {
  0% { opacity: 0; transform: translateY(3.5rem) scale(0.82) rotate(2.5deg); filter: blur(18px); clip-path: inset(45% 8% 45% round 2rem); }
  55% { opacity: 1; transform: translateY(-0.45rem) scale(1.025) rotate(-0.5deg); filter: blur(0); clip-path: inset(0 round 2rem); }
  100% { opacity: 1; transform: none; filter: none; clip-path: inset(0 round 2rem); }
}
@keyframes caught-card-arrive-mobile {
  0% { opacity: 0; transform: translateY(3.5rem) scale(0.86); filter: blur(18px); clip-path: inset(48% 0); }
  55% { opacity: 1; transform: translateY(-0.35rem) scale(1.015); filter: blur(0); clip-path: inset(0); }
  100% { opacity: 1; transform: none; filter: none; clip-path: inset(0); }
}
@keyframes caught-orbit-arrive {
  0% { opacity: 0; transform: scale(0.15) rotate(-150deg); }
  65% { opacity: 1; transform: scale(1.12) rotate(12deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes caught-copy-arrive {
  0% { opacity: 0; transform: translateY(1.35rem); filter: blur(7px); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes caught-tape-arrive {
  0% { opacity: 0; transform: translateX(45%) rotate(-4deg); }
  100% { opacity: 1; transform: translateX(0) rotate(-4deg); }
}

/* Card — width is deliberately small (these caps keep height well under
   the viewport: 34vh wide at 9:16 tops out around 60vh tall) since the
   earlier "62vh" cap was applied to the *width*, which at a 9:16 ratio
   let the card grow to ~110vh tall — that overflow is what was pushing
   the card down through the footer row below it. */
.vibes-card {
  position: relative;
  width: min(30vw, 46vh, 480px);
  aspect-ratio: 9 / 16;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(to bottom, #3a0009, var(--vibe-wine-deep));
  box-shadow: 0 0 80px -10px rgb(255 80 140 / 0.25), inset 0 0 0 1px rgb(255 63 131 / 0.4);
  /* opacity lives here (not just on the .vibes-slide-* compound rules)
     so removing an enter/exit class still animates back to rest instead
     of snapping — a transition only applies while the property it
     covers is present on the element's OWN matched rule at the moment
     of the change. */
  transition: transform 0.22s var(--vibe-ease), opacity 0.22s var(--vibe-ease), width 0.25s var(--vibe-ease);
}

/* A landscape upload gets a wider, shorter frame instead of being
   cropped to fit a portrait box. */
.vibes-card.is-landscape {
  width: min(56vw, 78vh, 760px);
  aspect-ratio: 16 / 9;
}

.vibes-card:hover {
  transform: translateY(-4px) rotate(-0.6deg);
}

/* Directional slide when moving to the next/previous vibe — arrows,
   dots, wheel, touch and keyboard all funnel through the same go(delta),
   so this one pair of enter/exit states covers every navigation path.
   The transition itself lives on the base .vibes-card/.vibes-rail rules
   (so it's still active once these classes are removed again, animating
   back to rest instead of snapping) — these classes only set the
   off-rest starting/ending position. */
.vibes-card.vibes-slide-exit-next { transform: translateX(-32px); opacity: 0; }
.vibes-card.vibes-slide-exit-prev { transform: translateX(32px); opacity: 0; }
.vibes-card.vibes-slide-enter-next { transform: translateX(32px); opacity: 0; }
.vibes-card.vibes-slide-enter-prev { transform: translateX(-32px); opacity: 0; }

/* .vibes-rail is already translateY(-50%)-centered at rest — these need
   to keep that centering and layer the horizontal slide on top of it,
   otherwise the plain translateX here would win the specificity tie
   against the base .vibes-rail rule (same specificity, so whichever is
   later in the file wins) and snap the rail out of vertical center for
   the length of the transition. */
.vibes-rail.vibes-slide-exit-next { transform: translateY(-50%) translateX(-32px); opacity: 0; }
.vibes-rail.vibes-slide-exit-prev { transform: translateY(-50%) translateX(32px); opacity: 0; }
.vibes-rail.vibes-slide-enter-next { transform: translateY(-50%) translateX(32px); opacity: 0; }
.vibes-rail.vibes-slide-enter-prev { transform: translateY(-50%) translateX(-32px); opacity: 0; }

.vibes-card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 30% 20%, rgb(255 63 131 / 0.25), transparent 60%),
    radial-gradient(circle at 70% 80%, rgb(190 255 80 / 0.15), transparent 60%),
    linear-gradient(135deg, #4a0512, #1a0308);
}

.vibes-card-media video,
.vibes-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vibes-media-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgb(244 234 217 / 0.5);
  font-size: 14px;
}

.vibes-card-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(26 3 8 / 0.4) 0%, transparent 30%, transparent 58%, rgb(26 3 8 / 0.92) 100%);
}


.vibes-play-toggle {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.vibes-card:hover .vibes-play-toggle,
.vibes-card.is-paused .vibes-play-toggle {
  opacity: 1;
}

.vibes-play-toggle svg {
  width: 56px;
  height: 56px;
  padding: 16px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.46);
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2.2;
  backdrop-filter: blur(12px);
}

.vibes-play-toggle .icon-pause { display: none; }
.vibes-card.is-paused .icon-play { display: block; }
.vibes-card:not(.is-paused) .icon-play { display: none; }
.vibes-card:not(.is-paused) .icon-pause { display: block; }

.vibes-mute-btn {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgb(26 3 8 / 0.7);
  color: var(--vibe-cream);
}

.vibes-mute-btn svg {
  width: 15px;
  height: 15px;
}

.vibes-mute-btn .icon-volume { display: none; }
.vibes-mute-btn.is-unmuted .icon-volume { display: block; }
.vibes-mute-btn.is-unmuted .icon-muted { display: none; }

.vibes-dbltap-heart {
  position: absolute;
  z-index: 4;
  width: 84px;
  height: 84px;
  margin-left: -42px;
  margin-top: -42px;
  pointer-events: none;
  color: var(--vibe-pink);
  filter: drop-shadow(0 2px 10px rgb(0 0 0 / 0.35));
  animation: vibesDbltapPop 900ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.vibes-dbltap-heart svg { width: 100%; height: 100%; fill: currentColor; }

@keyframes vibesDbltapPop {
  0%   { opacity: 0; transform: scale(0.3); }
  15%  { opacity: 1; transform: scale(1.15); }
  30%  { opacity: 1; transform: scale(0.95); }
  75%  { opacity: 1; transform: scale(1) translateY(-12px); }
  100% { opacity: 0; transform: scale(1) translateY(-46px); }
}

.vibes-card-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 20px;
}

.vibes-creator-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.vibes-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgb(230 190 90 / 0.4);
  box-shadow: inset 0 0 0 1px rgb(244 234 217 / 0.2);
  color: var(--vibe-cream);
  font-weight: 800;
}

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

.vibes-creator-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--vibe-cream);
  font-size: 14px;
  font-weight: 700;
}

.vibes-time {
  flex: 0 0 auto;
  color: rgb(244 234 217 / 0.5);
  font-size: 11px;
  font-weight: 600;
}

.vibes-follow-btn {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  color: var(--vibe-pink);
  box-shadow: inset 0 0 0 1px rgb(255 63 131 / 0.5);
}

.vibes-follow-btn:hover {
  background: rgb(255 63 131 / 0.1);
}

.vibes-follow-btn.is-following {
  color: var(--vibe-cream-60);
  box-shadow: inset 0 0 0 1px var(--vibe-cream-10);
}

.vibes-caption {
  color: var(--vibe-cream);
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 10px;
  word-break: break-word;
}

.vibes-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vibes-tags span {
  font-size: 11px;
  color: rgb(255 63 131 / 0.9);
}

/* Rail */
.vibes-rail {
  position: absolute;
  right: -60px;
  top: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  /* Centered on the card's actual height (not a fixed top offset tuned
     for one size) so it stays aligned as the card gets bigger/smaller or
     switches between portrait and landscape. */
  transform: translateY(-50%);
  transition: transform 0.22s var(--vibe-ease), opacity 0.22s var(--vibe-ease);
}

.vibes-rail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: rgb(244 234 217 / 0.75);
  transition: color 0.2s ease, transform 0.15s ease;
}

.vibes-rail-btn:hover {
  color: var(--vibe-cream);
  transform: translateY(-1px);
}

.vibes-rail-ico {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgb(26 3 8 / 0.8);
  box-shadow: inset 0 0 0 1px var(--vibe-cream-10);
}

.vibes-rail-ico svg {
  width: 17px;
  height: 17px;
}

.vibes-rail-btn.is-active .vibes-rail-ico {
  box-shadow: inset 0 0 0 1px rgb(255 63 131 / 0.6);
  color: var(--vibe-pink);
}

.vibes-rail-btn.is-active .vibes-rail-ico svg {
  fill: var(--vibe-pink);
}

.vibes-rail-btn span:last-child {
  font-size: 10px;
  font-weight: 700;
}

.vibes-rail-btn--boost .vibes-rail-ico {
  color: var(--vibe-lime);
  box-shadow: inset 0 0 0 1px rgb(190 255 80 / 0.6);
}

.vibes-rail-btn--boost .vibes-rail-ico svg {
  fill: var(--vibe-lime);
}

.vibes-rail-btn--boost:hover .vibes-rail-ico {
  background: rgb(190 255 80 / 0.1);
}

.vibes-dot-menu-wrap {
  position: relative;
}

/* Anchored to the boost button, which sits at the bottom of the rail —
   opens upward (bottom, not top) so it doesn't run off the card. */
.vibes-dot-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 20;
  min-width: 148px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--vibe-cream-10), 0 18px 42px rgb(0 0 0 / 0.46);
  background: #24070c;
}

.vibes-dot-menu-item {
  width: 100%;
  min-height: 42px;
  padding: 0 13px;
  border: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  color: var(--vibe-cream);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.vibes-dot-menu-item:hover {
  background: rgb(244 234 217 / 0.08);
}

.vibes-dot-menu-item.danger {
  color: #ff8ea0;
}

.vibes-dot-menu-item svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* Comment panel — anchored to the active card, opened via the rail */
/* A fixed slide-over drawer (not positioned relative to the card) — the
   card sits centered and narrow, so anchoring the panel off its edge
   would either overlap the peek cards or clip against the page's
   overflow:hidden on medium viewports. A drawer from the viewport edge
   sidesteps that entirely. */
.vibes-comment-panel {
  /* top starts below .vibes-top-chrome (not 0) — it used to run the full
     viewport height and sat on top of the nav (share/notifications/
     profile), overlapping it instead of sitting below it. */
  position: fixed;
  top: 5.25rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 35;
  width: min(380px, 100vw);
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 0 0 1px var(--vibe-cream-10), 0 26px 80px rgb(0 0 0 / 0.4);
  background: #1c0509;
  transform: translateX(calc(100% + 1rem));
  transition: transform 0.22s ease;
}

.vibes-active-wrap.comments-open .vibes-comment-panel {
  transform: translateX(0);
}

.vibes-comment-head {
  min-height: 52px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 0 var(--vibe-cream-10);
}

.vibes-comment-head strong {
  font-size: 16px;
}

.vibes-comments-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--vibe-cream);
}

.vibes-comments-close:hover {
  background: rgb(244 234 217 / 0.08);
}

.vibes-comments-close svg {
  width: 18px;
  height: 18px;
}

.vibes-comment-list {
  flex: 1;
  min-height: 200px;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
}

.vibes-comment-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 10px;
  border-radius: 10px;
  background: rgb(244 234 217 / 0.04);
  box-shadow: inset 0 0 0 1px var(--vibe-cream-10);
}

.vibes-comment-avatar {
  width: 30px;
  height: 30px;
}

.vibes-comment-meta {
  min-width: 0;
}

.vibes-comment-author-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
}

.vibes-comment-author {
  color: var(--vibe-cream);
  font-size: 13px;
  font-weight: 700;
}

.vibes-comment-op {
  display: inline-flex;
  align-items: center;
  min-height: 16px;
  padding: 0 6px;
  border-radius: 5px;
  background: rgb(255 90 120 / 0.18);
  color: #ff8ea0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.vibes-comment-body {
  margin-top: 2px;
  color: rgb(244 234 217 / 0.84);
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word;
}

.vibes-comment-actions {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.vibes-comment-time {
  color: rgb(244 234 217 / 0.46);
  font-size: 11px;
}

.vibes-comment-meta .vibes-comment-reply {
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(244 234 217 / 0.5);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.vibes-comment-meta .vibes-comment-reply:hover {
  color: var(--vibe-cream);
}

/* Reply has no icon markup, just text — kept small and consistent with
   .vibes-comment-time. If an icon is ever added here, size it explicitly:
   unstyled inline svg defaults to ~300px and blows up the row. */

.vibes-comment-star {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: rgb(244 234 217 / 0.4);
  cursor: pointer;
}

.vibes-comment-star svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.vibes-comment-star-count {
  font-size: 10px;
  font-weight: 700;
}

.vibes-comment-star:hover {
  color: var(--vibe-cream);
}

.vibes-comment-star.is-active {
  color: var(--vibe-pink);
}

.vibes-comment-star.is-active svg {
  fill: var(--vibe-pink);
  stroke: var(--vibe-pink);
}

/* "..." options trigger — reuses .vibes-dot-menu/.vibes-dot-menu-item
   (already styled for the rail's boost menu) for the dropdown itself. */
.vc-menu-wrap {
  margin-left: auto;
}

.vc-more {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgb(244 234 217 / 0.4);
  cursor: pointer;
}

.vc-more:hover {
  background: rgb(244 234 217 / 0.08);
  color: var(--vibe-cream);
}

.vc-more svg {
  width: 13px;
  height: 13px;
}

.vc-menu-wrap .vibes-dot-menu {
  top: calc(100% + 6px);
  bottom: auto;
}

/* Replies render inside the parent comment's own box, indented under
   grid column 2 (below the author/body/actions, not under the avatar). */
.vibes-comment-replies {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.vibes-comment-replies:empty {
  margin-top: 0;
}

.vibes-comment-reply-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 7px;
  padding: 8px;
  border-radius: 8px;
  background: rgb(244 234 217 / 0.035);
  box-shadow: inset 0 0 0 1px var(--vibe-cream-10);
}

.vibes-comment-reply-item .vibes-comment-avatar {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

.vibes-comment-more-replies {
  grid-column: 2;
  justify-self: start;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(244 234 217 / 0.5);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.vibes-comment-more-replies:hover {
  color: var(--vibe-cream);
}

.vibes-comment-loading,
.vibes-comment-empty {
  color: rgb(244 234 217 / 0.56);
  font-size: 13px;
}

.vibes-comment-footer {
  flex: 0 0 auto;
  box-shadow: 0 -1px 0 var(--vibe-cream-10);
}

.vibes-reply-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  color: rgb(244 234 217 / 0.6);
  font-size: 12px;
  box-shadow: 0 -1px 0 var(--vibe-cream-10);
}

.vibes-reply-indicator strong {
  color: var(--vibe-cream);
  font-weight: 800;
}

.vibes-reply-cancel {
  margin-left: auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgb(244 234 217 / 0.5);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.vibes-reply-cancel:hover {
  background: rgb(255 90 120 / 0.12);
  color: #ff8ea0;
}

.vibes-comment-input-row {
  min-height: 56px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vibes-comment-input {
  min-width: 0;
  flex: 1;
  height: 34px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--vibe-cream);
  font: inherit;
  font-size: 13px;
}

.vibes-comment-input::placeholder {
  color: rgb(244 234 217 / 0.42);
}

.vibes-comment-send {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--vibe-cream);
  color: var(--vibe-wine-deep);
  font-size: 13px;
  font-weight: 800;
}

.vibes-comment-send:disabled {
  opacity: 0.38;
}

/* Peek cards */
.vibes-peek {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 12.5rem;
  aspect-ratio: 9 / 16;
  transform: translateY(-50%);
}

.vibes-peek--left { left: 6%; }
.vibes-peek--right { right: 6%; }

.vibes-peek-card {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  overflow: hidden;
  padding: 12px;
  background: linear-gradient(to bottom, var(--vibe-wine), var(--vibe-wine-deep));
  box-shadow: inset 0 0 0 1px var(--vibe-cream-10);
  opacity: 0.4;
  filter: blur(2px);
  transform: scale(0.95);
  transition: all 0.3s var(--vibe-ease);
}

.vibes-peek--left .vibes-peek-card { transform: scale(0.95) rotate(-4deg); }
.vibes-peek--right .vibes-peek-card { transform: scale(0.95) rotate(4deg); }
.vibes-peek:hover .vibes-peek-card { opacity: 0.6; filter: blur(1px); }

.vpk-tag {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vibe-cream-60);
}

.vpk-quote {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
  margin: 42% 0 0;
  color: rgb(255 63 131 / 0.65);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.vpk-creator {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: rgb(244 234 217 / 0.7);
}

/* Arrows */
.vibes-arrow {
  position: absolute;
  top: 50%;
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgb(26 3 8 / 0.8);
  color: var(--vibe-pink);
  box-shadow: inset 0 0 0 1px rgb(255 63 131 / 0.4);
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  transition: transform 0.2s ease, background 0.2s ease;
}

.vibes-arrow:hover {
  transform: translateY(-50%) scale(1.05);
  background: rgb(255 63 131 / 0.15);
}

.vibes-arrow svg {
  width: 18px;
  height: 18px;
}

.vibes-arrow--left { left: 19%; }
.vibes-arrow--right { right: 19%; }

/* Footer bar */
.vibes-footer-bar {
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
  padding-bottom: 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.vibes-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgb(244 234 217 / 0.7);
  font-size: 11px;
}

.vibes-stat-chip {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--vibe-cream-10);
}

.vibes-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vibes-stat svg {
  width: 13px;
  height: 13px;
}

.vibes-stat.is-liked svg {
  color: var(--vibe-pink);
  fill: var(--vibe-pink);
}

/* Message pill */
.vibes-message-pill {
  position: fixed;
  right: 24px;
  bottom: 18px;
  z-index: 30;
  min-height: 40px;
  padding: 0 12px 0 8px;
  border-radius: 999px;
  display: none;
  align-items: center;
  gap: 8px;
  background: #24070c;
  box-shadow: inset 0 0 0 1px var(--vibe-cream-10), 0 10px 26px rgb(0 0 0 / 0.3);
  color: var(--vibe-cream);
}

@media (min-width: 1024px) {
  .vibes-message-pill {
    display: inline-flex;
  }
}

.vibes-message-icon {
  position: relative;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
}

.vibes-message-icon svg {
  width: 18px;
  height: 18px;
}

.vibes-message-icon span {
  position: absolute;
  right: -6px;
  bottom: -3px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--vibe-pink);
  color: #fff;
  font-size: 8px;
  font-weight: 900;
}

.vibes-message-pill strong {
  font-size: 13px;
}

.vibes-message-faces {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.vibes-message-faces img,
.vibes-message-faces i {
  width: 16px;
  height: 16px;
  margin-left: -5px;
  border: 2px solid #24070c;
  border-radius: 999px;
  background: #f8fafc;
}

.vibes-message-faces img {
  object-fit: cover;
  background: #1f2937;
}

.vibes-message-faces i:nth-child(3) { background: #e5e7eb; }
.vibes-message-faces i:nth-child(4) { background: #6b7280; }

/* Share-to-Yap modal */
.vibe-share-modal[hidden] { display: none; }

.vibe-share-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
}

.vibe-share-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgb(0 0 0 / 0.72);
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.vibe-share-panel {
  position: relative;
  width: min(94vw, 470px);
  max-height: min(86vh, 720px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  background: #111820;
  color: #fff;
}

.vibe-share-head,
.vibe-share-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
}

.vibe-share-head p {
  margin: 0 0 3px;
  color: rgb(255 255 255 / 0.58);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.vibe-share-head h2 {
  margin: 0;
  color: #fff;
  font-size: 22px;
}

.vibe-share-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  color: #fff;
}

.vibe-share-close svg,
.vibe-share-search svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.vibe-share-preview {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  margin: 0 16px 14px;
  padding: 12px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  background: rgb(255 255 255 / 0.055);
}

.vibe-share-thumb {
  min-height: 92px;
  border-radius: 8px;
  background: #202733;
  background-size: cover;
  background-position: center;
}

.vibe-share-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.vibe-share-copy span,
.vibe-share-copy small {
  color: rgb(255 255 255 / 0.6);
  font-size: 13px;
}

.vibe-share-copy strong {
  color: #fff;
  font-size: 16px;
  line-height: 1.25;
}

.vibe-share-search {
  min-height: 42px;
  margin: 0 16px 12px;
  padding: 0 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgb(0 0 0 / 0.26);
  color: rgb(255 255 255 / 0.68);
}

.vibe-share-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: inherit;
}

.vibe-share-search input::placeholder {
  color: rgb(255 255 255 / 0.42);
}

.vibe-share-list {
  overflow-y: auto;
  padding: 0 8px;
  scrollbar-width: thin;
}

.vibe-share-row {
  width: 100%;
  min-height: 58px;
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  color: inherit;
  text-align: left;
}

.vibe-share-row:hover,
.vibe-share-row.is-sending,
.vibe-share-row.is-sent {
  background: rgb(255 255 255 / 0.08);
}

.vibe-share-avatar {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: #202733;
  color: #fff;
  font-weight: 900;
}

.vibe-share-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vibe-share-person {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vibe-share-person strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 15px;
}

.vibe-share-person small {
  color: rgb(255 255 255 / 0.56);
}

.vibe-share-send,
.vibe-share-copy-link {
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #0b0f14;
  font-size: 13px;
  font-weight: 900;
}

.vibe-share-copy-link {
  font: inherit;
}

.vibe-share-empty,
.vibe-share-status {
  padding: 14px 16px;
  color: rgb(255 255 255 / 0.62);
  font-size: 14px;
}

.vibe-share-status {
  min-height: 40px;
  margin: 0;
}

.vibe-share-status[data-kind="ok"] { color: #8ef5cc; }
.vibe-share-status[data-kind="error"] { color: #ff8ea0; }

.vibe-share-verified.gold-tick svg {
  width: 15px;
  height: 15px;
}

/* Responsive */
@media (max-width: 1300px) and (min-width: 901px) {
  .vibes-card { width: min(36vw, 46vh, 420px); }
  .vibes-card.is-landscape { width: min(62vw, 72vh, 640px); }
  .vibes-arrow--left { left: 12%; }
  .vibes-arrow--right { right: 12%; }
  .vibes-peek--left { left: 2%; }
  .vibes-peek--right { right: 2%; }
}

@media (max-width: 900px) {
  .vibes-peek,
  .vibes-arrow {
    display: none;
  }

  .vibes-back-arena {
    display: none;
  }

  .vibes-top-chrome {
    grid-template-columns: 1fr auto;
    padding: 1rem 1.1rem 0;
  }

  .vibes-share-vibe span {
    display: none;
  }

  .vibes-share-vibe {
    width: 2.75rem;
    padding: 0;
  }

  .arena-profile-copy,
  .arena-profile-btn > svg {
    display: none;
  }

  .arena-profile-btn {
    width: 46px;
    padding: 0;
    justify-content: center;
  }

  .vibes-card {
    width: min(58vw, 48vh, 280px);
  }

  .vibes-card.is-landscape {
    width: min(86vw, 48vh, 380px);
  }

  .vibes-rail {
    right: 10px;
    top: auto;
    bottom: 96px;
    transform: none;
    gap: 12px;
  }

  .vibes-rail-ico {
    width: 40px;
    height: 40px;
  }

  .vibes-comment-panel {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100vw;
    max-height: 72dvh;
    border-radius: 12px 12px 0 0;
    transform: translateY(100%);
  }

  .vibes-active-wrap.comments-open .vibes-comment-panel {
    transform: translateY(0);
  }
}

@media (max-width: 560px) {
  .vibes-top-icon,
  .arena-profile-btn {
    width: 2.35rem;
    min-height: 2.35rem;
  }

  .vibes-footer-bar {
    padding-bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vibes-card,
  .vibes-peek-card,
  .vibes-arrow {
    transition: none !important;
    animation: none !important;
  }
  .caught-up-orbit,
  .caught-up-orbit svg,
  .vibes-caught-up,
  .vibes-caught-up::before,
  .caught-up-kicker,
  .vibes-caught-up h2,
  .caught-up-copy,
  .caught-up-actions { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Vibes: immersive tablet and phone player
   -------------------------------------------------------------------------- */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .shell-page-vibes .shell-layout {
    height: calc(100dvh - 3.75rem - env(safe-area-inset-top));
  }
  .vibes-page { background: #120205; }
  .vibes-top-chrome {
    min-height: 3.65rem;
    padding: 0.55rem 0.75rem 0;
    gap: 0.55rem;
  }
  .vibes-brand img { height: 2rem; }
  .vibes-top-actions { gap: 0.45rem; }
  .vibes-share-vibe,
  .vibes-top-icon,
  .vibes-page .arena-profile-btn { width: 2.75rem; min-height: 2.75rem; }

  .vibes-stage { align-items: stretch; padding: 0.45rem 0.55rem 0.25rem; }
  .vibes-active-wrap { width: 100%; height: 100%; }
  .vibes-card,
  .vibes-card.is-landscape {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 1.3rem;
    transform: none;
  }
  .vibes-card:hover { transform: none; }
  .vibes-card-media video,
  .vibes-card-media img { object-fit: contain; background: #090103; }
  .vibes-card-vignette {
    background: linear-gradient(to bottom, rgb(9 1 3 / 0.34), transparent 24%, transparent 52%, rgb(9 1 3 / 0.94) 100%);
  }
  .vibes-card-bottom { right: 3.85rem; padding: 1.15rem; }
  .vibes-caption { max-width: 36rem; font-size: 0.9rem; }
  .vibes-rail {
    right: 0.9rem;
    bottom: 1.35rem;
    top: auto;
    gap: 0.65rem;
  }
  .vibes-rail-ico { width: 2.75rem; height: 2.75rem; background: rgb(12 1 4 / 0.72); backdrop-filter: blur(14px); }
  .vibes-footer-bar { position: absolute; left: 50%; bottom: 0.35rem; width: auto; padding: 0; transform: translateX(-50%); }
  .vibes-stats { padding: 0.3rem 0.55rem; border-radius: 999px; background: rgb(8 1 3 / 0.6); backdrop-filter: blur(10px); }

  .vibes-comment-panel {
    height: min(76dvh, 42rem);
    max-height: none;
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 1.4rem 1.4rem 0 0;
    background: rgb(29 3 10 / 0.98);
    box-shadow: 0 -2rem 5rem rgb(0 0 0 / 0.5);
  }
  .vibes-comment-head { min-height: 4.25rem; padding-inline: 1rem; }
  .vibes-comment-footer { padding-bottom: max(0.8rem, env(safe-area-inset-bottom)); }

  .vibe-share-modal { align-items: end; padding: 0; }
  .vibe-share-panel { width: 100%; max-height: 88dvh; border-radius: 1.4rem 1.4rem 0 0; }
}

.vibes-top-actions .arena-profile-btn {
  width: 2.65rem;
  min-width: 2.65rem;
  max-width: 2.65rem;
  height: 2.65rem;
  padding: 0;
  overflow: hidden;
}
.vibes-top-actions .arena-profile-copy,
.vibes-top-actions .arena-profile-btn > svg { display: none; }

@media (min-width: 1024px) {
  .vibes-top-actions .arena-profile-btn {
    width: auto;
    min-width: 10.5rem;
    max-width: 15rem;
    height: 2.9rem;
    padding: 0.3rem 0.8rem 0.3rem 0.35rem;
    justify-content: flex-start;
    gap: 0.65rem;
    border-radius: 999px;
  }
  .vibes-top-actions .arena-profile-copy {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
  }
  .vibes-top-actions .arena-profile-btn > svg { display: block; margin-left: auto; }
}

@media (max-width: 560px) {
  .vibes-top-chrome { min-height: 3.3rem; padding-inline: 0.55rem; }
  .vibes-stage { padding: 0.25rem 0 0; }
  .vibes-card,
  .vibes-card.is-landscape { border-radius: 1rem 1rem 0 0; }
  .vibes-card-bottom { right: 3.35rem; padding: 0.9rem; }
  .vibes-creator-row { margin-bottom: 0.45rem; }
  .vibes-caption { margin-bottom: 0.45rem; font-size: 0.84rem; line-height: 1.35; }
  .vibes-tags { max-height: 1.4rem; overflow: hidden; }
  .vibes-rail { right: 0.55rem; bottom: 1rem; }
  .vibes-rail-ico { width: 2.6rem; height: 2.6rem; }
  .vibes-mute-btn { top: 0.75rem; right: 0.75rem; bottom: auto; }
}

@media (max-width: 390px) {
  .vibes-top-icon { display: none; }
  .vibes-card-bottom { right: 3.1rem; padding: 0.75rem; }
  .vibes-follow-btn { padding-inline: 0.55rem; }
}

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .shell-page-vibes .shell-layout {
    height: calc(100dvh - 3.75rem - env(safe-area-inset-top) - 5.45rem - env(safe-area-inset-bottom)) !important;
  }
  .shell-page-vibes .shell-main { padding-bottom: 0 !important; }
}

/* --------------------------------------------------------------------------
   Mobile Vibes: feed-style Reels viewer, independent of desktop carousel UI
   -------------------------------------------------------------------------- */
.vibes-mobile-title { display: none; }

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .shell-page-vibes .shell-topbar { display: none !important; }
  .shell-page-vibes .shell-layout {
    height: calc(100dvh - 5.45rem - env(safe-area-inset-bottom)) !important;
  }
  .shell-page-vibes .mobile-bottom-nav { display: grid; }
  .shell-page-vibes .shell-main,
  .vibes-page { width: 100%; height: 100%; }
  .vibes-page { background: #050505; }
  .vibes-glows { display: none; }
  .vibes-caught-up {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation-name: caught-card-arrive-mobile;
  }

  .vibes-top-chrome {
    position: relative;
    inset: auto;
    z-index: 25;
    min-height: calc(3.6rem + env(safe-area-inset-top));
    flex: 0 0 calc(3.6rem + env(safe-area-inset-top));
    padding: calc(0.45rem + env(safe-area-inset-top)) 0.85rem 0.45rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgb(255 255 255 / 0.06);
    background: #050505;
    pointer-events: auto;
  }
  .vibes-top-chrome > * { pointer-events: auto; }
  .vibes-brand { gap: 0.55rem; }
  .vibes-brand img { width: 1.9rem; height: 1.9rem; object-fit: contain; }
  .vibes-mobile-title {
    display: block;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .vibes-back-arena,
  .vibes-share-vibe { display: none !important; }
  .vibes-top-actions { margin-left: auto; gap: 0.45rem; }
  .vibes-top-icon,
  .vibes-page .arena-profile-btn {
    display: grid;
    width: 2.55rem;
    height: 2.55rem;
    min-height: 2.55rem;
    border-color: rgb(255 255 255 / 0.16);
    background: rgb(0 0 0 / 0.38);
    backdrop-filter: blur(12px);
  }

  .vibes-stage { width: 100%; height: auto; min-height: 0; flex: 1 1 auto; padding: 0; }
  .vibes-active-wrap { width: 100%; height: 100%; }
  .vibes-card,
  .vibes-card.is-landscape {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #050505;
  }
  .vibes-card-media video,
  .vibes-card-media img {
    object-fit: cover;
    background: #050505;
  }
  .vibes-card-vignette {
    background:
      linear-gradient(to bottom, rgb(0 0 0 / 0.34), transparent 22%, transparent 52%, rgb(0 0 0 / 0.88) 100%),
      linear-gradient(to right, transparent 68%, rgb(0 0 0 / 0.12));
  }

  .vibes-card-bottom {
    left: 0;
    right: 4.25rem;
    bottom: 0;
    padding: 1rem 0.9rem 1.15rem;
  }
  .vibes-creator-row { gap: 0.55rem; margin-bottom: 0.55rem; }
  .vibes-avatar { width: 2.35rem; height: 2.35rem; }
  .vibes-creator-name { color: #fff; font-size: 0.9rem; }
  .vibes-time { color: rgb(255 255 255 / 0.62); }
  .vibes-follow-btn {
    margin-left: 0.15rem;
    min-height: 1.9rem;
    padding: 0.3rem 0.8rem;
    border-radius: 0.45rem;
    color: #fff;
    background: rgb(255 255 255 / 0.14);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
  }
  .vibes-caption { max-width: 42rem; margin-bottom: 0.45rem; color: #fff; font-size: 0.9rem; line-height: 1.38; }
  .vibes-tags { gap: 0.45rem; max-height: 2.8rem; overflow: hidden; }
  .vibes-tags span { color: rgb(255 255 255 / 0.82); font-size: 0.78rem; font-weight: 650; }

  .vibes-rail {
    position: absolute;
    z-index: 12;
    top: auto;
    right: 0.65rem;
    bottom: 0.7rem;
    width: 3.15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    transform: none;
  }
  .vibes-rail-btn,
  .vibes-dot-menu-wrap {
    width: 3.15rem;
    min-height: 3.8rem;
    flex: 0 0 3.8rem;
  }
  .vibes-rail-btn {
    justify-content: flex-start;
    gap: 0.25rem;
    color: #fff;
    transform: none !important;
  }
  .vibes-rail-ico {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    background: rgb(20 20 20 / 0.68);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 0.35rem 1.2rem rgb(0 0 0 / 0.22);
    backdrop-filter: blur(12px);
  }
  .vibes-rail-ico svg { width: 1.25rem; height: 1.25rem; }
  .vibes-rail-btn > span:last-child,
  .vibes-rail-btn::after {
    min-height: 0.8rem;
    color: rgb(255 255 255 / 0.92);
    font-size: 0.66rem;
    font-weight: 750;
    line-height: 0.8rem;
  }
  .vibes-rail-btn.save-action::after { content: "Save"; }
  .vibes-rail-btn--boost::after { content: "More"; }
  .vibes-dot-menu-wrap { display: flex; align-items: flex-start; justify-content: center; }
  .vibes-dot-menu-wrap .vibes-rail-btn { flex-basis: 3.8rem; }
  .vibes-rail-btn--boost .vibes-rail-ico {
    color: #fff;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 0.35rem 1.2rem rgb(0 0 0 / 0.22);
  }
  .vibes-footer-bar { display: none !important; }
  .vibes-mute-btn {
    top: 0.85rem;
    right: 0.85rem;
    bottom: auto;
    width: 2.5rem;
    height: 2.5rem;
    background: rgb(0 0 0 / 0.45);
    backdrop-filter: blur(12px);
  }

  /* Reel changes travel vertically on phones instead of copying the
     desktop carousel's horizontal card animation. */
  .vibes-card.vibes-slide-exit-next { transform: translateY(-3rem); opacity: 0; }
  .vibes-card.vibes-slide-exit-prev { transform: translateY(3rem); opacity: 0; }
  .vibes-card.vibes-slide-enter-next { transform: translateY(3rem); opacity: 0; }
  .vibes-card.vibes-slide-enter-prev { transform: translateY(-3rem); opacity: 0; }
  .vibes-rail.vibes-slide-exit-next,
  .vibes-rail.vibes-slide-exit-prev,
  .vibes-rail.vibes-slide-enter-next,
  .vibes-rail.vibes-slide-enter-prev { transform: none; opacity: 0; }

  .vibes-comment-panel {
    height: min(78dvh, 44rem);
    max-height: none;
    border-radius: 1.35rem 1.35rem 0 0;
  }
}

@media (max-width: 380px), (max-height: 680px) {
  .vibes-rail { gap: 0.2rem; bottom: 0.35rem; }
  .vibes-rail-btn,
  .vibes-dot-menu-wrap { min-height: 3.45rem; flex-basis: 3.45rem; }
  .vibes-rail-ico { width: 2.45rem; height: 2.45rem; flex-basis: 2.45rem; }
  .vibes-card-bottom { padding-bottom: 0.75rem; }
  .vibes-caption { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* Portrait reels stay uncropped. The black top/bottom breathing room keeps
   header and creator controls readable without cutting into the upload. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .vibes-card:not(.is-landscape) { background: #000; }
  .vibes-card:not(.is-landscape) .vibes-card-media {
    top: 3.35rem;
    bottom: 4.6rem;
    height: auto;
    background: #000;
  }
  .vibes-card:not(.is-landscape) .vibes-card-media video,
  .vibes-card:not(.is-landscape) .vibes-card-media img {
    object-fit: contain;
    background: #000;
  }
}

@media (max-height: 680px) {
  .vibes-card:not(.is-landscape) .vibes-card-media {
    top: 3rem;
    bottom: 4rem;
  }
}

/* Metadata can reclassify a card after playback starts. Mobile framing must
   not depend on that delayed class, so every Reel keeps the black stage. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .vibes-card .vibes-card-media,
  .vibes-card.is-landscape .vibes-card-media {
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
  }
  .vibes-card .vibes-card-media video,
  .vibes-card .vibes-card-media img,
  .vibes-card.is-landscape .vibes-card-media video,
  .vibes-card.is-landscape .vibes-card-media img {
    object-fit: contain;
    background: #000;
  }
  .vibes-card.is-landscape .vibes-card-media video,
  .vibes-card.is-landscape .vibes-card-media img { object-fit: contain; }

  body.vibes-comments-open .vibes-comment-panel {
    bottom: 0;
    height: min(86dvh, 48rem);
    padding-bottom: env(safe-area-inset-bottom);
  }
}