/* Daima Advocacia — celular e telas estreitas.
   Carregado só na versão Advocacia (lib/advocacia.js → paginaAdvocacia); a Imigração não muda.
   Regra geral: até 860 px o menu lateral vira gaveta (botão ☰), o conteúdo ocupa a largura
   toda, tabelas rolam para o lado e janelas (modais) ocupam a tela. */

.menu-movel-btn, .menu-movel-fundo{ display:none; }

@media (max-width: 860px){
  html, body{ overflow-x:hidden; }
  .shell{ display:block; height:auto; min-height:100dvh; }
  .main{ height:auto; min-height:100dvh; overflow:visible; }
  .content{ padding:12px 14px 28px; overflow:visible; }
  /* Telas de conversa (agentes): altura da tela, com a caixa de digitar fixa embaixo */
  .main:has(.ag-corpo){ height:100dvh; overflow:hidden; }

  /* Menu lateral → gaveta */
  .sidebar{ position:fixed; inset:0 auto 0 0; width:min(280px, 84vw); height:100dvh; z-index:80;
    transform:translateX(-105%); transition:transform .22s ease; box-shadow:none; }
  body.menu-aberto .sidebar{ transform:none; box-shadow:20px 0 50px -20px rgba(15,23,42,.45); }
  .menu-movel-fundo{ display:block; position:fixed; inset:0; z-index:79; background:rgba(15,23,42,.38);
    opacity:0; pointer-events:none; transition:opacity .2s; }
  body.menu-aberto .menu-movel-fundo{ opacity:1; pointer-events:auto; }
  body.menu-aberto{ overflow:hidden; }

  /* Barra do topo: botão ☰ + título; ações quebram para a linha de baixo */
  .topbar{ position:sticky; top:0; z-index:40; padding:10px 14px; gap:10px; flex-wrap:wrap; align-items:center;
    background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(8px); }
  .topbar > div:first-of-type{ flex:1; min-width:0; }
  .topbar h1{ font-size:21px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topbar .sub{ font-size:12px; }
  .topbar > div:last-child:not(:first-of-type), .topbar > .btn{ width:100%; }
  .topbar > div:last-child:not(:first-of-type){ justify-content:flex-start; }
  .topbar .btn{ padding:9px 14px; font-size:13px; }
  .menu-movel-btn{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:40px; height:40px;
    border:none; border-radius:12px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow); cursor:pointer; }
  .menu-movel-btn svg{ width:20px; height:20px; }
  .menu-movel-btn.flutuante{ position:fixed; top:10px; left:10px; z-index:78; }
  body:has(> .menu-movel-btn.flutuante) .main{ padding-top:52px; }

  /* Barras de busca e filtros: quebram em linhas; a busca ocupa a linha inteira */
  .toolbar{ flex-wrap:wrap; gap:8px; }
  .toolbar > input, .toolbar > .busca-tabela, .toolbar input[type="search"], .toolbar input[type="text"]{ flex:1 1 100%; min-width:0; width:100%; }
  .toolbar > select{ flex:1 1 40%; min-width:0; }

  /* Blocos, linhas e grades em uma coluna */
  .row{ flex-direction:column; gap:12px; }
  .row > *{ min-width:0; width:100%; }
  .block{ padding:16px 14px; border-radius:20px; overflow-x:auto; }
  .stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .stat .n{ font-size:26px; }

  /* Tabelas: rolam para o lado dentro do bloco, sem estourar a página */
  .content table{ min-width:560px; }
  .content .block > table, .content table{ font-size:12.5px; }

  /* Kanban: uma coluna por vez, deslizando para o lado */
  .kanban{ scroll-snap-type:x mandatory; gap:10px; margin:0 -14px; padding:0 14px 8px; }
  .kanban-col{ width:84vw; max-width:340px; scroll-snap-align:start; }

  /* Janelas: tela quase inteira, rolagem interna */
  .modal-backdrop{ align-items:flex-end; padding:0; }
  .modal, .modal.modal-lg{ width:100vw !important; max-width:100vw !important; max-height:92dvh; overflow-y:auto;
    border-radius:22px 22px 0 0; padding:20px 16px calc(20px + env(safe-area-inset-bottom)); margin:0; }
  .modal .actions{ position:sticky; bottom:-20px; background:var(--surface); padding:10px 0 0; flex-wrap:wrap; }

  /* Formulários: campos lado a lado viram um embaixo do outro */
  .field input, .field select, .field textarea{ font-size:16px; } /* evita o zoom automático do iPhone */
  [style*="grid-template-columns"]:not(.kanban){ grid-template-columns:1fr !important; }

  /* Chat: no celular é uma coisa de cada vez — a lista de conversas, ou a conversa aberta
     (com botão de voltar). As etiquetas do atendimento abrem por baixo, num painel. */
  .chat-shell{ display:block; }
  .chat-shell > div:first-child{ width:auto !important; border-right:none !important; min-height:calc(100dvh - 64px); }
  .chat-list{ width:auto; border-right:none; }
  body.chat-lista .chat-conv, body.chat-lista .crm-panel{ display:none; }
  body.chat-aberto .chat-shell > div:first-child{ display:none !important; }
  body.chat-aberto .chat-conv{ display:flex; height:calc(100dvh - 64px); }
  body.chat-aberto .menu-movel-btn{ display:none; }
  .chat-messages{ padding:14px 12px; }
  .chat-input{ padding:8px; gap:4px; }
  .chat-input input[type="text"]{ min-width:0; font-size:16px; }
  .crm-panel{ position:fixed; left:0; right:0; bottom:0; width:auto; max-height:78dvh; z-index:85; border-radius:22px 22px 0 0;
    transform:translateY(105%); transition:transform .22s ease; box-shadow:0 -20px 50px -20px rgba(15,23,42,.45);
    padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
  body.painel-crm-aberto .crm-panel{ transform:none; }
  body.painel-crm-aberto .menu-movel-fundo{ opacity:1; pointer-events:auto; }
  .chat-movel-acao{ display:inline-flex !important; align-items:center; justify-content:center; gap:6px; flex-shrink:0; height:38px; min-width:38px; padding:0 12px;
    border:none; border-radius:12px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow); cursor:pointer;
    font-family:'Plus Jakarta Sans', sans-serif; font-weight:700; font-size:12.5px; }
  .chat-movel-acao svg{ width:18px; height:18px; }
  body.chat-aberto #pill-whatsapp{ display:none; }
  .topbar > div:first-of-type > div{ min-width:0; }
  body.chat-lista #avatar-topbar{ display:none; }
  body.chat-lista #titulo-topbar{ font-size:0; }
  body.chat-lista #titulo-topbar::after{ content:"Conversas"; font-size:21px; }
  body.chat-lista .topbar .sub{ display:none; }
  #pill-whatsapp{ flex-shrink:0; }

  /* Botão flutuante do suporte não cobre o campo de mensagem */
  .fab-suporte{ bottom:84px; right:12px; transform:scale(.88); }
  .faixa-assinatura{ font-size:12px; padding:7px 12px; gap:8px; }
}
.chat-movel-acao{ display:none; }

