/* Camada de desempenho: conserva animações importantes, sem movimento contínuo. */
@media (prefers-reduced-motion: no-preference) {
  /* O menu continua a reagir ao toque/rato; deixa apenas de consumir recursos
     e distrair constantemente quando está parado. */
  .nav-item .nav-letter,
  .mobile-nav > button > span .mobile-letter,
  .page-head h1,
  .section-title h2,
  .section-title h3,
  .profile-name h1,
  .community-header h1,
  .studio-heading h1,
  .sidebar .brand span,
  .mobile-header .brand span,
  .primary,
  .publish-btn,
  .submit-btn,
  .auth-submit,
  .black-btn { animation: none; }

  /* Feedback curto e claro, apenas quando a pessoa interage. */
  .nav-item:hover .nav-letter,
  .nav-item:focus-visible .nav-letter,
  .mobile-nav > button:active .mobile-letter,
  .mobile-nav > button:focus-visible .mobile-letter { animation: connecting-nav-letter .42s cubic-bezier(.2,.8,.2,1) both; }
}

@media (max-width: 720px) {
  /* Previne que conteúdos dinâmicos aumentem a largura da página. */
  .mobile-header, .mobile-nav, .feed-column, .standard-page, .home-showcase { max-width: 100vw; }
  .friend-profile-chip, .post-card, .composer, .messages-layout { min-width: 0; }
}

/* Os atalhos de formato acompanham o conteúdo; nunca cobrem a navegação. */
.content-filters {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 2 !important;
  width: 100% !important;
  margin: 0 0 10px !important;
  border-top: 1px solid #ecece8;
  border-bottom: 1px solid #ecece8;
  background: #fff !important;
}
.home-showcase { margin-top: 22px; }
@media (max-width:720px) {
  .content-filters { height: auto !important; padding: 8px 12px !important; }
  .friends-strip { margin: 0 -12px 10px; padding: 12px; border-bottom: 1px solid #ecece8; background: #fff; }
}