/* Social: TikTok-style Flicks + Instagram-style Feed */

/* A class selector setting display: X on an element with the hidden
   attribute silently beats the browser's own [hidden]{display:none} UA
   rule - hit repeatedly across this file (live-stage, memory preview,
   profile avatar menu, ...) as one-off patches. One rule here, high in
   the cascade so later component rules can't out-specificity it, closes
   the whole bug class instead of chasing each new instance. */
[hidden] {
  display: none !important;
}

.page-social * {
  scrollbar-width: none;
}

.page-social *::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.page-social {
  padding-bottom: 0;
  overflow: hidden;
  height: 100dvh;
}

.page-social .bottom-nav {
  background: var(--bg);
}

.social-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Above .app-panel (65) and .desktop-sidebar (60) - the Notifications
     popout hangs down from this bar into panel content below it, and
     needs to stay on top of that panel rather than sit behind it. Below
     .live-stage (100) and .sheet (110), which both still need to cover
     this bar entirely when open. */
  z-index: 70;
  padding: 0.55rem 0.75rem 0.4rem;
  background: var(--bg);
  pointer-events: none;
}

.social-top > * {
  pointer-events: auto;
}

.social-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.social-back {
  color: var(--cream);
  text-decoration: none;
  font-size: 0.9rem;
  min-height: var(--touch);
  display: inline-flex;
  align-items: center;
  padding: 0 0.35rem;
}

.social-product {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 1rem;
  color: var(--cream);
}

.comfort-toggle--compact {
  padding: 0.25rem 0.55rem;
  min-height: calc(var(--touch) - 4px);
  font-size: 0.8rem;
}

.layout-tabs {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.layout-tab {
  min-height: calc(var(--touch) - 8px);
  min-width: 5.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong, var(--line));
  background: var(--panel-raised, rgba(17, 23, 38, 0.75));
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--motion) var(--ease, ease), background var(--motion) var(--ease, ease), color var(--motion) var(--ease, ease), box-shadow var(--motion) var(--ease, ease);
}

.layout-tab.is-active {
  color: var(--bg);
  background: linear-gradient(160deg, var(--gold) 0%, var(--gold-deep, #d3b578) 100%);
  border-color: transparent;
  box-shadow: 0 1px 0 #ffffff59 inset, 0 8px 20px -12px #e7c98a66;
}

.layout-tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.layout-tab:active {
  transform: scale(0.95);
  transition-duration: 0.1s;
}

.placeholder-banner {
  margin: 0.55rem auto 0;
  max-width: 34rem;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--cream-dim);
  background: rgba(17, 23, 38, 0.72);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.45rem 0.65rem;
}

.social-root {
  height: 100dvh;
  padding-top: 0;
}

/* ----- Flicks (TikTok-style) ----- */

.flicks {
  height: 100dvh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.flicks::-webkit-scrollbar {
  display: none;
}

html.comfort-mode .flicks {
  scroll-snap-type: y proximity;
}

.flick-card {
  position: relative;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--cream);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.flick-visual {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(231, 201, 138, 0.22), transparent 42%),
    radial-gradient(circle at 70% 70%, rgba(243, 234, 216, 0.08), transparent 45%),
    linear-gradient(160deg, #0d1322, #151c2e 45%, #0b0f1a);
}

.flick-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 15, 26, 0.92) 8%, rgba(11, 15, 26, 0.2) 45%, rgba(11, 15, 26, 0.35) 100%);
}

.flick-visual .math-glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(3rem, 14vw, 5.5rem);
  letter-spacing: 0.06em;
  color: rgba(243, 234, 216, 0.22);
  z-index: 1;
  pointer-events: none;
}

.flick-body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  padding: 1rem 0.85rem calc(var(--touch) + 1.4rem);
  align-items: end;
}

.flick-meta {
  min-width: 0;
}

.flick-user {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--bg);
  background: var(--gold);
  flex-shrink: 0;
}

.avatar-btn {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  display: block;
  border-radius: 50%;
  transition: transform var(--motion) var(--ease, ease);
}

.avatar-btn:active {
  transform: scale(0.92);
  transition-duration: 0.1s;
}

html.comfort-mode .avatar {
  width: 48px;
  height: 48px;
}

.flick-user strong {
  font-size: 0.95rem;
}

.flick-user span {
  display: block;
  color: var(--cream-dim);
  font-size: 0.78rem;
  font-weight: 400;
}

.flick-caption {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.4;
  max-width: 28rem;
}

.flick-timed {
  margin: 0.5rem 0 0;
  max-width: 28rem;
  cursor: pointer;
}

.flick-timed-text {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold);
  line-height: 1.4;
  min-height: 1.4em;
}

.flick-timed.is-paused .flick-timed-text::after {
  content: " ⏸";
  opacity: 0.6;
}

.flick-timed-bar {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
  overflow: hidden;
}

.flick-timed-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 999px;
  transition: width var(--motion, 220ms) var(--ease, ease);
}

.flick-tag {
  display: inline-block;
  margin-top: 0.45rem;
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 600;
}

.flick-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: center;
}

.rail-follow-bubble {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  position: relative;
  width: 42px;
  height: 42px;
  margin-top: 0.15rem;
  cursor: pointer;
}

.rail-follow-bubble .avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--cream);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--bg);
  background: var(--gold);
}

.rail-follow-plus {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--bg);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg);
}

.rail-follow-bubble:active {
  transform: scale(0.92);
  transition: transform 0.1s var(--ease, ease);
}

.action-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--cream);
  min-width: var(--touch);
  min-height: var(--touch);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  padding: 0;
}

.action-btn .icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
  transition: transform var(--motion) var(--ease, ease), color var(--motion) var(--ease, ease);
}

html.comfort-mode .action-btn .icon {
  width: 50px;
  height: 50px;
  font-size: 1.25rem;
}

.action-btn.is-liked .icon {
  color: #ff6b8a;
}

.action-btn.is-liked .icon svg,
.action-btn.is-saved .icon svg {
  fill: currentColor;
}

.action-btn.is-saved .icon {
  color: var(--gold);
}

.action-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 12px;
}

.action-btn .count {
  color: var(--cream-dim);
}

.scroll-hint {
  position: absolute;
  top: 42%;
  right: 0.65rem;
  z-index: 3;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(243, 234, 216, 0.45);
  pointer-events: none;
}

html.comfort-mode .scroll-hint {
  display: none;
}

/* ----- Instagram-style feed ----- */

.ig-feed {
  height: 100dvh;
  overflow-y: auto;
  padding: 7.5rem 0 calc(var(--touch) + 1.25rem);
  overscroll-behavior-y: contain;
}

.ig-post {
  width: min(100%, 30rem);
  margin: 0 auto 1.1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.9rem;
}

.friends-feed {
  margin-bottom: 1rem;
}

.ig-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
}

.ig-head strong {
  font-size: 0.95rem;
}