@media (max-width: 420px){
  .stats{ grid-template-columns:1fr 1fr; }
  .topbar h1{ font-size:19px; }
}

/* Listas em tabela → cartões no celular (data-label vem de movel.js) */
@media (max-width: 600px){
  .content table.tabela-cartoes{ min-width:0 !important; width:100%; }
  table.tabela-cartoes thead{ display:none; }
  table.tabela-cartoes, table.tabela-cartoes tbody, table.tabela-cartoes tr, table.tabela-cartoes td{ display:block; width:auto; }
  table.tabela-cartoes tr{ padding:12px 2px; border-bottom:1px solid var(--line); }
  table.tabela-cartoes tr:last-child{ border-bottom:none; }
  table.tabela-cartoes td{ border:none !important; padding:3px 0 3px 98px !important; position:relative; min-height:22px; text-align:left !important; white-space:normal !important; }
  table.tabela-cartoes td[data-label=""], table.tabela-cartoes td[colspan]{ padding-left:0 !important; }
  table.tabela-cartoes td[data-label]::before{ content:attr(data-label); position:absolute; left:0; top:5px; width:90px; color:var(--ink-faint); font-family:'Plus Jakarta Sans', sans-serif;
    font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
  table.tabela-cartoes td[data-label=""]::before, table.tabela-cartoes td[colspan]::before{ content:none; }
  table.tabela-cartoes td:first-child{ font-weight:700; }
  .block:has(> table.tabela-cartoes){ overflow-x:visible; }
}