/* ==========================================================================
   AFTER · refinamento do mobile (feed)
   Só layout: nada aqui pinta fundo de página/tema/wallpaper.
   Cores sempre por variáveis (--purple, --border, --muted), então tema
   claro/escuro e cor de destaque continuam mandando.
   ========================================================================== */

@media (max-width: 700px) {

  /* ---------- topo ---------- */
  .topbar {
    border-radius: 0 !important;
    gap: 8px !important;
  }

  .topbar h1 {
    font-size: 20px !important;
    letter-spacing: -.2px !important;
  }

  .topbar .heart-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--muted) !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .topbar .heart-button:active {
    background: #ffffff10 !important;
  }

  .topbar .after-mobile-ai-menu {
    margin-left: auto !important;
  }

  /* ---------- cabeçalho do feed ---------- */
  /* o feed perdeu o respiro lateral: os cards encostavam na borda da tela */
  #homePage #feed {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #homePage .feed-header {
    padding: 8px 15px 8px !important;
  }

  #homePage .feed-header h2 {
    font-size: 12px !important;
    letter-spacing: .6px !important;
    text-transform: uppercase !important;
  }

  /* ---------- card do post ---------- */
  /* padding do card e margem negativa da mídia precisam ser o MESMO número
     (estavam 11px x 14px: a imagem vazava 2px à esquerda e sobrava 26px à direita) */
  #homePage #feed > .post {
    padding: 13px 14px 5px !important;
    border-radius: 20px !important;
    margin: 0 0 14px !important;
  }

  #homePage #feed > .post > .post-header {
    align-items: center !important;
    gap: 10px !important;
  }

  #homePage #feed > .post > .post-header .post-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    font-size: 15px !important;
  }

  /* vibe vazia virava uma bolinha sem significado ao lado do ⋯ */
  .post-vibe:empty {
    display: none !important;
  }

  #homePage #feed > .post .post-menu-button {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    font-size: 17px !important;
    line-height: 1 !important;
  }

  #homePage #feed > .post .post-text {
    margin-top: 2px !important;
    padding: 0 1px !important;
  }

  /* mídia “sangrando” até a borda do card, agora alinhada.
     Só IMAGEM: áudio (.post-audio) e vídeo (.after-video-player) têm layout próprio */
  #homePage #feed > .post > .post-media:not(.post-audio):not(.after-video-player) {
    width: calc(100% + 28px) !important;
    max-width: none !important;
    margin: 10px -14px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  #homePage #feed > .post > .post-media:not(.post-audio):not(.after-video-player) img {
    border-radius: 0 !important;
    display: block !important;
  }

  /* ---------- ações ---------- */
  #homePage #feed > .post > .actions {
    margin-top: 2px !important;
    padding: 7px 0 2px !important;
    border-top: 1px solid var(--border) !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  #homePage #feed > .post > .actions .action {
    flex: 1 1 0 !important;
    min-height: 40px !important;
    padding: 8px 6px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }

  #homePage #feed > .post > .actions .action .after-action-icon {
    width: 17px !important;
    height: 17px !important;
    flex: none !important;
  }

  #homePage #feed > .post > .actions .action:active {
    background: #ffffff0d !important;
  }

  /* ---------- barra inferior: pílula flutuante de ícones ---------- */
  /* antes: rodapé de 62px colado na borda, com rótulo embaixo de cada ícone.
     agora: os ícones flutuam dentro de uma pílula e o ativo ganha um
     squircle da cor de destaque. o --mobile-nav-height continua reservando
     o espaço embaixo do conteúdo (toast, menu de post e chat do Direct). */
  :root {
    --mobile-nav-height: 78px;
  }

  .mobile-nav,
  body:has(#iafterPage:not(.hidden)) .mobile-nav {
    right: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    z-index: 100 !important;
    display: flex !important;
    width: auto !important;
    max-width: 430px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 7px 9px !important;
    border: 1px solid var(--border) !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 999px !important;
    background: var(--surface-2) !important;
    background: color-mix(in srgb, var(--surface-2) 88%, transparent) !important;
    box-shadow: 0 18px 40px #00000059 !important;
    justify-content: space-between !important;
    align-items: center !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
  }

  .mobile-nav button {
    position: relative !important;
    flex: 1 1 0 !important;
    width: auto !important;
    height: 46px !important;
    min-width: 0 !important;
    min-height: 46px !important;
    gap: 0 !important;
    padding: 0 !important;
    border-radius: 15px !important;
    color: var(--muted) !important;
  }

  .mobile-nav button span {
    font-size: 21px !important;
    line-height: 1 !important;
  }

  .mobile-nav button small {
    display: none !important;
  }

  .mobile-nav button.active {
    background: var(--surface-3) !important;
    background: color-mix(in srgb, var(--purple) 26%, transparent) !important;
    color: var(--text) !important;
  }

  .mobile-nav .mobile-plus {
    flex: 0 0 auto !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: var(--purple) !important;
    background: linear-gradient(140deg, var(--purple), var(--purple-light)) !important;
    background-image: linear-gradient(140deg, var(--purple), var(--purple-light)) !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-size: 27px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    box-shadow: 0 7px 20px #8272ff40 !important;
  }

  .mobile-nav .mobile-plus:active {
    transform: scale(.93) !important;
  }

  /* refaz aqui os "esconda a barra" do style.css: a pílula usa o mesmo
     peso de seletor, então precisa vir depois para não vencer o hide */
  body:has(.after-live-overlay:not(.hidden)) .mobile-nav,
  body:has(#composerModal.open) .mobile-nav,
  body.direct-mode.direct-mobile-chat-open .mobile-nav {
    display: none !important;
  }
}