/* ---- Mobile-app shell (Instagram-like) ---- */
html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }

/* Centered phone-width column; on desktop it sits on a light backdrop with side rules. */
.app-shell {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  background: #ffffff;
}
@media (min-width: 481px) {
  .app-shell { border-left: 1px solid #ededed; border-right: 1px solid #ededed; box-shadow: 0 0 60px rgba(0, 0, 0, .05); }
}

/* Fixed top header + bottom tab bar, constrained to the shell width and centered. */
.app-header,
.app-tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 40;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(8px);
}
.app-header { top: 0; border-bottom: 1px solid #efefef; padding-top: env(safe-area-inset-top); }
.app-tabbar { bottom: 0; border-top: 1px solid #efefef; padding-bottom: env(safe-area-inset-bottom); }

.app-header-inner { height: 52px; }
.app-tabbar-inner { height: 52px; }

/* Scroll area between the fixed bars. */
.app-main {
  padding-top: calc(52px + env(safe-area-inset-top));
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
  min-height: 100dvh;
}

/* Hide scrollbars for a native-app feel (still scrollable). */
.no-bar { scrollbar-width: none; -ms-overflow-style: none; }
.no-bar::-webkit-scrollbar { display: none; }

/* Story ring gradient (Instagram look). */
.story-ring {
  background: linear-gradient(135deg, #ff5a42 0%, #a73eff 52%, #f7a90a 100%);
  padding: 2.5px;
  border-radius: 9999px;
}
.story-ring--seen { background: #dbdbdb; }

/* Tactile tap feedback for icon buttons. */
.tap { transition: transform .08s ease; }
.tap:active { transform: scale(.9); }

/* Wordmark */
.wordmark {
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #ff5a42 0%, #a73eff 52%, #f7a90a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  min-width: 61px;
}

@media (max-width: 400px) {
  html { font-size: 15px; }
}