/* 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 summary { font-size: 11.5px; padding: 2px 9px; }
  .atividade-lista span { display: block; max-width: 100%; padding: 2px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
  .atividade-lista 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; }
}

/* Celular mais fácil (2026-10-03, pedido do Bruno). Menu com nome embaixo de cada ícone; na tela inicial,
   decisões primeiro e só as metas com número; sem a lista longa de agentes (ela já está no menu). */
@media (max-width: 760px) {
  .painel-topo { grid-template-columns: repeat(4, 1fr) !important; gap: 6px 4px !important; }
  .painel-topo .ir-inicio, .painel-topo .nova-conversa { height: 64px !important; grid-template-rows: 26px auto; align-content: center; gap: 2px !important; }
  .painel-topo .ir-inicio > span:not(.badge) { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 10.5px; font-weight: 600; line-height: 1.15; color: var(--texto-3); text-align: center; white-space: normal; overflow: hidden; max-width: 100%; padding: 0 2px; }
  .painel-topo .ir-inicio svg { width: 20px; height: 20px; }
  .bloco-metas .meta.sem-dados { display: none; }
  .bloco-equipe { display: none; }
  .inicio-acoes { display: none; }
  .bloco-decisoes .decisao-botoes button { min-height: 44px; }
}


/* Celular: o Bruno usa muito mais os chats dos agentes do que os atalhos (print de 2026-10-03). Fica uma
   linha só (nova conversa, Início, Buscar, Mais); o resto abre no "Mais" e a lista de chats ganha a tela. */
.ir-mais { display: none !important; }
@media (max-width: 760px) {
  .painel-topo .ir-mais { display: grid !important; order: 1; }
  .painel-topo:not(.expandido) > .ir-inicio:not(#ir-inicio):not(#ir-busca):not(#novo-grupo):not(.ir-mais) { display: none !important; }
  .painel-topo > :not(.nova-conversa):not(#ir-inicio):not(#ir-busca):not(#novo-grupo):not(.ir-mais) { order: 2; }
  /* Novo grupo na primeira linha, ao lado de Novo tópico (2026-10-05, "não consigo criar grupo pelo celular"). */
  .painel-topo { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .painel-topo .ir-inicio, .painel-topo .nova-conversa { height: 56px !important; }
  .painel-topo.expandido .ir-mais svg { transform: rotate(90deg); }
}

/* Computador: telas pouco usadas ficam atrás do "Mais" (2026-10-14; ampliado em 2026-10-23 pela análise de 14 dias: Reunião, Métricas, Demandas, Canais, Conexões, Funis, Acessos, Melhorias e WhatsApp também). Antes: Equipe, Uso de IA, Modelos de IA, Configurações, Mapa do OS
   ficam atrás do "Mais" (decisão do Bruno, 2026-10-14). Celular segue a regra acima. */
@media (min-width: 761px) {
  .painel-topo .ir-mais { display: flex !important; }
  .painel-topo:not(.expandido) > .atalho-raro { display: none !important; }
}