/* ──────────────────────────────────────────────────────────────
   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: #1c1917; }

    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; }
    #model-menu { max-width: calc(100vw - 24px); }
    #copyright { display: none !important; }
    .live-panel-card, .img-modal-content { max-width: calc(100vw - 20px); }

    /* 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: tabela rola dentro do card, não empurra a tela ── */
    .table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .data-table { min-width: 620px; }

    /* Modais em geral cabem na tela */
    .modal-card, .modal-content, .modal-box {
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 40px);
        overflow-y: auto;
    }
}