.ig-media {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0;
  background:
    radial-gradient(circle at 40% 30%, rgba(231, 201, 138, 0.2), transparent 50%),
    linear-gradient(145deg, #12182a, #0b0f1a 70%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.ig-media .math-glyph {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 12vw, 4rem);
  color: rgba(243, 234, 216, 0.28);
  letter-spacing: 0.06em;
  pointer-events: none;
}

.ig-actions-row {
  display: flex;
  gap: 0.25rem;
  padding: 0.35rem 0.45rem;
}

.ig-actions-row .action-btn {
  flex-direction: row;
  gap: 0.35rem;
  min-width: auto;
  padding: 0 0.35rem;
  font-size: 0.85rem;
}

.ig-actions-row .action-btn .icon {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
}

.ig-caption {
  padding: 0 0.9rem;
  margin: 0;
  font-size: 0.94rem;
  color: var(--cream-dim);
}

.ig-caption strong {
  color: var(--cream);
  margin-right: 0.35rem;
}

.ig-tag {
  display: block;
  margin-top: 0.25rem;
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Double-tap heart burst */
.heart-burst {
  position: fixed;
  z-index: 50;
  font-size: 5rem;
  color: #ff6b8a;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

.heart-burst.is-pop {
  animation: heart-pop 0.7s ease forwards;
}

html.comfort-mode .heart-burst.is-pop {
  animation: none;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.4s ease;
}

@keyframes heart-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .heart-burst.is-pop {
    animation: none;
    opacity: 1;
  }
}

/* Audience: For You / Following / Saved */
.audience-tabs {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}

.audience-tab {
  min-height: calc(var(--touch) - 12px);
  padding: 0.25rem 0.75rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

.audience-tab.is-active {
  color: var(--cream);
  border-bottom-color: var(--gold);
}

.audience-tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.follow-chip {
  margin-left: auto;
  min-height: 36px;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(231, 201, 138, 0.45);
  background: transparent;
  color: var(--gold);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

.follow-chip.is-following {
  background: rgba(231, 201, 138, 0.15);
  color: var(--cream);
}

.flick-user {
  flex-wrap: wrap;
}

.ig-head {
  justify-content: flex-start;
}

.ig-head-text {
  flex: 1;
  min-width: 0;
}

.view-comments {
  display: block;
  margin: 0.35rem 0.9rem 0;
  padding: 0.45rem 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  min-height: var(--touch);
}

.view-comments:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Static/normal-flow by design - a fixed-position centered overlay kept
   getting reused inside ordinary containers (search results, memory list,
   panels offset by the desktop sidebar) and each one needed its own
   override to look right. Centering via margin auto instead means it just
   sits correctly whatever it's placed inside, full-page or not. */
.empty-state {
  text-align: center;
  color: var(--cream-dim);
  background: rgba(17, 23, 38, 0.92);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.25rem;
  max-width: 24rem;
  margin: 2rem auto;
}

body.sheet-open {
  overflow: hidden;
}

.sheet {
  position: fixed;
  inset: 0;
  /* Must clear .app-panel (65) and .live-stage (100) - a sheet (Report,
     Comments, ...) can open on top of either, and originally did when
     this was 40 vs .app-panel's old z-index:5. Raising .app-panel for
     the Live stage fix broke that ordering; this restores it. */
  z-index: 110;
}

.sheet[hidden] {
  display: none !important;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.sheet-panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  bottom: 0;
  max-height: min(82dvh, 720px);
  display: flex;
  flex-direction: column;
  background: rgba(20, 26, 44, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--line);
  padding: 0.35rem 0.85rem calc(0.85rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.sheet-panel--short {
  max-height: min(60dvh, 480px);
}

/* Menu sheet is full-page on phone/tablet - a drawer felt cramped for a
   list this long, so it covers the screen with just a small X to close. */
@media (max-width: 999px) {
  #profileMenu-sheet .sheet-panel {
    top: 0;
    max-height: none;
    height: 100%;
    border-radius: 0;
    border-top: none;
    padding-top: env(safe-area-inset-top);
  }

  #profileMenu-sheet .sheet-handle {
    display: none;
  }

  #profileMenu-sheet .sheet-head {
    padding: 0.85rem 0.15rem 0.5rem;
  }

  #profileMenu-sheet .sheet-close {
    width: 30px;
    height: 30px;
    min-height: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    font-size: 1.1rem;
    line-height: 1;
  }
}

.sheet-handle {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0.35rem auto 0.45rem;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--touch);
}

.sheet-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--cream);
}

.sheet-close {
  min-height: var(--touch);
  padding: 0 0.65rem;
  border: 0;
  background: transparent;
  color: var(--gold);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.sheet-copy {
  margin: 0.35rem 0 0.85rem;
  color: var(--cream-dim);
  font-size: 0.95rem;
  line-height: 1.4;
}

.sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.sheet-status {
  min-height: 1.25rem;
  margin: 0.65rem 0 0;
  color: var(--gold);
  font-size: 0.88rem;
}

.comments-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.35rem 0 0.75rem;
  -webkit-overflow-scrolling: touch;
}

.comment {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  padding: 0.55rem 0.15rem;
}

.comment.reply {
  margin-top: 0.45rem;
  padding-left: 0.25rem;
}

.comment-body p,
.comment p {
  margin: 0.2rem 0 0;
  color: var(--cream-dim);
  line-height: 1.4;
}

.avatar.tiny {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
}

.reply-btn {
  margin-top: 0.35rem;
  border: 0;
  background: transparent;
  color: var(--gold);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
  padding: 0.2rem 0;
}

.replies {
  margin-top: 0.35rem;
  border-left: 1px solid var(--line);
  padding-left: 0.55rem;
}

.empty-comments {
  color: var(--muted);
  text-align: center;
  padding: 1rem 0.5rem;
}

.comment-compose {
  border-top: 1px solid var(--line);
  padding-top: 0.65rem;
}

.comment-compose textarea {
  width: 100%;
  resize: vertical;
  min-height: 3.2rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(17, 23, 38, 0.9);
  color: var(--cream);
  font: inherit;
  padding: 0.7rem 0.8rem;
}

.comment-compose textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.compose-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.55rem;
}

.compose-hint {
  margin: 0;
  margin-right: auto;
  color: var(--muted);
  font-size: 0.82rem;
}

.btn-small {
  min-height: calc(var(--touch) - 6px);
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
}

.collection-picks {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.35rem;
}

.create-quick-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 34rem;
  margin: 0 auto 0.9rem;
}

.create-chooser {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  max-width: 34rem;
  margin: 0 auto 1rem;
}

.create-choice {
  appearance: none;
  border: 1px solid rgba(231, 201, 138, 0.22);
  background: rgba(255, 255, 255, 0.03);
  color: var(--cream);
  border-radius: 14px;
  padding: 0.75rem 0.45rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  cursor: pointer;
  font: inherit;
  min-height: 5.5rem;
}

.create-choice small {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
}

.create-choice strong {
  font-size: 0.9rem;
  font-weight: 700;
}

.create-choice-glyph {
  color: var(--gold);
  display: grid;
  place-items: center;
}

