/* Celular (pedido do Bruno em 2026-09-26, iPhone 16 Pro, 402 x 874 pt). Carregado por último no index.html. */

/* Selo "N esperando você" na lista de tópicos: herdava o cartão .esperando da tela inicial e estourava o menu */
.badge.estados .esperando { display: inline; padding: 0; border: 0; background: none; cursor: default; transform: none; }

/* Nenhuma tela arrasta para o lado no celular (pedido do Bruno em 2026-09-26): o conteúdo quebra linha
   e cabe na largura; quadros em colunas (Demandas, Equipe) viram uma coluna só, empilhada. */
@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  input, select, textarea { font-size: 16px !important; }

  /* Mensagens: texto longo (link, caminho de arquivo, código) quebra em vez de empurrar a tela */
  .mensagens { overflow-x: hidden; }
  .msg { grid-template-columns: minmax(0, 1fr); }
  .msg .corpo, .msg .quem { min-width: 0; max-width: 100%; overflow-wrap: break-word; }
  .corpo a { overflow-wrap: anywhere; }
  .corpo pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .corpo code { overflow-wrap: anywhere; }

  /* Tabelas: cabem na tela, as células quebram linha */
  .corpo table, table.cfg, .tabela-uso { display: table; width: 100%; max-width: 100%; table-layout: auto; }
  .corpo th, .corpo td, table.cfg th, table.cfg td, .tabela-uso th, .tabela-uso td { white-space: normal; max-width: none; overflow-wrap: break-word; word-break: normal; }
  /* Palavras inteiras nas colunas; só link e código quebram no meio (senão a coluna vira uma letra por linha) */
  .corpo td a, .corpo td code, table.cfg td code { overflow-wrap: anywhere; }
  .rolagem { overflow-x: visible; }

  /* Quadros em colunas: uma embaixo da outra */
  .quadro { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow-x: hidden; scroll-snap-type: none; }
  .quadro .coluna { max-height: none; min-width: 0; }
  .quadro .cartoes { max-height: 60dvh; }
  .pagina-demandas { height: auto; min-height: 100dvh; overflow: visible; grid-template-rows: auto auto auto; }
  .pagina-demandas .quadro { overflow: visible; grid-auto-rows: auto; }

  /* Conexões: botões descem de linha */
  .cartao-conexao { grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; }
  .cartao-conexao .botao-conexao { justify-self: start; }
  .botao-conexao { max-width: 100%; white-space: normal; }
}

@media (max-width: 900px) {
  /* App instalado na tela de início: nada embaixo da Dynamic Island nem da barra de gestos */
  .topo { gap: 8px; padding: calc(6px + env(safe-area-inset-top)) 10px 6px; }
  .topo .icone { width: 40px; height: 40px; flex: none; }
  .marca-botao { flex: none; font-size: 11px; letter-spacing: 0.14em; }
  .status-ia { flex: 1; max-width: none; min-width: 0; }

  /* Passos dos agentes (Bash, Read...): uma linha cada, sem ocupar a tela */
  .atividade { gap: 4px; margin: -14px 0 14px; }
  .atividade span { display: block; max-width: 100%; padding: 2px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
  .atividade b { margin-right: 6px; }

  /* Mensagens: largura toda e leitura confortável */
  .mensagens { padding: 14px 14px 8px; }
  .msg { margin-bottom: 18px; }
  .msg.bruno .corpo { max-width: 90%; }
  .msg.agente .corpo { padding-left: 10px; }
  .msg .quem { flex-wrap: wrap; row-gap: 0; }
  .corpo table { font-size: 13px; }
  .corpo th, .corpo td { padding: 7px 9px; }

  /* Barra "Para": menor, rola na horizontal */
  .barra-agentes { padding: 4px 12px 0; }
  .barra-agentes-rotulo { display: none; }
  .agente-alvo { padding: 6px 10px 6px 9px; }

  /* Caixa de texto: 16 px (o iPhone não dá zoom ao tocar), texto ganha espaço, botões de 40 px */
  .composer { grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .composer:has(.parar:not([hidden])) { grid-template-columns: 40px minmax(0, 1fr) auto auto auto; }
  .composer textarea { min-height: 44px; padding: 11px 12px; font-size: 16px; line-height: 1.35; }
  .composer textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .anexo, .enviar, .parar, .descartar { width: 40px; height: 44px; border-radius: 12px; }
  .gravar { min-width: 40px; height: 44px; padding: 0 9px; }
  .gravar.gravando { padding: 0 10px; }
  input, select, textarea, .busca-campo, .decisao-nota { font-size: 16px; }

  /* Menu lateral: atalhos em duas fileiras de 6, alvos de toque de 44 px */
  .painel { width: min(88vw, 360px); }
  .painel-topo { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; }
  .painel-topo .ir-inicio, .painel-topo .nova-conversa { height: 44px; }
  .painel-conversas .painel-cabecalho { flex-wrap: wrap; }
  .conversa { min-height: 44px; }
  .painel-secoes { padding-bottom: env(safe-area-inset-bottom); }

  /* Tela inicial */
  .inicio { padding: 18px 14px calc(16px + env(safe-area-inset-bottom)); }
  .inicio-cabecalho h1 { font-size: 32px; }
  .inicio-resumo { font-size: 14px; }
  .lista-metas { grid-template-columns: 1fr; }
  .meta { padding: 12px 14px; }
  .meta-valor { font-size: 24px; }

  /* Decisões no chat: botões que cabem o dedo, faixa mais baixa para sobrar conversa */
  .decisoes-topico { max-height: 36vh; padding: 8px 12px 0; }
  .decisao { padding: 12px 14px; }
  .decisao-botoes button { min-height: 44px; flex: 1 1 auto; }

  /* Busca: abaixo da Dynamic Island, com espaço embaixo para tocar fora e fechar */
  .dialogo-busca { width: 94vw; margin-top: calc(12px + env(safe-area-inset-top)); max-height: 70dvh; }
  .busca-caixa { max-height: 70dvh; }
}

/* Botão "Ativar notificações" na tela inicial (push.js) */
.ativar-notificacoes { justify-self: start; margin-top: 10px; min-height: 44px; padding: 10px 16px; font-size: 14px; }

/* App da Tela de Início no iPhone (capturas do Bruno, 2026-09-26):
   1) o app ocupa a tela toda (100dvh deixava uma faixa vazia embaixo no modo instalado);
   2) as outras páginas descem abaixo do relógio e da bateria, e o "Voltar" fica fácil de tocar. */
@media (max-width: 900px) {
  .app { position: fixed; inset: 0; height: auto; }
  .composer { padding-bottom: max(8px, calc(env(safe-area-inset-bottom) - 14px)); }
  body:not(:has(> #app)) { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .voltar { display: inline-flex; align-items: center; min-height: 44px; padding-right: 12px; }
}

/* iOS 26, app da Tela de Início: o iPhone informa a tela 62 pt mais baixa (812 em vez de 874, medido em
   2026-09-27 no iPhone 16 Pro), exatamente a barra de status. Soma essa barra para o app ir até embaixo. */
@media (display-mode: standalone) and (max-width: 900px) {
  .app { bottom: auto; height: calc(100% + env(safe-area-inset-top)); }
}