/* Tela inicial no celular: uma coisa de cada vez, nada flutuando por cima do conteúdo.
   Ordem de leitura: o que fazer hoje (🔥) → o título → memes em alta → a caixa para colar o link.
   O que já está no menu da conta (Nova conversa, Apoie, Pedir um idioma) sai da tela inicial. */
@media (max-width: 768px) {
    /* ── Hoje: a ação do dia, no fluxo da página (antes era um aviso fixo por cima do título) ── */
    .today-strip { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 4px 0 10px; }
    .today-pill {
        display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: 999px;
        font-size: 0.86rem; font-weight: 700; text-decoration: none; color: #1e1e2f; background: #ffb86c;
        border: 2px solid #12121c; box-shadow: 0 3px 0 #12121c; transition: transform 0.12s;
    }
    .today-pill:active { transform: translateY(2px); box-shadow: 0 1px 0 #12121c; }
    .today-pill.gift { background: #bd93f9; }
    .today-pill img.fx { width: 1.15em; height: 1.15em; }
    .today-pill .tp-count { background: #12121c; color: #ffb86c; border-radius: 999px; padding: 0 7px; font-size: 0.78rem; }
    .habit-reminder { display: none !important; }   /* o aviso antigo, fixo por cima do título */
    /* A surpresa pula de leve: está pronta para abrir (o 🎁 do topo some no celular) */
    .today-pill.gift img.fx, .today-pill.gift .tp-ico { display: inline-block; animation: tp-hop 2.4s ease-in-out infinite; }
    @keyframes tp-hop { 0%, 80%, 100% { transform: none; } 88% { transform: translateY(-3px) rotate(-10deg); } 94% { transform: rotate(6deg); } }

    /* ── Home sem conversa: frase + banner no meio do espaço livre entre o topo e a caixa de texto.
       O memes.js mede --pm-free-top (fim do cabeçalho), --pm-free-bottom (a caixa de texto e as abas) e
       --pm-vh. Se o conteúdo não couber (tela baixa, vídeo aberto), ele volta ao topo e a página rola,
       sem nunca ficar atrás da caixa de texto. Com conversa, a classe sai e nada disso vale. ── */
    body.pm-home.pm-home-empty .block-container {
        display: flex; flex-direction: column; justify-content: center;
        min-height: var(--pm-vh, 100dvh);
        padding-top: calc(var(--pm-free-top, 62px) + 10px) !important;
        padding-bottom: calc(var(--pm-free-bottom, 170px) + 10px) !important;
    }
    body.pm-home.pm-home-empty .block-container > * { width: 100%; flex: none; }
    body.pm-home.pm-home-empty { padding-bottom: 0 !important; }   /* as abas já estão no --pm-free-bottom */
    body.pm-home.pm-home-empty .block-container > .meme-trends { margin-bottom: 0; }
    /* O player fica no lugar do banner (o memes.js o tira de dentro do card) */
    body.pm-home .block-container > .mt-player-slot { margin: 0 auto 12px; max-width: 920px; }

    /* ── Título: uma linha e uma frase ── */
    body.pm-home .block-container { padding-top: 0.6rem; padding-bottom: 84px; }   /* o fim da lista não fica atrás da caixa de texto */
    body.pm-home .main-title { display: none; }      /* o nome já está no topo da tela */
    body.pm-home .main-subtitle { font-size: 0.86rem; margin: 2px 0 10px; line-height: 1.35; }
    body.pm-home .main-subtitle .hint-more { display: none; }
    body.pm-home .main-langs { display: none; }      /* EN/ES/JA estão nos memes; "Pedir um idioma" está no menu */

    /* ── Memes em alta: cabeçalho numa linha, card enxuto e o próximo aparecendo (convida a deslizar) ── */
    .meme-trends { padding: 12px 12px 8px; }
    .mt-head { flex-wrap: nowrap; gap: 8px; }
    .mt-heading { flex: 1 1 auto; gap: 8px; }
    .mt-heading .mt-fire, .mt-heading img.fx { font-size: 1.35rem; width: 1.35rem; height: 1.35rem; }
    .mt-heading h2 { font-size: 0.98rem; white-space: nowrap; }
    .mt-heading p { display: none; }
    .mt-langs { order: 0; width: auto; flex: none; }
    .mt-lang { flex: none; min-width: 40px; min-height: 32px; padding: 4px 9px; font-size: 0.78rem; }
    .mt-toggle { flex: none; width: 32px; height: 32px; }
    .mt-list { grid-auto-columns: 74%; gap: 10px; margin-top: 10px; }
    .mt-info { gap: 5px; padding: 8px 10px 10px; }
    .mt-info h3 { font-size: 0.88rem; }
    .mt-summary { display: none; }                   /* o resumo inteiro aparece no player e na aula */
    .mt-tags span:nth-child(n+3) { display: none; }
    .mt-btn { min-height: 34px; padding: 6px 12px; }
    .mt-foot { display: none; }

    /* ── Caixa de texto colada nas abas; Nova conversa só quando há conversa; Apoie fica no menu ── */
    /* Os <br> depois da caixa afastam do rodapé no computador; no celular eram 40 px vazios acima das abas */
    body.pm-home .chat-input-container > br { display: none; }
    body.pm-home .chat-input-container { padding: 6px 12px 0; bottom: calc(var(--pm-tab-h) + 4px) !important; }
    body.pm-home .chat-input-wrapper { gap: 10px; }
    body.pm-home .btn-donate-app { display: none; }
    body.pm-home .chat-top-actions { justify-content: flex-end; margin-bottom: 6px; }
    body.pm-home:not(:has(#messages-container [data-testid="stChatMessage"])) .chat-top-actions { display: none; }
    body.pm-home .btn-new-chat { padding: 4px 12px; font-size: 0.78rem; }
    body.pm-home [data-testid="stChatInputTextArea"] { min-height: 50px; padding: 0.75rem 1.1rem; font-size: 0.92rem; }
}

/* Celular estreito (iPhone SE, 320 px): os idiomas descem para a própria linha */
@media (max-width: 768px) and (max-height: 600px) {
    body.pm-home .main-subtitle { display: none; }   /* tela baixa: direto para os memes */
}
@media (max-width: 360px) {
    .mt-head { flex-wrap: wrap; }
    .mt-heading { flex-basis: calc(100% - 44px); }
    .mt-langs { order: 3; width: 100%; }
    .mt-lang { flex: 1; }
    .mt-list { grid-auto-columns: 82%; }
}

@media (prefers-reduced-motion: reduce) { .today-pill.gift img.fx, .today-pill.gift .tp-ico { animation: none; } }