.create-choice.is-active {
  border-color: rgba(231, 201, 138, 0.55);
  background: rgba(231, 201, 138, 0.1);
}

.create-advanced {
  margin-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 0.65rem;
}

.create-advanced summary {
  cursor: pointer;
  color: var(--cream-dim);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.profile-link {
  appearance: none;
  border: none;
  background: none;
  padding: 0.2rem 0.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--cream-dim);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.profile-link:hover,
.profile-link:focus-visible {
  color: var(--cream);
}

.profile-link-icon {
  display: inline-flex;
  color: var(--gold);
}

.profile-link-sep {
  color: var(--line);
  font-size: 0.75rem;
}

.profile-link-inline {
  appearance: none;
  border: none;
  background: none;
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.4rem 0;
  color: var(--gold);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
}

.collection-pick {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--touch);
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(17, 23, 38, 0.9);
  color: var(--cream);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.collection-pick.is-on {
  border-color: rgba(231, 201, 138, 0.55);
  background: rgba(231, 201, 138, 0.1);
}

.collection-pick span:last-child {
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 600;
}

.saved-library {
  overflow-y: auto;
  flex: 1;
  padding-bottom: 0.5rem;
}

.saved-group {
  margin-bottom: 1rem;
}

.saved-group h3 {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--cream);
}

.saved-item {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 0.45rem;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(17, 23, 38, 0.85);
  color: var(--cream-dim);
  font: inherit;
  cursor: pointer;
  min-height: var(--touch);
}

.saved-item strong {
  display: block;
  color: var(--cream);
  margin-bottom: 0.2rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

html.comfort-mode .sheet-panel {
  max-height: min(88dvh, 780px);
}

/* Create button - centred in the bottom nav, TikTok-style raised gradient pill */
.nav-item--create {
  position: relative;
  top: -0.4rem;
  width: 3rem;
  min-width: 3rem;
  height: 2.15rem;
  border-radius: 9px;
  border: none;
  background: linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) 50%, var(--cream) 100%);
  color: var(--bg);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5);
  transition: transform var(--motion) var(--ease, ease);
}

.nav-item--create::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 6px;
  background: var(--cream);
}

.nav-item--create svg {
  position: relative;
  z-index: 1;
  color: #14161a;
}

.nav-item--create:active {
  transform: scale(0.9);
  transition-duration: 0.1s;
}

.nav-item--create:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

html.comfort-mode .nav-item--create {
  width: 3.4rem;
  height: 2.4rem;
}

.create-form .field-label {
  display: block;
  margin: 0.7rem 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A form used to just be one continuous stack of label+input pairs -
   every field read as equally important, nothing marked where one idea
   (what you're posting) ends and another (optional extras) begins.
   Same fix as the Live rail's Interact/Teach boxes: group related
   fields into their own bordered "place" with its own small heading,
   instead of one flat undifferentiated list. */
.field-group {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(17, 23, 38, 0.5);
  padding: 0.3rem 1.1rem 1.2rem;
  margin: 1.3rem 0;
}

.settings-row-text {
  font-size: 0.9rem;
  color: var(--cream);
  margin: 0.3rem 0 0.85rem;
}

.field-group-label {
  display: block;
  margin: 0.95rem 0 0.2rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
}

.field-group > .field-label:first-of-type {
  margin-top: 0.85rem;
}

.field-group + .field-group {
  margin-top: 1.3rem;
}

.contribute-problem-locked {
  text-align: center;
  padding: 2rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(17, 23, 38, 0.5);
  margin: 0.9rem 0;
}
.contribute-problem-locked-glyph {
  font-size: 1.8rem;
  margin: 0 0 0.5rem;
}
.contribute-problem-locked-title {
  font-weight: 700;
  color: var(--cream);
  margin: 0 0 0.4rem;
}
.contribute-problem-locked-sub {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.create-form textarea,
.create-form input[type="text"] {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(17, 23, 38, 0.9);
  color: var(--cream);
  font: inherit;
  padding: 0.7rem 0.8rem;
}

.create-form textarea {
  min-height: 4.5rem;
  resize: vertical;
}

.create-form input[type="file"] {
  width: 100%;
  color: var(--cream-dim);
  font: inherit;
  margin-top: 0.2rem;
}

.create-form textarea:focus,
.create-form input[type="text"]:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.create-preview-wrap {
  margin-top: 0.55rem;
}

.create-preview {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
}

.you-chip {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold);
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(231, 201, 138, 0.4);
}

.post-menu-btn {
  appearance: none;
  border: none;
  background: none;
  color: var(--cream-dim);
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.post-menu-btn:hover,
.post-menu-btn:active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--cream);
}

.flick-visual.has-photo,
.ig-media.has-photo {
  background: #0a0e18;
}

.post-photo,
.post-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  background: #000;
}

.flick-visual.has-photo .math-glyph--on-photo,
.ig-media.has-photo .math-glyph--on-photo {
  position: relative;
  z-index: 1;
  color: rgba(243, 234, 216, 0.55);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
  font-size: clamp(2rem, 10vw, 3.2rem);
}

.ig-media {
  position: relative;
  overflow: hidden;
}

.ig-media .post-photo {
  position: absolute;
}

.ig-media .math-glyph {
  position: relative;
  z-index: 1;
}

.post-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.post-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.post-carousel-track::-webkit-scrollbar {
  display: none;
}

.post-carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  height: 100%;
}

.post-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-carousel-count {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  background: rgba(10, 14, 24, 0.62);
  color: var(--paper, #f3ead8);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

.post-carousel-dots {
  position: absolute;
  bottom: 0.55rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 0.3rem;
}

.post-carousel-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(243, 234, 216, 0.45);
}

.post-carousel-dot.is-active {
  background: var(--gold, #e7c98a);
}

.create-thumb-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.create-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.create-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.create-thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  line-height: 16px;
  border-radius: 50%;
  border: none;
  background: rgba(10, 14, 24, 0.75);
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
}

.create-thumb-count {
  align-self: center;
  font-size: 0.75rem;
  color: var(--muted, #9c9484);
}

.page-social .compose-hint {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.82rem;
}

/* ---- App panels: Frontiers ? Friends ? Inbox ---- */

.page-social .bottom-nav .nav-item {
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 3rem;
  padding: 0.35rem 0.4rem;
}

.bottom-nav--icons .nav-icon {
  display: grid;
  place-items: center;
  color: var(--muted);
  line-height: 0;
}

.bottom-nav--icons .nav-item.is-active .nav-icon {
  color: var(--gold);
}

.bottom-nav--icons .nav-icon svg {
  display: block;
}

.bottom-nav--icons .nav-icon--live {
  color: #c07070;
}

.bottom-nav--icons .nav-item.is-active .nav-icon--live {
  color: #e85a5a;
}

html.comfort-mode .bottom-nav--icons .nav-icon svg {
  width: 26px;
  height: 26px;
}

/* Profile tab: show the user's own avatar, TikTok-style, not a generic icon */
.nav-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--bg);
  font-size: 0.65rem;
  font-weight: 700;
  border: 1.5px solid var(--muted);
}

