/* ──────────────────────────────────────────────────────────────
   mobile.css — celular (<=768px) e área segura do iPhone.
   Carregado depois do Tailwind, em todas as páginas, via _pwa_head.html.
   ────────────────────────────────────────────────────────────── */

/* 100vh no Safari conta a barra de endereço: a página fica mais alta que a
   tela e o rodapé (campo de mensagem) some embaixo. 100dvh acompanha. */
@supports (height: 100dvh) {
    body.h-screen { height: 100dvh; }
    .tasks-root { height: 100dvh; }
    .kanban-root { height: 100dvh; }
}

html { -webkit-text-size-adjust: 100%; }

/* Backdrop da gaveta — criado por mobile.js, invisível no desktop */
#mobile-drawer-backdrop { display: none; }

@media (max-width: 768px) {

    /* ── Nada estoura para o lado ─────────────────────────────── */
    html, body { overflow-x: hidden; max-width: 100%; }

    main,
    .tasks-main, .tasks-body > div,
    .kanban-main, .kanban-body > div { min-width: 0 !important; }

    /* O empty state do kanban se ancorava na largura da sidebar */
    :root { --sidebar-w: 0px; }

    /* ── Sidebar vira gaveta (off-canvas) ─────────────────────── */
    #sidebar,
    .tasks-sidebar,
    .kanban-sidebar {
        position: fixed !important;
        top: 0; bottom: 0; left: 0;
        z-index: 70;
        width: min(84vw, 300px) !important;
        min-width: min(84vw, 300px) !important;
        max-width: 300px !important;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, .18);
        background: #fff;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        border-right-width: 1px !important;
    }
    html.dark #sidebar,
    html.dark .tasks-sidebar,
    html.dark .kanban-sidebar { background: #191919; }

    body.drawer-open #sidebar,
    body.drawer-open .tasks-sidebar,
    body.drawer-open .kanban-sidebar { transform: none; }

    #mobile-drawer-backdrop {
        display: block;
        position: fixed; inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 65;
        opacity: 0; pointer-events: none;
        transition: opacity .25s ease;
    }
    body.drawer-open #mobile-drawer-backdrop { opacity: 1; pointer-events: auto; }

    /* ── Cabeçalhos: respeitam o notch e não empurram largura ─── */
    header,
    .tasks-header,
    .kanban-header {
        height: auto !important;
        min-height: 56px;
        padding-top: env(safe-area-inset-top) !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        gap: 6px;
    }

    /* Alvo de toque: 44px é o mínimo que a Apple recomenda.
       Sem mexer em display — quem está com .hidden continua escondido. */
    .sidebar-toggle,
    .dark-toggle-btn,
    .app-launcher-btn,
    .column-menu-btn, .board-item-menu-btn,
    .mobile-injected-toggle {
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }
    .attach-btn, .mic-btn, .mic-discard-btn, .live-btn {
        min-width: 40px;
        min-height: 40px;
        flex-shrink: 0;
    }

    /* iOS dá zoom sozinho em campo com fonte menor que 16px */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="search"], input[type="url"],
    input[type="date"], input[type="datetime-local"], input[type="time"],
    textarea, select { font-size: 16px !important; }

    /* ── Chat (index) ─────────────────────────────────────────── */
    /* O cabeçalho do chat tem coisa demais para 390px: o título encolhe,
       o pontinho de status sai, e o seletor de modelo trunca. */
    main > header > div:first-child { min-width: 0; flex: 1 1 auto; }
    main > header > div:last-child { flex: 0 0 auto; }
    main > header .animate-pulse { display: none; }
    #chat-title {
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        max-width: 38vw;
    }
    /* O campo de texto vinha espremido entre cinco botões */
    #input-area .input-glow { gap: 6px !important; padding-left: 10px !important; padding-right: 10px !important; }
    #message-input { min-width: 0 !important; flex: 1 1 0 !important; }
    #message-input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #messages { padding-left: 14px !important; padding-right: 14px !important; }
    #input-area {
        padding-left: 10px !important;
        padding-right: 10px !important;
        /* --kb-inset: altura que o teclado do iOS cobre (mobile.js mede) */
        padding-bottom: calc(12px + env(safe-area-inset-bottom) + var(--kb-inset, 0px)) !important;
    }
    #send-btn { padding-left: 14px !important; padding-right: 14px !important; }
    #send-btn-label { display: none; }
    #model-selector-btn { max-width: 104px; }
    #model-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* A largura do card de modelos saiu daqui: app.css já fixa 300px com o
       mesmo teto de 100vw, e uma regra por id aqui venceria a de lá calada. */
    #copyright { display: none !important; }
    .live-panel-card, .img-modal-content { max-width: calc(100vw - 20px); }
    /* Mudo e encerrar são tocados com o dedo no meio da conversa: 44px de alvo,
       e o cabeçalho pode quebrar em duas linhas antes de espremer os botões. */
    /* Por id: app.css carrega DEPOIS deste arquivo, então uma regra de classe
       aqui perderia o desempate para o min-height de 40px de lá. */
    #live-mute-btn, #live-end-btn { min-height: 44px; min-width: 44px; }
    .live-panel-header { flex-wrap: wrap; gap: 8px; }

    /* Launcher de aplicativos */
    #app-modal-panel { max-width: calc(100vw - 24px) !important; }

    /* ── Tarefas ──────────────────────────────────────────────── */
    /* Cabeçalho de tarefas/kanban: sem o nome escrito e sem o título,
       o botão de ação para de ser empurrado para fora da tela. */
    .header-logo-name, .header-divider { display: none !important; }
    .tasks-header .header-title, .kanban-header .header-title { display: none !important; }
    .tasks-header, .kanban-header { flex-wrap: nowrap; }
    .tasks-header-left, .header-right { min-width: 0; gap: 6px !important; }
    .header-right { flex-shrink: 0; }
    .tasks-main-scroll { padding: 14px !important; }
    .new-task-btn { white-space: nowrap; padding: 10px 14px !important; }
    .tasks-detail,
    .detail-panel.open {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 75;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        border-left: none !important;
    }

    /* ── Kanban: colunas rolam de lado, uma por vez ───────────── */
    .columns-area {
        padding: 12px !important;
        gap: 12px !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }
    .column {
        min-width: 82vw !important;
        width: 82vw !important;
        scroll-snap-align: start;
    }
    .board-header { flex-wrap: wrap; gap: 8px; padding: 12px !important; }
    .board-title { font-size: 15px; }
    .sidebar-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important; }

    /* ── Admin: cada linha da tabela vira um cartão ─────────────
       Antes daqui o único remédio era rolar de lado: `.table-wrap`
       com `overflow-x: auto` e `.data-table` com `min-width: 620px`.
       Na tela de Provedores, a 390px, a tabela ia até 1043px: a URL
       era cortada no meio e as colunas seguintes, com os botões de
       editar e excluir, ficavam fora da tela sem nenhuma dica de que
       existiam. No dedo, quase ninguém descobre a rolagem lateral.

       A receita é uma só, por seletor, e vale para as 17 tabelas de
       admin.html: o `<thead>` some, cada `<td>` vira uma linha de
       rótulo + valor, e o rótulo sai do cabeçalho da coluna por
       `content: attr(data-label)`. Quem escreve esse data-label é
       mobile.js, lendo o `<thead>`, então tabela nova nasce
       funcionando sem tocar em HTML nenhum.

       Os !important existem porque admin.css carrega DEPOIS deste
       arquivo (mobile.css entra pelo _pwa_head.html, admin.css só
       adiante no <head>) e fixa display, padding, borda e alinhamento
       em `.data-table th/td`. Sem eles a regra perde o desempate e não
       vale, calado. Foi isso que escondeu o bug das modais.

       Duas tabelas ficam de fora do cartão, de propósito:
       `.guardrail-scroll` e `.budget-scroll` já rolavam de lado no
       desktop também (admin.css:707 e :841), é rolagem pensada para
       tabela estreita dentro de card. Elas mantêm o min-width e ganham
       a dica visual de que há mais coluna adiante. O seletor que as
       exclui do cartão é `.table-wrap:not(.guardrail-scroll):not(.budget-scroll)`,
       e é o mesmo que revoga o min-width de 620px para as outras 15. */
    .table-wrap {
        -webkit-overflow-scrolling: touch;
    }
    .guardrail-scroll .data-table,
    .budget-scroll .data-table { min-width: 620px; }

    /* Sem rolagem lateral e sem corte: o menu de três pontinhos abre
       para fora da tabela e precisa que o wrap não vire caixa de scroll. */
    .table-wrap:not(.guardrail-scroll):not(.budget-scroll) {
        overflow: visible !important;
    }
    .table-wrap:not(.guardrail-scroll):not(.budget-scroll) .data-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .table-wrap:not(.guardrail-scroll):not(.budget-scroll) .data-table thead {
        display: none !important;
    }
    .table-wrap:not(.guardrail-scroll):not(.budget-scroll) .data-table tbody,
    .table-wrap:not(.guardrail-scroll):not(.budget-scroll) .data-table tbody tr,
    .table-wrap:not(.guardrail-scroll):not(.budget-scroll) .data-table tbody td {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
    }
    .table-wrap:not(.guardrail-scroll):not(.budget-scroll) .data-table tbody tr {
        border: 1px solid #e5e5e5 !important;
        border-radius: 12px !important;
        padding: 2px 12px !important;
        margin-bottom: 10px !important;
        background: #fff !important;
    }
    /* Cada célula é uma linha do cartão: rótulo à esquerda, valor à
       direita. `overflow-wrap: anywhere` é o que faz a URL longa quebrar
       em vez de empurrar o cartão para fora da tela. */
    .table-wrap:not(.guardrail-scroll):not(.budget-scroll) .data-table tbody td {
        padding: 9px 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        border-top: none !important;
        text-align: left !important;
        background: transparent !important;
        overflow-wrap: anywhere !important;
        word-break: break-word;
        min-width: 0 !important;
    }
    .table-wrap:not(.guardrail-scroll):not(.budget-scroll) .data-table tbody td:last-child {
        border-bottom: none !important;
    }
    /* Só a célula rotulada vira linha de rótulo + valor. A de aviso
       ("Carregando...", "Nenhum resultado") é um colspan sozinho, não
       leva data-label e continua um bloco centralizado. */
    .table-wrap:not(.guardrail-scroll):not(.budget-scroll) .data-table tbody td[data-label] {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 10px;
        min-height: 40px;
    }
    .table-wrap:not(.guardrail-scroll):not(.budget-scroll) .data-table tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 34%;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #a3a3a3;
        line-height: 1.3;
    }
    .table-wrap:not(.guardrail-scroll):not(.budget-scroll) .data-table tbody td[data-label] > * {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    /* Ações: o alvo de toque cresce e o menu abre para dentro do cartão. */
    .table-wrap:not(.guardrail-scroll):not(.budget-scroll) .data-table tbody td .action-menu-wrap {
        margin-left: auto;
    }
    .table-wrap:not(.guardrail-scroll):not(.budget-scroll) .data-table tbody td .action-menu-trigger {
        width: 44px !important;
        height: 44px !important;
    }
    .table-wrap:not(.guardrail-scroll):not(.budget-scroll) .data-table tbody td .action-menu {
        max-width: calc(100vw - 60px);
    }
    html.dark .table-wrap:not(.guardrail-scroll):not(.budget-scroll) .data-table tbody tr {
        border-color: #262626 !important;
        background: #141414 !important;
    }
    html.dark .table-wrap:not(.guardrail-scroll):not(.budget-scroll) .data-table tbody td {
        border-bottom-color: #262626 !important;
    }

    /* ── As duas que continuam rolando de lado: dizer que há mais ──
       Rolagem lateral sem indício nenhum é conteúdo invisível. A borda
       colorida aparece do lado para onde ainda há coluna e some ao
       chegar no fim; quem liga e desliga a classe é mobile.js.
       Fica transparente por padrão para a largura não pular ao rolar.
       O !important é por causa de `html.dark .table-wrap { border: none }`
       (admin.css:348), que ganharia o desempate. */
    .table-wrap.guardrail-scroll,
    .table-wrap.budget-scroll {
        border-left: 4px solid transparent !important;
        border-right: 4px solid transparent !important;
    }
    .table-wrap.dt-mais-direita { border-right-color: rgba(13,148,136,0.5) !important; }
    .table-wrap.dt-mais-esquerda { border-left-color: rgba(13,148,136,0.5) !important; }

    /* ── Barra de ações do admin: botão e busca lado a lado ─────
       O texto do botão ("Novo Provedor") quebrava em duas linhas e ele
       ficava mais alto que o campo de busca, porque `.dt-search` tem
       largura fixa de 200px (admin.css:291) e não cedia espaço. A barra
       é a mesma nas 17 seções, então o conserto é no seletor de todas. */
    .btn { white-space: nowrap !important; }
    .dt-search-wrap { flex: 1 1 120px; min-width: 0; }
    .dt-search { width: 100% !important; }
    .dt-footer { flex-wrap: wrap; gap: 10px; }

    /* ── Ficha do agente: a fileira de abas rola sozinha ────────
       As sete abas (Geral, Modelo, Memória, Ferramentas, Equipe,
       Avançado, Histórico) somam 616px num flex sem quebra. A 390px
       elas não cabiam, e como nada ali tinha rolagem própria a fileira
       esticava o conteúdo do admin para 640px.

       Quem rolava de lado não era o body: era o `<main>` de
       admin.html:202. Ele tem `overflow-y: auto`, e pela regra do CSS
       um eixo em auto força o outro, que estava em visible, a virar
       auto também. Por isso o `html, body { overflow-x: hidden }` lá em
       cima deste arquivo não segurava nada aqui: ele protege o body, e
       o vazamento acontecia um nível abaixo. O efeito na tela era a
       página inteira andando junto com as abas, com o título, os
       parágrafos de ajuda e os botões Voltar e Salvar cortados na
       esquerda.

       Com a rolagem dentro da própria fileira, ela deixa de empurrar a
       largura do `<main>`, e só as abas andam. O `flex: 0 0 auto` nos
       botões impede que o flex os esprema para caber, que é o que
       aconteceria assim que o pai virasse um container de rolagem.

       O !important é pelo mesmo motivo do bloco das tabelas: admin.css
       carrega DEPOIS deste arquivo e define `.agent-tab` (admin.css:548).
       Sem ele a regra perde o desempate e não vale, calada.

       A rolagem em si não ganha aviso visual nesta rodada, diferente da
       tabela, que tem a borda `dt-mais-direita`. Quem chega na ficha vê
       até Equipe e pode não descobrir que Avançado e Histórico estão
       adiante. Risco aceito, registrado aqui para não virar surpresa. */
    #agent-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .agent-tab {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    /* ── Modais: cabem no espaço que o teclado deixou ─────────── */
    /* O teclado do iOS não encolhe a janela: encolhe o visualViewport.
       100dvh continua medindo a tela inteira, então a modal se acha
       maior do que o espaço que sobrou e metade dela fica embaixo do
       teclado. --vvh (altura visível) e --vv-top (onde essa faixa
       começa) são medidos por mobile.js; sem visualViewport, o
       retrocesso é o 100dvh de antes.
       Os !important existem porque admin.css, tasks.html e kanban.html
       carregam DEPOIS deste arquivo e fixam overflow:hidden no box —
       era esse hidden que ganhava o desempate e matava a rolagem.
       São duas famílias de modal, com a mesma receita: a de classe
       (.modal-card/.modal-content/.modal-box) e a de etapa de tarefa
       (.step-modal-*), que tem CSS próprio dentro de tasks.html. A de
       etapa entra aqui, e não lá, para a receita continuar sendo uma só. */
    .modal-overlay, .modal-backdrop, #step-modal-overlay {
        top: var(--vv-top, 0px) !important;
        bottom: auto !important;
        height: var(--vvh, 100dvh) !important;
    }

    .modal-card, .modal-content, .modal-box, .step-modal-box {
        max-width: calc(100vw - 20px) !important;
        max-height: calc(var(--vvh, 100dvh) - 32px) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Cabeçalho e botões ficam parados; o formulário é quem rola.
       É isso que mantém o Salvar alcançável com o teclado aberto. */
    .modal-card > .modal-header, .modal-content > .modal-header, .modal-box > .modal-header,
    .modal-card > .modal-footer, .modal-content > .modal-footer, .modal-box > .modal-footer,
    .step-modal-box > .step-modal-header, .step-modal-box > .step-modal-footer {
        flex: 0 0 auto;
    }

    .modal-card > .modal-body, .modal-content > .modal-body, .modal-box > .modal-body,
    .step-modal-box > .step-modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Modal sem .modal-body (a de confirmação, que é só um parágrafo)
       rola no próprio box, senão o conteúdo ficaria cortado sem saída.
       A de etapa fica fora daqui de propósito: ela sempre monta corpo
       próprio, e deixá-la rolar no box levaria o rodapé junto. */
    .modal-card:not(:has(> .modal-body)),
    .modal-content:not(:has(> .modal-body)),
    .modal-box:not(:has(> .modal-body)) { overflow-y: auto !important; }
}