.nav-item--profile.is-active .nav-avatar {
  border-color: var(--gold);
}

html.comfort-mode .nav-avatar {
  width: 26px;
  height: 26px;
  font-size: 0.72rem;
}

#inbox-badge,
#desktop-inbox-badge {
  display: none !important;
}

.nav-badge {
  position: absolute;
  top: 0.15rem;
  right: 0.35rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--bg);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
}

.app-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  /* A position:fixed element with a z-index creates its own stacking
     context - anything nested inside .app-panel (like .live-stage,
     z-index:100) is trapped inside THIS number, not the page's global
     stacking order. Needs to clear .desktop-sidebar's z-index:60 or
     Live's full-bleed content (the who's-here toggle, other-rooms rail)
     renders invisibly behind the sidebar on desktop - .app-panel sits
     beside the sidebar everywhere else, so this is safe there too. */
  z-index: 65;
  overflow-y: auto;
  padding: 7.5rem 1rem 5.5rem;
  background: var(--bg);
}

.panel-intro {
  max-width: 34rem;
  margin: 0 auto 1.25rem;
}

.panel-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.panel-intro h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  color: var(--cream);
}

.panel-intro p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.frontiers-list,
.people-list,
.inbox-list {
  max-width: 34rem;
  margin: 0 auto;
  display: grid;
  gap: 0.85rem;
}

.frontier-card,
.person-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(17, 23, 38, 0.88);
  padding: 1rem 1.05rem;
}

.frontier-glyph {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--gold);
  margin-bottom: 0.35rem;
}

.frontier-status {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
}

.frontier-card h3 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--cream);
}

.frontier-hook,
.frontier-by {
  margin: 0 0 0.55rem;
  color: var(--muted);
  line-height: 1.4;
  font-size: 0.92rem;
}

.frontier-open {
  width: 100%;
}

.frontier-body {
  padding: 0 0.25rem 1rem;
}

.frontier-body h3 {
  margin: 1rem 0 0.35rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--gold);
}

.frontier-body p {
  margin: 0;
  color: var(--cream);
  line-height: 1.5;
}

.frontier-calm {
  border-left: 3px solid var(--gold);
  padding-left: 0.75rem;
}

.friend-add-form {
  max-width: 34rem;
  margin: 0 auto 1.25rem;
}

/* ---- Creator tools: tabs + two-column layout ---- */

.creator-recap {
  max-width: 40rem;
  margin: 0 auto 1.25rem;
  padding: 1.1rem 1.25rem;
  border-radius: 16px;
  background: var(--panel-raised, rgba(17, 23, 38, 0.6));
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.creator-recap-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.creator-recap p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--cream);
}

.creator-recap small {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.creator-tab-pill {
  background: var(--gold);
  color: var(--bg);
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.05rem 0.4rem;
  line-height: 1.4;
}

.creator-note {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 0.75rem;
}

.creator-note:last-child {
  margin-bottom: 0;
}

.creator-tabs {
  display: flex;
  gap: 0.25rem;
  max-width: 40rem;
  margin: 0 auto 1.25rem;
  padding: 0.25rem;
  border-radius: 12px;
  background: var(--panel-raised, rgba(17, 23, 38, 0.6));
  width: fit-content;
}

.creator-tab {
  appearance: none;
  border: none;
  background: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 9px;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--motion) var(--ease, ease), color var(--motion) var(--ease, ease);
}

.creator-tab.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--cream);
}

.creator-tab:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

.creator-cols {
  max-width: 60rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 0 0.5rem;
}

.creator-card {
  background: var(--panel-raised, rgba(17, 23, 38, 0.6));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.6rem;
  max-width: none;
  margin: 0;
}

.creator-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.creator-pane .empty-state,
.creator-side .empty-state {
  position: static;
  transform: none;
  left: auto;
  right: auto;
  max-width: none;
  background: none;
  border: 1px dashed var(--line);
  padding: 1.5rem 0.5rem;
}

@media (max-width: 760px) {
  .creator-cols {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
  .creator-card {
    padding: 1.2rem 1.1rem;
  }
}

.friend-add-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.friend-add-icon-btn {
  appearance: none;
  border: none;
  flex: none;
  width: var(--touch);
  border-radius: 10px;
  background: linear-gradient(160deg, var(--gold) 0%, var(--gold-deep, #d3b578) 100%);
  color: var(--bg);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 1px 0 #ffffff59 inset;
  transition: transform var(--motion) var(--ease, ease);
}

.friend-add-icon-btn:active {
  transform: scale(0.92);
  transition-duration: 0.1s;
}

.friend-add-row input {
  flex: 1;
  min-height: var(--touch);
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(11, 15, 26, 0.9);
  color: var(--cream);
  padding: 0.5rem 0.75rem;
  font: inherit;
}

.person-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem 0.75rem;
  align-items: center;
}

.person-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(232, 200, 106, 0.15);
  border: 1px solid var(--line);
  color: var(--gold);
  font-weight: 600;
  font-size: 0.8rem;
}

.person-meta {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.person-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

/* ---- Profile page: TikTok-style showcase, Bean branding, SVG icons only ---- */

.profile-page {
  padding-bottom: 1rem;
}

.profile-head {
  max-width: 26rem;
  margin: 0.5rem auto 0;
  text-align: center;
}

.profile-avatar-quick-wrap {
  position: relative;
  display: inline-block;
}

.profile-avatar-quick-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  min-width: 10rem;
  background: rgba(20, 26, 44, 0.96);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.profile-avatar-quick-menu[hidden] {
  display: none !important;
}

.profile-avatar-quick-menu button {
  appearance: none;
  border: none;
  background: none;
  text-align: left;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  color: var(--cream);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.profile-avatar-quick-menu button:hover {
  background: rgba(255, 255, 255, 0.06);
}

.profile-sort-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.5rem;
}

.profile-sort-select {
  background: var(--panel-raised, rgba(17, 23, 38, 0.6));
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--cream);
  font: inherit;
  font-size: 0.78rem;
  padding: 0.3rem 0.5rem;
}

.profile-empty-hint {
  margin: 0.75rem 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
}

.profile-avatar-wrap {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  position: relative;
}

.profile-avatar-edit {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--bg);
  display: grid;
  place-items: center;
  border: 2px solid var(--bg);
}

/* Live-now ring: pulsing gradient around the avatar while broadcasting */
body.is-live-now .profile-avatar-wrap::before,
body.is-live-now .nav-item--profile .nav-avatar {
  content: "";
}

body.is-live-now .profile-avatar-wrap::before {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--gold-deep), var(--gold), var(--cream), var(--gold-deep));
  z-index: -1;
  animation: bean-live-ring-spin 2.6s linear infinite;
}

body.is-live-now .nav-item--profile .nav-avatar {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #ff5b7a;
  animation: bean-live-ring-pulse 1.6s ease-in-out infinite;
}

@keyframes bean-live-ring-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes bean-live-ring-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #ff5b7a;
  }
  50% {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #ff8ba3;
  }
}

html.comfort-mode body.is-live-now .profile-avatar-wrap::before,
html.comfort-mode body.is-live-now .nav-item--profile .nav-avatar {
  animation: none;
}

.profile-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto;
  background: linear-gradient(160deg, var(--gold) 0%, var(--gold-deep, #d3b578) 100%);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  box-shadow: 0 1px 0 #ffffff59 inset, 0 10px 24px -10px #e7c98a66;
}

.profile-name {
  margin: 0.65rem 0 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--cream);
}

.profile-handle {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.profile-stats {
  display: flex;
  justify-content: center;
  gap: 1.75rem;
  margin: 0.9rem 0 0;
}

.profile-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-stat b {
  font-size: 1.05rem;
  color: var(--cream);
}

.profile-stat span {
  font-size: 0.72rem;
  color: var(--muted);
}

.profile-bio {
  margin: 0.85rem auto 0;
  max-width: 22rem;
  color: var(--cream-dim);
  font-size: 0.88rem;
  line-height: 1.4;
}

.profile-bio:empty {
  display: none;
}

.profile-actions {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
}

.profile-btn {
  min-height: 2.25rem;
  padding: 0 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--line-strong, var(--line));
  background: var(--panel-raised, #1a2238);
  color: var(--cream);
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: transform var(--motion) var(--ease, ease), background var(--motion) var(--ease, ease);
}

.profile-btn--primary {
  background: linear-gradient(160deg, var(--gold) 0%, var(--gold-deep, #d3b578) 100%);
  color: var(--bg);
  border-color: transparent;
  box-shadow: 0 1px 0 #ffffff59 inset, 0 8px 20px -12px #e7c98a66;
}

.profile-btn--icon {
  width: 2.25rem;
  padding: 0;
  display: grid;
  place-items: center;
  flex: none;
}

.profile-btn:active {
  transform: scale(0.95);
  transition-duration: 0.1s;
}

.profile-tabs {
  display: flex;
  max-width: 40rem;
  margin: 1.25rem auto 0;
  padding: 0 0.5rem;
  border-bottom: 1px solid var(--line);
}

.profile-tab {
  flex: 1;
  appearance: none;
  border: none;
  background: none;
  padding: 0.65rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--muted);
  cursor: pointer;
  position: relative;
}

.profile-tab-label {
  display: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.profile-tab.is-active {
  color: var(--gold);
}

.profile-tab.is-active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 30%;
  right: 30%;
  height: 2px;
  background: var(--gold);
  border-radius: 999px;
}

.profile-grid {
  max-width: 40rem;
  margin: 0.4rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
  padding: 0 0.5rem;
}

.profile-empty-tiles {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.profile-empty-gap {
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  border: 1px dashed var(--line);
  background: var(--panel-raised, rgba(17, 23, 38, 0.35));
  display: block;
}

.profile-empty-add {
  grid-column: 1 / -1;
  appearance: none;
  border: none;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0.9rem auto 0;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--gold) 0%, var(--gold-deep, #d3b578) 100%);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 0 #ffffff59 inset, 0 8px 20px -12px #e7c98a66;
  transition: transform var(--motion) var(--ease, ease);
}

.profile-empty-add:active {
  transform: scale(0.92);
  transition-duration: 0.1s;
}

.profile-grid .empty-state {
  position: static;
  grid-column: 1 / -1;
  transform: none;
  left: auto;
  right: auto;
  max-width: none;
  background: none;
  border: none;
  padding: 1.5rem 0.5rem;
}

.profile-grid--list {
  display: block;
  max-width: 34rem;
  padding: 0.5rem 0.5rem 0;
}

.profile-grid[hidden] {
  display: none;
}

.profile-menu-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.25rem 0 0.5rem;
}

.profile-menu-item {
  appearance: none;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.75rem 0.4rem;
  color: var(--cream);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
  transition: background var(--motion) var(--ease, ease);
}

.profile-menu-item:hover,
.profile-menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

.profile-menu-item svg {
  flex-shrink: 0;
  color: var(--gold);
}

.profile-menu-section {
  margin: 0.6rem 0 0.15rem;
  padding: 0 0.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.profile-menu-list > .profile-menu-section:first-child {
  margin-top: 0;
}

.profile-menu-item span {
  flex: 1;
  min-width: 0;
}

.profile-menu-item span small {
  display: block;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.76rem;
  margin-top: 0.1rem;
}

.profile-menu-chevron {
  flex-shrink: 0;
  color: var(--muted);
}

.profile-menu-divider {
  height: 1px;
  background: var(--line);
  margin: 0.5rem 0.4rem;
}

.profile-menu-item--muted {
  color: var(--muted);
}

.profile-menu-item--muted svg {
  color: var(--muted);
}

button.flat-row-aside {
  appearance: none;
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.4rem 0.5rem;
}

button.flat-row-aside:hover,
button.flat-row-aside:focus-visible {
  color: #e08a8a;
}

.replay-player {
  width: 100%;
  padding: 0 0.4rem 0.75rem;
}

.replay-player video {
  width: 100%;
  border-radius: 10px;
  display: block;
  background: #000;
}

.profile-menu-toggle {
  flex-shrink: 0;
  display: block;
  width: 2.6rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgba(231, 201, 138, 0.18);
  border: 1px solid var(--line);
  transition: background var(--motion) var(--ease, ease);
}

.profile-menu-toggle-thumb {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.14rem;
  border-radius: 50%;
  background: var(--cream-dim, var(--cream));
  transition: transform var(--motion) var(--ease, ease), background var(--motion) var(--ease, ease);
}

.profile-menu-item--toggle[aria-pressed="true"] .profile-menu-toggle {
  background: var(--gold);
  border-color: var(--gold);
}

.profile-menu-item--toggle[aria-pressed="true"] .profile-menu-toggle-thumb {
  transform: translateX(1.1rem);
  background: var(--bg);
}

.profile-menu-footer {
  margin: 0.6rem 0 0;
  padding: 0.4rem;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

.profile-menu-legal {
  margin: 0.6rem 0 0;
  padding: 0.4rem;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
  opacity: 0.7;
}

.profile-menu-legal a {
  color: inherit;
}

.inbox-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(17, 23, 38, 0.88);
  color: inherit;
  font: inherit;
  padding: 0.85rem 0.95rem;
  cursor: pointer;
  min-height: var(--touch);
}

.inbox-row.is-unread {
  border-color: rgba(232, 200, 106, 0.55);
}

.inbox-row-text {
  min-width: 0;
  flex: 1;
}

.inbox-row-text strong {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--cream);
}

.inbox-row-text p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unread-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--gold);
  display: inline-block;
}

.thread-messages {
  max-height: min(42vh, 320px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.25rem 0.35rem 0.75rem;
}

.thread-bubble {
  align-self: flex-start;
  max-width: 85%;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  background: rgba(17, 23, 38, 0.95);
  border: 1px solid var(--line);
}

.thread-bubble.is-mine {
  align-self: flex-end;
  background: rgba(232, 200, 106, 0.12);
  border-color: rgba(232, 200, 106, 0.35);
}

.thread-bubble p {
  margin: 0;
  line-height: 1.4;
  color: var(--cream);
}

.layout-tabs[hidden],
.audience-tabs[hidden],
.app-panel[hidden] {
  display: none !important;
}

body[data-social-view="frontiers"] #feed-layout-tabs,
body[data-social-view="frontiers"] #feed-audience-tabs,
body[data-social-view="friends"] #feed-layout-tabs,
body[data-social-view="friends"] #feed-audience-tabs,
body[data-social-view="inbox"] #feed-layout-tabs,
body[data-social-view="inbox"] #feed-audience-tabs,
body[data-social-view="live"] #feed-layout-tabs,
body[data-social-view="live"] #feed-audience-tabs {
  display: none !important;
}

.social-root[data-view="frontiers"] .flicks,
.social-root[data-view="frontiers"] .ig-feed,
.social-root[data-view="friends"] .flicks,
.social-root[data-view="friends"] .ig-feed,
.social-root[data-view="inbox"] .flicks,
.social-root[data-view="inbox"] .ig-feed,
.social-root[data-view="live"] .flicks,
.social-root[data-view="live"] .ig-feed {
  display: none !important;
}

/* Live inside Social panels */
.panel-live {
  padding-top: 6.5rem;
}

.panel-live .live-sub {
  max-width: 40rem;
  margin: 0 auto;
}

.panel-live .live-title {
  font-family: var(--font-display);
  color: var(--cream);
  margin: 0.25rem 0 0.5rem;
}

.panel-live .live-section-label {
  max-width: 34rem;
  margin: 0 auto 0.65rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.panel-live .text-back,
.panel-frontier-detail .text-back {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  margin-bottom: 0.5rem;
  background: none;
  border: 0;
  color: var(--cream);
  font: inherit;
  cursor: pointer;
  padding: 0 0.25rem;
  flex-shrink: 0;
}

.panel-live .live-input {
  display: block;
  width: 100%;
  max-width: 34rem;
  margin: 0 0 0.75rem;
  min-height: var(--touch);
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(11, 15, 26, 0.9);
  color: var(--cream);
  padding: 0.5rem 0.75rem;
  font: inherit;
}

.panel-live .check-row {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  max-width: 34rem;
  margin: 0.5rem 0 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.panel-live .status-line {
  color: var(--muted);
  min-height: 1.25rem;
}

.panel-live .status-line.is-ok {
  color: var(--mint, #6ecf9a);
}

.panel-live .status-line.is-error {
  color: #e07090;
}

.panel-live .chat-hint {
  color: var(--muted);
  font-size: 0.85rem;
}

.panel-live .toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}

.social-root[data-view="live"] .flicks,
.social-root[data-view="live"] .ig-feed {
  display: none !important;
}

/* ---- Icon chrome + new panels polish ---- */
.social-product {
  font-size: 1.35rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold);
  margin: 0;
  min-width: 1.5rem;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
}

.account-quick-wrap {
  position: relative;
}

.notif-quick-wrap {
  position: relative;
}

.notif-quick-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 18.5rem;
  max-width: 85vw;
  background: var(--panel-raised, #1a2238);
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 14px;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
  padding: 0.6rem;
  z-index: 40;
}

.notif-quick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.2rem 0.3rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cream);
}

.notif-quick-markread {
  appearance: none;
  border: none;
  background: none;
  color: var(--gold);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.notif-quick-list {
  max-height: 20rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.notif-quick-list .empty-state {
  position: static;
  transform: none;
  left: auto;
  right: auto;
  max-width: none;
  background: none;
  border: none;
  padding: 1rem 0.3rem;
  font-size: 0.85rem;
}

.account-quick-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 11.5rem;
  background: var(--cream);
  border-radius: 14px;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  z-index: 40;
}

.account-quick-item {
  appearance: none;
  border: none;
  background: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  color: #1a1a1a;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.account-quick-item:hover {
  background: rgba(11, 15, 26, 0.06);
}

.account-quick-item + .account-quick-item {
  border-top: 1px solid rgba(11, 15, 26, 0.1);
}

.icon-btn {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--cream-dim);
  display: grid;
  place-items: center;
  line-height: 0;
  cursor: pointer;
  transition: background var(--motion) var(--ease, ease), border-color var(--motion) var(--ease, ease),
    color var(--motion) var(--ease, ease), transform var(--motion) var(--ease, ease);
}

.icon-btn:hover,
.icon-btn.is-active {
  color: var(--cream);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

.icon-btn:active {
  transform: scale(0.9);
  transition-duration: 0.1s;
}

.icon-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.top-badge {
  top: 0.15rem;
  right: 0.1rem;
}

.comfort-toggle--icon {
  padding: 0.2rem 0.35rem;
  min-height: 2.5rem;
}

.comfort-toggle--icon .toggle-label {
  display: none;
}

.layout-tabs--icons .layout-tab,
.audience-tabs--icons .audience-tab {
  min-width: 2.75rem;
  width: 2.75rem;
  padding: 0.4rem;
  display: grid;
  place-items: center;
}

.layout-tabs--icons .layout-tab svg,
.audience-tabs--icons .audience-tab svg {
  display: block;
  color: inherit;
}

.placeholder-banner:empty {
  display: none;
}

.handle-btn,
.text-link {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.handle-btn:hover,
.text-link:hover {
  color: var(--gold);
}

.search-input {
  max-width: 34rem;
  margin: 0 auto 1rem;
  display: block;
  width: 100%;
}

.search-results {
  max-width: 34rem;
  margin: 0 auto;
  display: grid;
  gap: 0.5rem;
}

.explore-tabs {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.15rem 0 0.85rem;
  scrollbar-width: none;
}

.explore-tabs::-webkit-scrollbar {
  display: none;
}

.explore-tab {
  flex-shrink: 0;
  white-space: nowrap;
  min-height: calc(var(--touch) - 8px);
  padding: 0.35rem 0.1rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--motion) var(--ease, ease), border-color var(--motion) var(--ease, ease);
}

.explore-tabs {
  gap: 1.1rem;
}

.explore-tab.is-active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.explore-tab:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

.search-section-tabs {
  display: flex;
  gap: 1.1rem;
  max-width: 40rem;
  margin: 0.5rem auto 1rem;
  border-bottom: 1px solid var(--line);
}

.search-section-tab {
  flex-shrink: 0;
  white-space: nowrap;
  min-height: calc(var(--touch) - 8px);
  padding: 0.35rem 0.1rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.search-section-tab.is-active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.notif-filter-pills {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  max-width: 40rem;
  margin: 0.6rem auto 1rem;
  padding-bottom: 0.15rem;
  scrollbar-width: none;
}

.notif-filter-pills::-webkit-scrollbar {
  display: none;
}

.notif-filter-pill {
  flex-shrink: 0;
  white-space: nowrap;
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(17, 23, 38, 0.6);
  color: var(--cream-dim, var(--cream));
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  min-height: calc(var(--touch) - 10px);
}

.notif-filter-pill.is-active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(231, 201, 138, 0.1);
}

.notif-group-heading {
  max-width: 40rem;
  margin: 1rem auto 0.4rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.notif-group-heading:first-child {
  margin-top: 0.2rem;
}

.explore-grid {
  max-width: 40rem;
  margin: 0 auto 1.25rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
}

.explore-card {
  appearance: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(160deg, #12182a, #0b0f1a 70%);
  font: inherit;
  color: var(--cream);
  transition: transform var(--motion) var(--ease, ease);
}

.explore-card:active {
  transform: scale(0.96);
  transition-duration: 0.1s;
}

.explore-card-visual {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background-size: cover;
  background-position: center;
}

.explore-card-glyph {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: rgba(243, 234, 216, 0.35);
}

.explore-card-likes {
  position: absolute;
  left: 0.4rem;
  bottom: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

.explore-card-user {
  position: absolute;
  left: 0.4rem;
  top: 0.35rem;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

.search-heading {
  margin: 1rem 0 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.search-row,
.notif-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(17, 23, 38, 0.88);
  color: inherit;
  font: inherit;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
}

.notif-row.is-unread {
  border-color: rgba(231, 201, 138, 0.5);
}

.notif-kind {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  min-width: 4.5rem;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tag-chip {
  border: 1px solid var(--line);
  background: rgba(17, 23, 38, 0.9);
  color: var(--cream);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font: inherit;
  cursor: pointer;
}

.dim {
  color: var(--muted);
  font-size: 0.85rem;
}

.profile-hero {
  text-align: center;
  margin-bottom: 1rem;
}

.profile-avatar {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 0.5rem;
  font-size: 1rem;
}

body[data-social-view="search"] #feed-layout-tabs,
body[data-social-view="search"] #feed-audience-tabs,
body[data-social-view="notify"] #feed-layout-tabs,
body[data-social-view="notify"] #feed-audience-tabs,
body[data-social-view="account"] #feed-layout-tabs,
body[data-social-view="account"] #feed-audience-tabs,
body[data-social-view="creator"] #feed-layout-tabs,
body[data-social-view="creator"] #feed-audience-tabs,
body[data-social-view="memory"] #feed-layout-tabs,
body[data-social-view="memory"] #feed-audience-tabs {
  display: none !important;
}

.social-root[data-view="search"] .flicks,
.social-root[data-view="search"] .ig-feed,
.social-root[data-view="notify"] .flicks,
.social-root[data-view="notify"] .ig-feed,
.social-root[data-view="account"] .flicks,
.social-root[data-view="account"] .ig-feed,
.social-root[data-view="creator"] .flicks,
.social-root[data-view="creator"] .ig-feed,
.social-root[data-view="memory"] .flicks,
.social-root[data-view="memory"] .ig-feed {
  display: none !important;
}

html.comfort-mode .panel-live .chat-log {
  font-size: 1.05rem;
  line-height: 1.55;
}

html.comfort-mode .panel-live .chat-form input {
  min-height: 3rem;
  font-size: 1.05rem;
}

.memory-card {
  padding: 1rem 1.05rem;
  border-radius: 16px;
  border: 1px solid rgba(243, 234, 216, 0.14);
  background: rgba(11, 15, 26, 0.45);
}

.memory-card h3 {
  margin: 0.2rem 0 0.45rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--cream);
}

.memory-topic {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.memory-body {
  margin: 0 0 0.75rem;
  color: var(--cream-dim);
  line-height: 1.45;
  white-space: pre-wrap;
}

.page-social.live-captions-on .chat-line {
  border-left: 3px solid rgba(231, 201, 138, 0.35);
  padding-left: 0.45rem;
  margin-bottom: 0.35rem;
}

/* ============================================================
   Web chrome: bottom nav on phone widths, left sidebar on desktop
   (>=1000px) only.
   ============================================================ */

.desktop-sidebar {
  display: none;
}

@media (min-width: 1000px) {
  .desktop-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 232px;
    padding: 1.25rem 0.75rem;
    padding-top: max(1.25rem, env(safe-area-inset-top));
    border-right: 1px solid rgba(231, 201, 138, 0.28);
    background: #121826;
    overflow-y: auto;
    z-index: 60;
  }

  body.page-social {
    padding-left: 232px;
  }

  .bottom-nav {
    display: none !important;
  }

  #account-quick-toggle {
    display: none !important;
  }

  .profile-legal-links {
    display: none !important;
  }

  .line-menu-btn {
    display: none !important;
  }

  /* The Bean wordmark+icon in the mobile top bar duplicates the sidebar's
     own logo at desktop width - both rendered at once (confirmed live at
     1024px). Search/notifications/account stay - those are still the
     only access points for them at this width, just the branding is
     redundant. */
  .social-product {
    display: none !important;
  }
  /* With the hamburger and logo both gone, .top-actions is the only
     child left in this space-between row - it would otherwise collapse
     to the left edge instead of staying where it visually was, on the
     right. */
  .social-top-row {
    justify-content: flex-end;
  }
}

.desktop-sidebar .profile-menu-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0.5rem 0;
}

.desktop-sidebar .profile-menu-list--account {
  margin-top: auto;
  padding-top: 0.5rem;
}
.desktop-sidebar .profile-menu-list--account .profile-menu-divider {
  display: none;
}

.desktop-sidebar .profile-menu-item span small,
.desktop-sidebar .profile-menu-footer,
.desktop-sidebar .profile-menu-chevron,
.desktop-sidebar .profile-menu-legal {
  display: none;
}

/* Frontiers already has its own entry in the sidebar's main nav above -
   don't repeat it when the Create/Learn/Account list docks in below. */
.desktop-sidebar .profile-menu-item[data-view-jump="frontiers"] {
  display: none;
}

.desktop-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  padding: 0 0.5rem;
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1.05rem;
  color: var(--cream);
}

.desktop-sidebar-logo img {
  width: 26px;
  height: 26px;
  border-radius: 6px;
}

.desktop-nav-item {
  appearance: none;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.65rem 0.5rem;
  border-radius: 10px;
  color: var(--cream-dim);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.desktop-nav-item:hover,
.desktop-nav-item:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--cream);
}

.desktop-nav-item.is-active {
  color: var(--gold);
}

.desktop-nav-item .nav-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--bg);
  font-size: 0.65rem;
  font-weight: 700;
}

.desktop-nav-item .nav-badge {
  margin-left: auto;
}

.desktop-sidebar-heading {
  margin: 1.1rem 0 0.5rem;
  padding: 0 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.desktop-suggested-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.desktop-suggested-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 10px;
}

.desktop-suggested-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.desktop-suggested-id {
  appearance: none;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 0;
}

.desktop-suggested-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--panel-raised, #1a2238);
  color: var(--gold);
  font-weight: 700;
  font-size: 0.8rem;
}

/* Who's-live avatar ring: shown on the Suggested sidebar and Following
   list when the person is currently hosting a Live room (live-store.js
   polls Supabase every 30s and toggles this class on re-render). Works
   on any round avatar - both .desktop-suggested-avatar (30px) and
   .flat-row-avatar (2.5rem) get it. */
.desktop-suggested-avatar.is-live-now,
.flat-row-avatar.is-live-now {
  position: relative;
  box-shadow: 0 0 0 2px var(--bg, #0b0f1a), 0 0 0 4px #ff4d5e;
  animation: live-ring-pulse 1.8s ease-in-out infinite;
}

.desktop-suggested-avatar.is-live-now::after,
.flat-row-avatar.is-live-now::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff4d5e;
  border: 2px solid var(--bg, #0b0f1a);
}

@keyframes live-ring-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px var(--bg, #0b0f1a), 0 0 0 4px rgba(255, 77, 94, 0.9);
  }
  50% {
    box-shadow: 0 0 0 2px var(--bg, #0b0f1a), 0 0 0 4px rgba(255, 77, 94, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-suggested-avatar.is-live-now,
  .flat-row-avatar.is-live-now {
    animation: none;
  }
}

.desktop-suggested-text {
  min-width: 0;
  overflow: hidden;
}

.desktop-suggested-text b {
  display: block;
  font-size: 0.82rem;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.desktop-suggested-text small {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
}

.desktop-suggested-follow {
  appearance: none;
  border: 1px solid var(--line-strong, var(--line));
  background: var(--panel-raised, #1a2238);
  color: var(--cream);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

.desktop-suggested-follow.is-following {
  color: var(--muted);
}

.desktop-sidebar-footer {
  /* margin-top:auto moved to .profile-menu-list--account, which always
     sits directly above this now - two adjacent auto margins would each
     claim a share of the free space and open a gap between them instead
     of pushing both down together as one glued-to-the-bottom group. */
  margin-top: 0;
  padding: 1rem 0.5rem 0;
  font-size: 0.7rem;
  line-height: 1.7;
  color: var(--muted);
}

.desktop-sidebar-footer a {
  color: var(--muted);
}

/* .social-top's desktop repositioning lives in app.html's inline
   #bean-web-chrome block (gated to min-width:1000px there) - this was a
   second, unconditional copy of the same rule, shifting the mobile top
   bar 232px right at every width (confirmed live at 539px: left:232px,
   width:307.2px, no sidebar there to justify it). Deleted rather than
   re-gating a duplicate. */

.feed-mode-row,
.flicks,
.flick-card,
.ig-feed,
.panel-intro,
.frontiers-list,
.frontier-toolbar,
.friend-add-form,
#panel-friends .search-heading,
.friends-feed,
#panel-friends .flat-list,
.search-results,
.search-input,
.explore-tabs,
.explore-grid,
.profile-head,
.profile-tabs,
.profile-grid,
.profile-grid--list,
.studio-kind-tabs,
.studio-pane,
.app-panel {
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

/* The Bean logo/hamburger/actions bar stays pinned to the left edge of
   the content area (flush against the sidebar) instead of floating
   centered like the feed/panel content below it. */
.social-top-row {
  max-width: 640px;
  margin-left: 0;
  margin-right: auto;
}

@media (min-width: 1000px) {
  .ig-feed,
  .panel-intro,
  .frontiers-list,
  .frontier-toolbar,
  .friend-add-form,
  #panel-friends .search-heading,
  .friends-feed,
  #panel-friends .flat-list,
  .search-results,
  .search-input,
  .explore-tabs,
  .explore-grid,
  .profile-head,
  .profile-tabs,
  .profile-grid,
  .profile-grid--list,
  .studio-kind-tabs,
  .studio-pane {
    max-width: 640px;
  }

  /* Math memory's header used to stay at the generic 640px cap while
     .creator-cols (its actual two-column form+preview body) is
     deliberately wider at 60rem - found live: title sat noticeably
     narrower than, and misaligned against, the form below it. Widen
     just this panel's header to match instead of narrowing the form. */
  #panel-memory .panel-intro {
    max-width: 60rem;
  }

  /* .app-panel itself spans the full region next to the sidebar (like
     .social-top does) instead of centering a fixed box across the whole
     viewport - its own children (.panel-intro, .frontiers-list, etc,
     all in the list above) still center themselves at 640px within that
     region, so panels line up with Feed instead of drifting under the
     sidebar. */
  .app-panel {
    left: 232px;
    right: 0;
    width: auto;
    max-width: none;
    transform: none;
  }

  /* Profile still gets a proper desktop layout here, not just the phone
     stack made wider (which is all the 640px rule above did) - it was
     reading as a narrow mobile column floating in a lot of empty space.
     Reference: TikTok's own desktop profile - avatar on the left, name/
     stats/bio/actions stacked to its right and left-aligned instead of
     centered, wider multi-column grid below. Overrides the generic
     max-width rule above by coming after it in the cascade. */
  .profile-head {
    max-width: 52rem;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 2rem;
    align-items: start;
    text-align: left;
    margin-top: 2.5rem;
  }
  .profile-avatar-quick-wrap {
    grid-row: 1 / span 5;
  }
  .profile-avatar {
    width: 7rem;
    height: 7rem;
    margin: 0;
    font-size: 1.8rem;
  }
  .profile-name {
    margin-top: 0;
    font-size: 1.6rem;
  }
  .profile-stats {
    justify-content: flex-start;
  }
  .profile-stat {
    align-items: flex-start;
  }
  .profile-bio {
    margin-left: 0;
    margin-right: 0;
    max-width: 30rem;
  }
  .profile-actions {
    justify-content: flex-start;
  }

  .profile-tabs,
  .profile-grid,
  .profile-grid--list {
    max-width: 52rem;
  }
  .profile-grid,
  .profile-empty-tiles {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
  }

  /* Same fix as .app-panel above, for the other half of the app: every
     bottom sheet (Comments, Create, Thread, Profile, Share, ...) uses
     .sheet{inset:0} as its full-viewport backdrop, so .sheet-panel's
     left:50% centers across the WHOLE viewport including the sidebar's
     232px, not the open content region beside it - every sheet was
     sitting off-center toward the sidebar. Narrowing .sheet itself to
     start after the sidebar makes left:50% centre correctly with no
     changes needed to .sheet-panel. */
  .sheet {
    left: 232px;
  }

  .profile-tab-label {
    display: inline;
  }
}


/* Decorative overlays must not swallow native video controls. */
.flick-visual::after, .flick-body { pointer-events: none; }
.flick-body button, .flick-body a, .flick-body input, .flick-timed { pointer-events: auto; }
.post-video-status { position: absolute; top: 1rem; left: 1rem; right: 1rem; z-index: 3; padding: .75rem; background: #141a2a; color: #fff; pointer-events: none; }